Skip to content

NXT-14013: Update sizes for largeText for MediaOverlay --> VideoPlayer #345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexandrumorariu merged 14 commits into from
May 20, 2026
Merged

NXT-14013: Update sizes for largeText for MediaOverlay --> VideoPlayer #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f17ae2e
updated enovaui
daniel-stoian-lgp May 12, 2026
e28144c
updated enovaui
daniel-stoian-lgp May 13, 2026
67da93a
Merge remote-tracking branch 'origin/develop' into feature/NXT-14013
daniel-stoian-lgp May 13, 2026
68bcd04
Updated largeText mode for MediaOverlay, PopupTabLAyout, TabGroup and…
daniel-stoian-lgp May 13, 2026
a12de29
Updated largeText mode for Slider --> VideoPlayer
daniel-stoian-lgp May 13, 2026
9563307
Updated largeText mode for Slider --> VideoPlayer
daniel-stoian-lgp May 13, 2026
8797aa5
Updated largeText mode for Slider --> VideoPlayer
daniel-stoian-lgp May 14, 2026
1012a81
Updated largeText mode for Slider --> VideoPlayer
daniel-stoian-lgp May 14, 2026
b6dd2c5
Merge remote-tracking branch 'origin/develop' into feature/NXT-14013
daniel-stoian-lgp May 14, 2026
6a56afb
added missing screenshot tests
daniel-stoian-lgp May 14, 2026
9770858
added changelog
daniel-stoian-lgp May 14, 2026
87157d0
Apply suggestions from code review
daniel-stoian-lgp May 18, 2026
9e142d7
added ss tests for PopupTabLayout.js
daniel-stoian-lgp May 18, 2026
60a792b
Merge remote-tracking branch 'origin/develop' into feature/NXT-14013
daniel-stoian-lgp May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ The following is a curated list of changes in the Enact limestone module, newest

### Changed

- `limestone/Scroller` focus area to be separated from the vertical and horizontal scrollbars when `focusableScrollbar` is `"byEnter"`
- `limestone/Button` styling to match the latest GUI
- `limestone/Card` styling to match the latest GUI
- `limestone/Checkbox` styling to match the latest GUI
Expand All @@ -15,10 +14,19 @@ The following is a curated list of changes in the Enact limestone module, newest
- `limestone/ImageItem` styling to match the latest GUI
- `limestone/Input` styling to match the latest GUI
- `limestone/Item` styling to match the latest GUI
- `limestone/MediaOverlay` styling to match the latest GUI
- `limestone/PageViews` styling to match the latest GUI
- `limestone/Picker` styling to match the latest GUI
- `limestone/PopupTabLayout` styling to match the latest GUI
- `limestone/RadioItem` styling to match the latest GUI
- `limestone/Scroller` focus area to be separated from the vertical and horizontal scrollbars when `focusableScrollbar` is `"byEnter"`
- `limestone/Slider` styling to match the latest GUI
- `limestone/Steps` styling to match the latest GUI
- `limestone/Switch` styling to match the latest GUI
- `limestone/TabLayout` styling to match the latest GUI
- `limestone/TimePicker` styling to match the latest GUI
- `limestone/TooltipDecorator` styling to match the latest GUI
- `limestone/VideoPlayer` styling to match the latest GUI

## [1.10.0] - 2026-05-08

Expand Down
17 changes: 17 additions & 0 deletions MediaOverlay/MediaOverlay.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,23 @@
line-height: @lime-mediaoverlay-line-height;
}

.lime-custom-text({
.text {
font-size: @lime-mediaoverlay-text-font-size-large;
line-height: @lime-mediaoverlay-line-height-large;
}

.caption,
.title {
font-size: @lime-mediaoverlay-caption-font-size-large;
}

.subtitle {
font-size: @lime-mediaoverlay-subtitle-font-size-large;
line-height: @lime-mediaoverlay-line-height-large;
}
});

.applySkins({
.bg {
.lime-spotlight-resting-bg-colors();
Expand Down
6 changes: 6 additions & 0 deletions MediaPlayer/MediaControls.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@
.icon {
--icon-size: @lime-mediaplayer-button-icon-size;
}

.lime-custom-text({
.icon {
--icon-size: @lime-mediaplayer-button-icon-size-large;
}
})
}
}

Expand Down
5 changes: 5 additions & 0 deletions MediaPlayer/Times.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
white-space: nowrap;
min-width: @lime-mediaplayer-times-min-width;

:global(.largeText) & {
font-size: @lime-mediaplayer-times-text-size-large;
line-height: @lime-mediaplayer-times-line-height-large;
}

> * {
display: inline-block;
}
Expand Down
6 changes: 6 additions & 0 deletions PageViews/PageViews.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,18 @@

&.number .stepsRow {
min-height: @lime-pageviews-number-steps-area-min-height;

.pageNumber {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: @lime-pageviews-navigation-text-area-padding;
width: @lime-pageviews-number-steps-number-width;
font-size: @lime-pageviews-number-steps-number-font-size;

:global(.largeText) & {
font-size: @lime-pageviews-number-steps-number-font-size-large;
}

.separator {
width: @lime-pageviews-number-steps-separator-width;
Expand Down
6 changes: 6 additions & 0 deletions PopupTabLayout/PopupTabLayout.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,12 @@
.icon {
--icon-size: @lime-popuptablayout-tab-icon-size;
}

.lime-custom-text({
.icon {
--icon-size: @lime-popuptablayout-tab-icon-size-large;
}
})
}
}

Expand Down
5 changes: 0 additions & 5 deletions Slider/Slider.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,11 +120,6 @@
.minMax {
margin-top: @lime-slider-min-max-margin-top;
}

.lime-custom-text({
@h-gap-large: (@lime-slider-knob-width-large / 2);
Copy link
Copy Markdown
Contributor

@dan-ichim-lgp dan-ichim-lgp May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please confirm VideoPlayer scrubber and standalone Slider in sampler were checked in large text after this change.

Copy link
Copy Markdown
Contributor Author

@daniel-stoian-lgp daniel-stoian-lgp May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it is checked. PR description mentions why this code was removed

padding: ((@lime-slider-knob-height-large - @lime-slider-bar-height) / 2) @h-gap-large;
});
}

&.vertical {
Expand Down
4 changes: 4 additions & 0 deletions Steps/Steps.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
&.numbers {
font-size: @lime-steps-step-number-font-size;
font-weight: @lime-steps-step-number-font-weight;

.lime-custom-text({
font-size: @lime-steps-step-number-font-size-large;
})
}

&.highlightCurrentOnly {
Expand Down
4 changes: 2 additions & 2 deletions TabLayout/TabGroup.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
}

.lime-custom-text({
font-size: @lime-tablayout-tab-font-size;
min-width: @lime-button-height;
font-size: @lime-tablayout-tab-font-size-large;
min-width: @lime-button-height-large;
})
}

Expand Down
7 changes: 7 additions & 0 deletions TooltipDecorator/Tooltip.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,13 @@
}
}

.lime-custom-text({
.tooltipLabel {
font-size: @lime-tooltip-label-font-size-large;
line-height: @lime-tooltip-label-line-height-large;
}
});

&.balloon { /* Needed to prevent global class being added in the DOM */ }

&.transparent {
Expand Down
6 changes: 6 additions & 0 deletions VideoPlayer/Feedback.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,10 @@
color: inherit;
});
}

:global(.largeText) & {
.icon {
font-size: @lime-video-feedback-icon-font-size-large;
}
}
}
9 changes: 9 additions & 0 deletions VideoPlayer/FeedbackTooltip.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
.position(auto, 0, 0, 0);
font-size: @lime-video-slider-tooltip-thumbnail-content-font-size;
margin-bottom: @lime-video-slider-tooltip-thumbnail-content-margin-bottom;

:global(.largeText) & {
font-size: @lime-video-slider-tooltip-thumbnail-content-font-size-large;
}
}
}

Expand Down Expand Up @@ -68,6 +72,11 @@
text-align: center;
margin-bottom: @lime-video-slider-tooltip-margin-bottom;
padding: @lime-video-slider-tooltip-content-padding;

:global(.largeText) & {
font-size: @lime-video-slider-tooltip-font-size-large;
line-height: @lime-video-slider-tooltip-line-height-large;
}
}

.alignmentContainer {
Expand Down
12 changes: 12 additions & 0 deletions VideoPlayer/MediaTitle.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,18 @@
}
}

:global(.largeText) & {
.title {
font-size: @lime-video-player-label-font-size-large;
line-height: @lime-video-player-label-line-height-large;
}

.infoComponents {
font-size: @lime-video-player-info-font-size-large;
line-height: @lime-video-player-info-line-height-large;
}
}

:global(.noAnimation) & {
&.hidden {
transition: none;
Expand Down
25 changes: 24 additions & 1 deletion styles/variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@
@lime-alert-subtitle-font-size: @lime-heading-subtitle-font-size;
@lime-alert-title-font-size: var(--primitive-font-size-108);
@lime-base-font-size: var(--primitive-font-size-60);
@lime-base-font-size-large: var(--primitive-font-size-72);
@lime-body-font-size: @lime-base-font-size;
@lime-body-small-font-size: var(--primitive-font-size-54);
@lime-button-font-size-large: var(--primitive-font-size-72);
Expand Down Expand Up @@ -175,20 +176,29 @@
@lime-item-small-label-font-size: var(--primitive-font-size-48);
@lime-keyguide-font-size: var(--primitive-font-size-60);
@lime-mediaoverlay-caption-font-size: var(--primitive-font-size-60);
@lime-mediaoverlay-caption-font-size-large: var(--primitive-font-size-72);
@lime-mediaoverlay-text-font-size: var(--primitive-font-size-48);
@lime-mediaoverlay-text-font-size-large: var(--primitive-font-size-60);
@lime-mediaoverlay-subtitle-font-size: var(--primitive-font-size-48);
@lime-mediaoverlay-subtitle-font-size-large: var(--primitive-font-size-58);
@lime-mediaplayer-times-text-size: var(--primitive-font-size-48);
@lime-mediaplayer-times-text-size-large: var(--primitive-font-size-58);
@lime-pageviews-number-steps-number-font-size: @lime-base-font-size;
@lime-pageviews-number-steps-number-font-size-large: @lime-base-font-size-large;
@lime-picker-font-size: var(--primitive-font-size-54);
@lime-picker-font-size-large: var(--primitive-font-size-66);
@lime-picker-joined-font-size: var(--primitive-font-size-66);
@lime-picker-joined-font-size-large: var(--primitive-font-size-80);
@lime-radioitem-icon-font-size: var(--primitive-font-size-48);
@lime-radioitem-icon-font-size-large: var(--primitive-font-size-56);
@lime-steps-step-number-font-size: var(--primitive-font-size-48);
@lime-steps-step-number-font-size-large: var(--primitive-font-size-58);
@lime-switch-icon-font-size: var(--primitive-font-size-84);
@lime-tablayout-tab-small-font-size: var(--primitive-font-size-48);
@lime-tablayout-tab-font-size: var(--primitive-font-size-60);
@lime-tablayout-tab-font-size-large: var(--primitive-font-size-72);
@lime-tooltip-label-font-size: var(--primitive-font-size-54);
@lime-tooltip-label-font-size-large: var(--primitive-font-size-66);
@lime-tallglyph-alert-title-font-size: @lime-alert-title-font-size;
@lime-non-latin-body-font-size: var(--primitive-font-size-54);
@lime-non-latin-body-small-font-size: var(--primitive-font-size-48);
Expand Down Expand Up @@ -883,7 +893,8 @@
@lime-mediaoverlay-caption-margin-bottom: var(--primitive-spacing-36);
@lime-mediaoverlay-caption-font-weight: var(--primitive-font-weight-semibold);
@lime-mediaoverlay-font-weight: var(--primitive-font-weight-regular);
@lime-mediaoverlay-line-height: 1.3em;
@lime-mediaoverlay-line-height: 60px;
@lime-mediaoverlay-line-height-large: 70px;
@lime-mediaoverlay-caption-line-height: 1.4em;
@lime-mediaoverlay-padding: var(--primitive-spacing-24);
@lime-mediaoverlay-progressbar-margin: var(--primitive-spacing-24);
Expand All @@ -898,6 +909,7 @@
@lime-mediaplayer-button-border-radius: 96px;
@lime-mediaplayer-button-height: 180px;
@lime-mediaplayer-button-icon-size: 108px;
@lime-mediaplayer-button-icon-size-large: 130px;
@lime-mediaplayer-button-padding: var(--primitive-spacing-36);
@lime-mediaplayer-controls-actionguide-height: 168px;
@lime-mediaplayer-controls-actionguide-padding-bottom: 0;
Expand All @@ -914,6 +926,7 @@
@lime-mediaplayer-slider-knob-size: 36px;
@lime-mediaplayer-slider-tap-area: 60px;
@lime-mediaplayer-times-line-height: 60px;
@lime-mediaplayer-times-line-height-large: 70px;
@lime-mediaplayer-times-min-width: 192px;

// PageViews
Expand Down Expand Up @@ -991,6 +1004,7 @@
// ---------------------------------------
@lime-popuptablayout-margin: var(--primitive-spacing-60) auto var(--primitive-spacing-132) var(--primitive-spacing-60);
@lime-popuptablayout-tab-icon-size: 96px;
@lime-popuptablayout-tab-icon-size-large: (@lime-popuptablayout-tab-icon-size * 1.2);
@lime-popuptablayout-tabs-border-radius: var(--semantic-radius-container);
@lime-popuptablayout-tabs-content-spacing: var(--primitive-spacing-36);
@lime-popuptablayout-content-border-radius: var(--semantic-radius-popup);
Expand Down Expand Up @@ -1182,6 +1196,7 @@
@lime-tooltip-point-height: 37px; // actual value is 36px. +1px to ensure no gaps
@lime-tooltip-border-radius: var(--semantic-radius-button);
@lime-tooltip-label-line-height: 72px;
@lime-tooltip-label-line-height-large: 84px;
@lime-tooltip-padding: var(--primitive-spacing-12) var(--primitive-spacing-48);
@lime-tooltip-margin-offset: var(--primitive-spacing-18); // GUI for the length of the arrow
@lime-tooltip-marquee-width: 600px;
Expand All @@ -1198,17 +1213,21 @@
@lime-video-slider-tooltip-shift-position-bottom: ~"calc(@{lime-video-slider-tooltip-position-bottom} + @{lime-video-slider-tooltip-arrow-border-top})";
@lime-video-slider-tooltip-margin-bottom: var(--primitive-spacing-6);
@lime-video-slider-tooltip-font-size: var(--primitive-font-size-48);
@lime-video-slider-tooltip-font-size-large: var(--primitive-font-size-58);
@lime-video-slider-tooltip-font-weight: var(--primitive-font-weight-regular);
@lime-video-slider-tooltip-line-height: 72px;
@lime-video-slider-tooltip-line-height-large: 84px;
@lime-video-slider-tooltip-gutter-width: var(--primitive-spacing-42);
@lime-video-slider-tooltip-thumbnail-content-font-size: var(--primitive-font-size-54);
@lime-video-slider-tooltip-thumbnail-content-font-size-large: var(--primitive-font-size-56);
@lime-video-slider-tooltip-thumbnail-content-margin-bottom: var(--primitive-spacing-30);
@lime-video-slider-tooltip-thumbnail-border-radius: var(--primitive-radius-12);
@lime-video-slider-tooltip-thumbnail-border-width: 12px;
@lime-video-slider-tooltip-thumbnail-width: 426px;
@lime-video-slider-tooltip-thumbnail-height: 240px;
@lime-video-slider-tooltip-deactivated-thumbnail-opacity: 0.5;
@lime-video-feedback-icon-font-size: 1.25em;
@lime-video-feedback-icon-font-size-large: 1.5em;
@lime-video-feedback-mini-font-size: var(--primitive-font-size-66);
@lime-video-feedback-mini-font-weight: var(--primitive-font-weight-regular);
@lime-video-feedback-mini-padding: var(--primitive-spacing-18) var(--primitive-spacing-60);
Expand All @@ -1219,18 +1238,22 @@
@lime-video-feedback-message-font-weight: var(--primitive-font-weight-semibold);
@lime-video-player-badge-text-size: var(--primitive-font-size-48);
@lime-video-player-info-font-size: var(--primitive-font-size-54);
@lime-video-player-info-font-size-large: var(--primitive-font-size-66);
@lime-video-player-info-font-weight: var(--primitive-font-weight-regular);
@lime-video-player-info-height: 84px;
@lime-video-player-info-line-height: 72px;
@lime-video-player-info-line-height-large: 84px;
@lime-video-player-info-padding: var(--primitive-spacing-72) var(--primitive-spacing-48) 0;
@lime-video-player-info-margin-bottom: var(--primitive-spacing-60);
@lime-video-player-slider-container-height: 132px;
@lime-video-player-slider-container-padding: 0 var(--primitive-spacing-48);
@lime-video-player-padding-bottom: 0;
@lime-video-player-padding-side: var(--primitive-spacing-132);
@lime-video-player-label-font-size: var(--primitive-font-size-90);
@lime-video-player-label-font-size-large: var(--primitive-font-size-108);
@lime-video-player-label-font-weight: var(--primitive-font-weight-semibold);
@lime-video-player-label-line-height: 120px;
@lime-video-player-label-line-height-large: 146px;

// VirtualList
// ---------------------------------------
Expand Down
8 changes: 8 additions & 0 deletions tests/screenshot/apps/components/MediaOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,14 @@ const MediaOverlayTests = [
<MediaOverlay caption="Focused DTV 7-1" progress={0.5} showProgress title="Focused Program Name" subtitle="07:00 AM - 08:00 AM"><source src={videoSrc} /></MediaOverlay>
]),

// Large text
...withConfig({textSize: 'large'}, [
<MediaOverlay caption="Focused DTV 7-1" title="Focused Program Name" subtitle="07:00 AM - 08:00 AM"><source src={videoSrc} /></MediaOverlay>,
<MediaOverlay imageOverlay={img} caption="Focused DTV 7-1" title="Focused Program Name" subtitle="07:00 AM - 08:00 AM" />,
<MediaOverlay text="Focused The quick brown fox jumped over the lazy dog. The bean bird flies at sundown." textAlign="start"><source src={videoSrc} /></MediaOverlay>,
<MediaOverlay caption="Focused DTV 7-1" progress={0.5} showProgress title="Focused Program Name" subtitle="07:00 AM - 08:00 AM"><source src={videoSrc} /></MediaOverlay>
]),

// *************************************************************
// locale = 'ar-SA'
// *************************************************************
Expand Down
10 changes: 10 additions & 0 deletions tests/screenshot/apps/components/PageViews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ const BaseTests = [
component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews index={1} pageIndicatorPosition="top">{PageComponents}</PageViews></Panel>,
wrapper: {full: true}
},
{
component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews index={1} pageIndicatorPosition="top">{PageComponents}</PageViews></Panel>,
wrapper: {full: true},
textSize: 'large'
},
{
component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews index={2} pageIndicatorPosition="top">{PageComponents}</PageViews></Panel>,
wrapper: {full: true}
Expand Down Expand Up @@ -65,6 +70,11 @@ const BaseTests = [
component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews pageIndicatorType="number" index={0}>{PageComponents[0]}</PageViews></Panel>,
wrapper: {full: true}
},
{
component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews pageIndicatorType="number" index={0}>{PageComponents[0]}</PageViews></Panel>,
wrapper: {full: true},
textSize: 'large'
},
{
component: <Panel><Header title="title of panel" subtitle="subtitle of panel" /><PageViews pageIndicatorType="number" index={0}>{PageComponents}</PageViews></Panel>,
wrapper: {full: true}
Expand Down
Loading
Loading