Skip to content

fix: Restore styles of jump-to-page input label #4981

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
jperals merged 3 commits into from
Sep 8, 2026
Merged

fix: Restore styles of jump-to-page input label #4981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
994f54b
fix: Restore styles of jump-to-page input label
jperals Sep 8, 2026
f02f015
Merge branch 'main' into dev-v3-jotresse-fix-jump-to-page-label
jperals Sep 8, 2026
cf62e46
Update style API test snapshots
jperals Sep 8, 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
2 changes: 2 additions & 0 deletions build-tools/utils/custom-css-properties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,5 +200,7 @@ const customCssPropertiesList = [
'styleItemCardBorderRadius',
'styleItemCardBorderWidthDefault',
'styleItemCardBoxShadowDefault',
// Inline label
'inlineLabelBackgroundColor',
];
module.exports = customCssPropertiesList;
4 changes: 4 additions & 0 deletions src/cards/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,16 @@

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;

.root {
@include styles.styles-reset();
}

.header {
&:not(.header-variant-full-page) {
#{custom-props.$inlineLabelBackgroundColor}: awsui.$color-background-container-header;
}
&-variant-full-page.header-refresh {
padding-block-start: 0;
padding-inline-start: 0;
Expand Down
2 changes: 2 additions & 0 deletions src/container/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles' as styles;
@use './shared' as shared;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;

.root {
@include styles.styles-reset;
Expand All @@ -25,6 +26,7 @@
&-default,
&-stacked {
background-color: awsui.$color-background-container-content;
#{custom-props.$inlineLabelBackgroundColor}: awsui.$color-background-container-content;
// Border and shadows are applied with ::before and ::after elements (respectively)
@include styles.container-style;
}
Expand Down
6 changes: 3 additions & 3 deletions src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ exports[`getDropdownStyles handles all possible style configurations 2`] = `unde

exports[`getDropdownStyles handles all possible style configurations 3`] = `
{
"--awsui-dropdown-content-border-color-esndbs": "rgb(0, 0, 0)",
"--awsui-dropdown-content-border-radius-esndbs": "8px",
"--awsui-dropdown-content-border-width-esndbs": "2px",
"--awsui-dropdown-content-border-color-66120l": "rgb(0, 0, 0)",
"--awsui-dropdown-content-border-radius-66120l": "8px",
"--awsui-dropdown-content-border-width-66120l": "2px",
"background": "rgb(255, 255, 255)",
}
`;
144 changes: 72 additions & 72 deletions src/input/__tests__/__snapshots__/styles.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,30 @@

exports[`getInputStyles handles all possible style configurations 1`] = `
{
"--awsui-style-background-default-esndbs": undefined,
"--awsui-style-background-disabled-esndbs": undefined,
"--awsui-style-background-focus-esndbs": undefined,
"--awsui-style-background-hover-esndbs": undefined,
"--awsui-style-background-readonly-esndbs": undefined,
"--awsui-style-border-color-default-esndbs": undefined,
"--awsui-style-border-color-disabled-esndbs": undefined,
"--awsui-style-border-color-focus-esndbs": undefined,
"--awsui-style-border-color-hover-esndbs": undefined,
"--awsui-style-border-color-readonly-esndbs": undefined,
"--awsui-style-box-shadow-default-esndbs": undefined,
"--awsui-style-box-shadow-disabled-esndbs": undefined,
"--awsui-style-box-shadow-focus-esndbs": undefined,
"--awsui-style-box-shadow-hover-esndbs": undefined,
"--awsui-style-box-shadow-readonly-esndbs": undefined,
"--awsui-style-color-default-esndbs": undefined,
"--awsui-style-color-disabled-esndbs": undefined,
"--awsui-style-color-focus-esndbs": undefined,
"--awsui-style-color-hover-esndbs": undefined,
"--awsui-style-color-readonly-esndbs": undefined,
"--awsui-style-placeholder-color-esndbs": undefined,
"--awsui-style-placeholder-font-size-esndbs": undefined,
"--awsui-style-placeholder-font-style-esndbs": undefined,
"--awsui-style-placeholder-font-weight-esndbs": undefined,
"--awsui-style-background-default-66120l": undefined,
"--awsui-style-background-disabled-66120l": undefined,
"--awsui-style-background-focus-66120l": undefined,
"--awsui-style-background-hover-66120l": undefined,
"--awsui-style-background-readonly-66120l": undefined,
"--awsui-style-border-color-default-66120l": undefined,
"--awsui-style-border-color-disabled-66120l": undefined,
"--awsui-style-border-color-focus-66120l": undefined,
"--awsui-style-border-color-hover-66120l": undefined,
"--awsui-style-border-color-readonly-66120l": undefined,
"--awsui-style-box-shadow-default-66120l": undefined,
"--awsui-style-box-shadow-disabled-66120l": undefined,
"--awsui-style-box-shadow-focus-66120l": undefined,
"--awsui-style-box-shadow-hover-66120l": undefined,
"--awsui-style-box-shadow-readonly-66120l": undefined,
"--awsui-style-color-default-66120l": undefined,
"--awsui-style-color-disabled-66120l": undefined,
"--awsui-style-color-focus-66120l": undefined,
"--awsui-style-color-hover-66120l": undefined,
"--awsui-style-color-readonly-66120l": undefined,
"--awsui-style-placeholder-color-66120l": undefined,
"--awsui-style-placeholder-font-size-66120l": undefined,
"--awsui-style-placeholder-font-style-66120l": undefined,
"--awsui-style-placeholder-font-weight-66120l": undefined,
"borderRadius": undefined,
"borderWidth": undefined,
"fontSize": undefined,
Expand All @@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = `

exports[`getInputStyles handles all possible style configurations 2`] = `
{
"--awsui-style-background-default-esndbs": undefined,
"--awsui-style-background-disabled-esndbs": undefined,
"--awsui-style-background-focus-esndbs": undefined,
"--awsui-style-background-hover-esndbs": undefined,
"--awsui-style-background-readonly-esndbs": undefined,
"--awsui-style-border-color-default-esndbs": undefined,
"--awsui-style-border-color-disabled-esndbs": undefined,
"--awsui-style-border-color-focus-esndbs": undefined,
"--awsui-style-border-color-hover-esndbs": undefined,
"--awsui-style-border-color-readonly-esndbs": undefined,
"--awsui-style-box-shadow-default-esndbs": undefined,
"--awsui-style-box-shadow-disabled-esndbs": undefined,
"--awsui-style-box-shadow-focus-esndbs": undefined,
"--awsui-style-box-shadow-hover-esndbs": undefined,
"--awsui-style-box-shadow-readonly-esndbs": undefined,
"--awsui-style-color-default-esndbs": undefined,
"--awsui-style-color-disabled-esndbs": undefined,
"--awsui-style-color-focus-esndbs": undefined,
"--awsui-style-color-hover-esndbs": undefined,
"--awsui-style-color-readonly-esndbs": undefined,
"--awsui-style-placeholder-color-esndbs": undefined,
"--awsui-style-placeholder-font-size-esndbs": undefined,
"--awsui-style-placeholder-font-style-esndbs": undefined,
"--awsui-style-placeholder-font-weight-esndbs": undefined,
"--awsui-style-background-default-66120l": undefined,
"--awsui-style-background-disabled-66120l": undefined,
"--awsui-style-background-focus-66120l": undefined,
"--awsui-style-background-hover-66120l": undefined,
"--awsui-style-background-readonly-66120l": undefined,
"--awsui-style-border-color-default-66120l": undefined,
"--awsui-style-border-color-disabled-66120l": undefined,
"--awsui-style-border-color-focus-66120l": undefined,
"--awsui-style-border-color-hover-66120l": undefined,
"--awsui-style-border-color-readonly-66120l": undefined,
"--awsui-style-box-shadow-default-66120l": undefined,
"--awsui-style-box-shadow-disabled-66120l": undefined,
"--awsui-style-box-shadow-focus-66120l": undefined,
"--awsui-style-box-shadow-hover-66120l": undefined,
"--awsui-style-box-shadow-readonly-66120l": undefined,
"--awsui-style-color-default-66120l": undefined,
"--awsui-style-color-disabled-66120l": undefined,
"--awsui-style-color-focus-66120l": undefined,
"--awsui-style-color-hover-66120l": undefined,
"--awsui-style-color-readonly-66120l": undefined,
"--awsui-style-placeholder-color-66120l": undefined,
"--awsui-style-placeholder-font-size-66120l": undefined,
"--awsui-style-placeholder-font-style-66120l": undefined,
"--awsui-style-placeholder-font-weight-66120l": undefined,
"borderRadius": undefined,
"borderWidth": undefined,
"fontSize": undefined,
Expand All @@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = `

exports[`getInputStyles handles all possible style configurations 3`] = `
{
"--awsui-style-background-default-esndbs": "#ffffff",
"--awsui-style-background-disabled-esndbs": "#f0f0f0",
"--awsui-style-background-focus-esndbs": "#ffffff",
"--awsui-style-background-hover-esndbs": "#fafafa",
"--awsui-style-background-readonly-esndbs": "#ffffff",
"--awsui-style-border-color-default-esndbs": "#cccccc",
"--awsui-style-border-color-disabled-esndbs": "#e0e0e0",
"--awsui-style-border-color-focus-esndbs": "#0073bb",
"--awsui-style-border-color-hover-esndbs": "#999999",
"--awsui-style-border-color-readonly-esndbs": "#e0e0e0",
"--awsui-style-box-shadow-default-esndbs": "none",
"--awsui-style-box-shadow-disabled-esndbs": "none",
"--awsui-style-box-shadow-focus-esndbs": "0 0 0 2px #0073bb",
"--awsui-style-box-shadow-hover-esndbs": "0 1px 2px rgba(0,0,0,0.1)",
"--awsui-style-box-shadow-readonly-esndbs": "none",
"--awsui-style-color-default-esndbs": "#000000",
"--awsui-style-color-disabled-esndbs": "#999999",
"--awsui-style-color-focus-esndbs": "#000000",
"--awsui-style-color-hover-esndbs": "#000000",
"--awsui-style-color-readonly-esndbs": "#000000",
"--awsui-style-placeholder-color-esndbs": "#999999",
"--awsui-style-placeholder-font-size-esndbs": "14px",
"--awsui-style-placeholder-font-style-esndbs": "italic",
"--awsui-style-placeholder-font-weight-esndbs": "400",
"--awsui-style-background-default-66120l": "#ffffff",
"--awsui-style-background-disabled-66120l": "#f0f0f0",
"--awsui-style-background-focus-66120l": "#ffffff",
"--awsui-style-background-hover-66120l": "#fafafa",
"--awsui-style-background-readonly-66120l": "#ffffff",
"--awsui-style-border-color-default-66120l": "#cccccc",
"--awsui-style-border-color-disabled-66120l": "#e0e0e0",
"--awsui-style-border-color-focus-66120l": "#0073bb",
"--awsui-style-border-color-hover-66120l": "#999999",
"--awsui-style-border-color-readonly-66120l": "#e0e0e0",
"--awsui-style-box-shadow-default-66120l": "none",
"--awsui-style-box-shadow-disabled-66120l": "none",
"--awsui-style-box-shadow-focus-66120l": "0 0 0 2px #0073bb",
"--awsui-style-box-shadow-hover-66120l": "0 1px 2px rgba(0,0,0,0.1)",
"--awsui-style-box-shadow-readonly-66120l": "none",
"--awsui-style-color-default-66120l": "#000000",
"--awsui-style-color-disabled-66120l": "#999999",
"--awsui-style-color-focus-66120l": "#000000",
"--awsui-style-color-hover-66120l": "#000000",
"--awsui-style-color-readonly-66120l": "#000000",
"--awsui-style-placeholder-color-66120l": "#999999",
"--awsui-style-placeholder-font-size-66120l": "14px",
"--awsui-style-placeholder-font-style-66120l": "italic",
"--awsui-style-placeholder-font-weight-66120l": "400",
"borderRadius": "4px",
"borderWidth": "1px",
"fontSize": "14px",
Expand Down
13 changes: 11 additions & 2 deletions src/internal/styles/forms/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@use '../foundation' as foundation;
@use '../utils' as utils;
@use './constants' as constants;
@use '../../generated/custom-css-properties/index.scss' as custom-props;

@mixin link-focus(
$border-color: awsui.$color-border-item-focused,
Expand Down Expand Up @@ -329,7 +330,11 @@ $inline-label-border-radius: 2px;
}

@mixin inline-label {
background: linear-gradient(to bottom, awsui.$color-background-layout-main, awsui.$color-background-input-default);
background: linear-gradient(
to bottom,
var(#{custom-props.$inlineLabelBackgroundColor}, awsui.$color-background-layout-main),
awsui.$color-background-input-default
);
border-start-start-radius: $inline-label-border-radius;
border-start-end-radius: $inline-label-border-radius;
border-end-start-radius: $inline-label-border-radius;
Expand All @@ -351,5 +356,9 @@ $inline-label-border-radius: 2px;
}

@mixin inline-label-disabled {
background: linear-gradient(to bottom, awsui.$color-background-layout-main, awsui.$color-background-input-disabled);
background: linear-gradient(
to bottom,
var(#{custom-props.$inlineLabelBackgroundColor}, awsui.$color-background-layout-main),
awsui.$color-background-input-disabled
);
}
10 changes: 5 additions & 5 deletions src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@ exports[`getRootStyles handles all possible style configurations 2`] = `{}`;

exports[`getRootStyles handles all possible style configurations 3`] = `
{
"--awsui-style-item-card-background-default-esndbs": "#ffffff",
"--awsui-style-item-card-border-color-default-esndbs": "#e0e0e0",
"--awsui-style-item-card-border-radius-esndbs": "8px",
"--awsui-style-item-card-border-width-default-esndbs": "1px",
"--awsui-style-item-card-box-shadow-default-esndbs": "0 1px 3px rgba(0,0,0,0.1)",
"--awsui-style-item-card-background-default-66120l": "#ffffff",
"--awsui-style-item-card-border-color-default-66120l": "#e0e0e0",
"--awsui-style-item-card-border-radius-66120l": "8px",
"--awsui-style-item-card-border-width-default-66120l": "1px",
"--awsui-style-item-card-box-shadow-default-66120l": "0 1px 3px rgba(0,0,0,0.1)",
"borderRadius": "8px",
}
`;
4 changes: 3 additions & 1 deletion src/pagination/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,9 @@

&-input {
inline-size: 87px;
margin-block-start: -0.6em;
// This element contains the inline label and the HTML input element.
// Push it upwards to let the HTML input element look vertically centered.
margin-block-start: calc(-2 * #{awsui.$space-scaled-xs});
overflow: visible;
}
}
Expand Down
66 changes: 33 additions & 33 deletions src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations

exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = `
{
"--awsui-style-background-active-esndbs": undefined,
"--awsui-style-background-default-esndbs": undefined,
"--awsui-style-background-disabled-esndbs": undefined,
"--awsui-style-background-hover-esndbs": undefined,
"--awsui-style-color-active-esndbs": undefined,
"--awsui-style-color-default-esndbs": undefined,
"--awsui-style-color-disabled-esndbs": undefined,
"--awsui-style-color-hover-esndbs": undefined,
"--awsui-style-focus-ring-border-color-esndbs": undefined,
"--awsui-style-focus-ring-border-radius-esndbs": undefined,
"--awsui-style-focus-ring-border-width-esndbs": undefined,
"--awsui-style-background-active-66120l": undefined,
"--awsui-style-background-default-66120l": undefined,
"--awsui-style-background-disabled-66120l": undefined,
"--awsui-style-background-hover-66120l": undefined,
"--awsui-style-color-active-66120l": undefined,
"--awsui-style-color-default-66120l": undefined,
"--awsui-style-color-disabled-66120l": undefined,
"--awsui-style-color-hover-66120l": undefined,
"--awsui-style-focus-ring-border-color-66120l": undefined,
"--awsui-style-focus-ring-border-radius-66120l": undefined,
"--awsui-style-focus-ring-border-width-66120l": undefined,
"borderRadius": undefined,
"fontSize": undefined,
"paddingBlock": undefined,
Expand All @@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati

exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = `
{
"--awsui-style-background-active-esndbs": undefined,
"--awsui-style-background-default-esndbs": undefined,
"--awsui-style-background-disabled-esndbs": undefined,
"--awsui-style-background-hover-esndbs": undefined,
"--awsui-style-color-active-esndbs": undefined,
"--awsui-style-color-default-esndbs": undefined,
"--awsui-style-color-disabled-esndbs": undefined,
"--awsui-style-color-hover-esndbs": undefined,
"--awsui-style-focus-ring-border-color-esndbs": undefined,
"--awsui-style-focus-ring-border-radius-esndbs": undefined,
"--awsui-style-focus-ring-border-width-esndbs": undefined,
"--awsui-style-background-active-66120l": undefined,
"--awsui-style-background-default-66120l": undefined,
"--awsui-style-background-disabled-66120l": undefined,
"--awsui-style-background-hover-66120l": undefined,
"--awsui-style-color-active-66120l": undefined,
"--awsui-style-color-default-66120l": undefined,
"--awsui-style-color-disabled-66120l": undefined,
"--awsui-style-color-hover-66120l": undefined,
"--awsui-style-focus-ring-border-color-66120l": undefined,
"--awsui-style-focus-ring-border-radius-66120l": undefined,
"--awsui-style-focus-ring-border-width-66120l": undefined,
"borderRadius": undefined,
"fontSize": undefined,
"paddingBlock": undefined,
Expand All @@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati

exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = `
{
"--awsui-style-background-active-esndbs": "#0073bb",
"--awsui-style-background-default-esndbs": "#ffffff",
"--awsui-style-background-disabled-esndbs": "#f0f0f0",
"--awsui-style-background-hover-esndbs": "#fafafa",
"--awsui-style-color-active-esndbs": "#ffffff",
"--awsui-style-color-default-esndbs": "#000000",
"--awsui-style-color-disabled-esndbs": "#999999",
"--awsui-style-color-hover-esndbs": "#000000",
"--awsui-style-focus-ring-border-color-esndbs": "#0073bb",
"--awsui-style-focus-ring-border-radius-esndbs": "8px",
"--awsui-style-focus-ring-border-width-esndbs": "2px",
"--awsui-style-background-active-66120l": "#0073bb",
"--awsui-style-background-default-66120l": "#ffffff",
"--awsui-style-background-disabled-66120l": "#f0f0f0",
"--awsui-style-background-hover-66120l": "#fafafa",
"--awsui-style-color-active-66120l": "#ffffff",
"--awsui-style-color-default-66120l": "#000000",
"--awsui-style-color-disabled-66120l": "#999999",
"--awsui-style-color-hover-66120l": "#000000",
"--awsui-style-focus-ring-border-color-66120l": "#0073bb",
"--awsui-style-focus-ring-border-radius-66120l": "8px",
"--awsui-style-focus-ring-border-width-66120l": "2px",
"borderRadius": "6px",
"fontSize": "14px",
"paddingBlock": "8px",
Expand Down
Loading
Loading