diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js index 5f4048efa2..79ccc7fd66 100644 --- a/build-tools/utils/custom-css-properties.js +++ b/build-tools/utils/custom-css-properties.js @@ -50,6 +50,7 @@ const customCssPropertiesList = [ 'stackedNotificationsDefaultBottomMargin', // Dropdown Custom Properties 'dropdownDefaultMaxWidth', + 'dropdownDefaultMinWidth', // Spinner Custom Properties 'spinnerRotatorFrom', 'spinnerRotatorTo', diff --git a/pages/calendar/simple.page.tsx b/pages/calendar/simple.page.tsx index d82d64299a..6d031bc545 100644 --- a/pages/calendar/simple.page.tsx +++ b/pages/calendar/simple.page.tsx @@ -12,7 +12,8 @@ export default function CalendarPage() {

Calendar page for a11y tests

{}} diff --git a/pages/date-range-picker/month-calendar-permutations.page.tsx b/pages/date-range-picker/month-calendar-permutations.page.tsx index 2bafba648a..2bfd656afe 100644 --- a/pages/date-range-picker/month-calendar-permutations.page.tsx +++ b/pages/date-range-picker/month-calendar-permutations.page.tsx @@ -94,9 +94,7 @@ export default function DateRangePickerCalendarPage() { return (
{}} onMouseDown={() => {}} diff --git a/pages/date-range-picker/year-calendar-permutations.page.tsx b/pages/date-range-picker/year-calendar-permutations.page.tsx index 4e53aee23e..cfe903794b 100644 --- a/pages/date-range-picker/year-calendar-permutations.page.tsx +++ b/pages/date-range-picker/year-calendar-permutations.page.tsx @@ -74,9 +74,7 @@ export default function DateRangePickerCalendarPage() { return (
{}} onMouseDown={() => {}} diff --git a/pages/dropdown/fixed-container.page.tsx b/pages/dropdown/fixed-container.page.tsx index 7c0db57913..a8ec130287 100644 --- a/pages/dropdown/fixed-container.page.tsx +++ b/pages/dropdown/fixed-container.page.tsx @@ -34,6 +34,7 @@ export default function () { open={open} onDropdownClose={() => setOpen(false)} content={} + minWidth={'trigger'} />
An extra element to enable page scroll
diff --git a/pages/dropdown/interior-fitting.page.tsx b/pages/dropdown/interior-fitting.page.tsx index 9d46e16993..87cc078a62 100644 --- a/pages/dropdown/interior-fitting.page.tsx +++ b/pages/dropdown/interior-fitting.page.tsx @@ -33,7 +33,7 @@ export default function DropdownScenario() {
setOpenParent1(!openParent1)}> Scenario 1 @@ -46,7 +46,7 @@ export default function DropdownScenario() {
  • setOpenChild1(!openChild1)}> Expandable trigger @@ -65,7 +65,7 @@ export default function DropdownScenario() {
    setOpenParent2(!openParent2)}> Scenario 2 @@ -78,7 +78,7 @@ export default function DropdownScenario() {
  • setOpenChild2(!openChild2)}> Expandable trigger @@ -97,7 +97,7 @@ export default function DropdownScenario() {
    setOpenParent3(!openParent3)}> Scenario 3 @@ -110,7 +110,7 @@ export default function DropdownScenario() {
  • setOpenChild3(!openChild3)}> Expandable trigger @@ -133,7 +133,7 @@ export default function DropdownScenario() { style={{ insetInlineStart: '270px', insetBlockStart: '170px' }} > setOpenParent4(!openParent4)}> Scenario 4 @@ -146,7 +146,7 @@ export default function DropdownScenario() {
  • setOpenChild4(!openChild4)}> Expandable trigger diff --git a/pages/dropdown/interior-stretch-height.page.tsx b/pages/dropdown/interior-stretch-height.page.tsx index d415635ec2..ed5ef7aea9 100644 --- a/pages/dropdown/interior-stretch-height.page.tsx +++ b/pages/dropdown/interior-stretch-height.page.tsx @@ -33,7 +33,7 @@ export default function DropdownScenario() { style={{ insetInlineStart: '100px', blockSize: '800px' }} > setOpenParent1(!openParent1)}> @@ -52,7 +52,7 @@ export default function DropdownScenario() { >
  • setOpenChild5(!openChild5)}> Expandable trigger @@ -66,7 +66,7 @@ export default function DropdownScenario() { style={{ insetBlockStart: '170px', insetInlineStart: '190px' }} > setOpenParent6(!openParent6)}> Scenario 6 @@ -79,7 +79,7 @@ export default function DropdownScenario() {
  • setOpenChild6(!openChild6)}> Expandable trigger diff --git a/pages/dropdown/min-width.page.tsx b/pages/dropdown/min-width.page.tsx index e389f08488..ded52c01b4 100644 --- a/pages/dropdown/min-width.page.tsx +++ b/pages/dropdown/min-width.page.tsx @@ -20,8 +20,7 @@ export default function DropdownScenario() { Dropdown should have the width equal to the trigger width, if it is is larger than the minWidth
  • - stretchWidth property takes precedence over minWidth. The dropdown grows greedily, - if stretchWidth is set to true (the default value) + Use minWidth=trigger and maxWidth=trigger to match trigger width exactly.
  • @@ -38,7 +37,6 @@ export default function DropdownScenario() { open={open} onDropdownClose={() => setOpen(false)} minWidth={800} - stretchWidth={false} content={} />
    diff --git a/pages/dropdown/positioning.page.tsx b/pages/dropdown/positioning.page.tsx index 642e360920..f4b28544b7 100644 --- a/pages/dropdown/positioning.page.tsx +++ b/pages/dropdown/positioning.page.tsx @@ -36,7 +36,7 @@ export default function DropdownScenario() {
    setOpen1(!open1)}> Scenario 1 @@ -51,7 +51,7 @@ export default function DropdownScenario() {
    setOpen2(!open2)}> Scenario 2 @@ -66,7 +66,7 @@ export default function DropdownScenario() {
    setOpen3(!open3)}> Scenario 3 @@ -81,7 +81,7 @@ export default function DropdownScenario() {
    setOpen4(!open4)}> Scenario 4 @@ -100,7 +100,7 @@ export default function DropdownScenario() { style={{ insetInlineStart: '80px', insetBlockStart: '170px' }} > setOpen5(!open5)}> Scenario 5 diff --git a/pages/dropdown/prefer-center.page.tsx b/pages/dropdown/prefer-center.page.tsx index 6b22030edf..589c18f40a 100644 --- a/pages/dropdown/prefer-center.page.tsx +++ b/pages/dropdown/prefer-center.page.tsx @@ -27,7 +27,7 @@ export default function DropdownScenario() {
    setOpen1(!open1)}> @@ -43,7 +43,7 @@ export default function DropdownScenario() {
    setOpen2(!open2)}> @@ -59,7 +59,7 @@ export default function DropdownScenario() {
    setOpen3(!open3)}> diff --git a/src/button-dropdown/category-elements/expandable-category-element.tsx b/src/button-dropdown/category-elements/expandable-category-element.tsx index bb80eccf5e..682700b7f2 100644 --- a/src/button-dropdown/category-elements/expandable-category-element.tsx +++ b/src/button-dropdown/category-elements/expandable-category-element.tsx @@ -140,8 +140,8 @@ const ExpandableCategoryElement = ({ content = ( toggleDropdown()} diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx index ec07d07b78..216d0aed0f 100644 --- a/src/date-picker/index.tsx +++ b/src/date-picker/index.tsx @@ -186,7 +186,8 @@ const DatePicker = React.forwardRef( trigger ) : ( closeDropdown()} trigger={trigger} - stretchToTriggerWidth={false} expandToViewport={expandToViewport} dropdownId={dropdownId} content={ diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap index 5137108c04..49f1043328 100644 --- a/src/input/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/input/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,30 +2,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-default-4hh3rt": undefined, - "--awsui-style-background-disabled-4hh3rt": undefined, - "--awsui-style-background-focus-4hh3rt": undefined, - "--awsui-style-background-hover-4hh3rt": undefined, - "--awsui-style-background-readonly-4hh3rt": undefined, - "--awsui-style-border-color-default-4hh3rt": undefined, - "--awsui-style-border-color-disabled-4hh3rt": undefined, - "--awsui-style-border-color-focus-4hh3rt": undefined, - "--awsui-style-border-color-hover-4hh3rt": undefined, - "--awsui-style-border-color-readonly-4hh3rt": undefined, - "--awsui-style-box-shadow-default-4hh3rt": undefined, - "--awsui-style-box-shadow-disabled-4hh3rt": undefined, - "--awsui-style-box-shadow-focus-4hh3rt": undefined, - "--awsui-style-box-shadow-hover-4hh3rt": undefined, - "--awsui-style-box-shadow-readonly-4hh3rt": undefined, - "--awsui-style-color-default-4hh3rt": undefined, - "--awsui-style-color-disabled-4hh3rt": undefined, - "--awsui-style-color-focus-4hh3rt": undefined, - "--awsui-style-color-hover-4hh3rt": undefined, - "--awsui-style-color-readonly-4hh3rt": undefined, - "--awsui-style-placeholder-color-4hh3rt": undefined, - "--awsui-style-placeholder-font-size-4hh3rt": undefined, - "--awsui-style-placeholder-font-style-4hh3rt": undefined, - "--awsui-style-placeholder-font-weight-4hh3rt": undefined, + "--awsui-style-background-default-c5ek4l": undefined, + "--awsui-style-background-disabled-c5ek4l": undefined, + "--awsui-style-background-focus-c5ek4l": undefined, + "--awsui-style-background-hover-c5ek4l": undefined, + "--awsui-style-background-readonly-c5ek4l": undefined, + "--awsui-style-border-color-default-c5ek4l": undefined, + "--awsui-style-border-color-disabled-c5ek4l": undefined, + "--awsui-style-border-color-focus-c5ek4l": undefined, + "--awsui-style-border-color-hover-c5ek4l": undefined, + "--awsui-style-border-color-readonly-c5ek4l": undefined, + "--awsui-style-box-shadow-default-c5ek4l": undefined, + "--awsui-style-box-shadow-disabled-c5ek4l": undefined, + "--awsui-style-box-shadow-focus-c5ek4l": undefined, + "--awsui-style-box-shadow-hover-c5ek4l": undefined, + "--awsui-style-box-shadow-readonly-c5ek4l": undefined, + "--awsui-style-color-default-c5ek4l": undefined, + "--awsui-style-color-disabled-c5ek4l": undefined, + "--awsui-style-color-focus-c5ek4l": undefined, + "--awsui-style-color-hover-c5ek4l": undefined, + "--awsui-style-color-readonly-c5ek4l": undefined, + "--awsui-style-placeholder-color-c5ek4l": undefined, + "--awsui-style-placeholder-font-size-c5ek4l": undefined, + "--awsui-style-placeholder-font-style-c5ek4l": undefined, + "--awsui-style-placeholder-font-weight-c5ek4l": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = ` exports[`getInputStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-default-4hh3rt": undefined, - "--awsui-style-background-disabled-4hh3rt": undefined, - "--awsui-style-background-focus-4hh3rt": undefined, - "--awsui-style-background-hover-4hh3rt": undefined, - "--awsui-style-background-readonly-4hh3rt": undefined, - "--awsui-style-border-color-default-4hh3rt": undefined, - "--awsui-style-border-color-disabled-4hh3rt": undefined, - "--awsui-style-border-color-focus-4hh3rt": undefined, - "--awsui-style-border-color-hover-4hh3rt": undefined, - "--awsui-style-border-color-readonly-4hh3rt": undefined, - "--awsui-style-box-shadow-default-4hh3rt": undefined, - "--awsui-style-box-shadow-disabled-4hh3rt": undefined, - "--awsui-style-box-shadow-focus-4hh3rt": undefined, - "--awsui-style-box-shadow-hover-4hh3rt": undefined, - "--awsui-style-box-shadow-readonly-4hh3rt": undefined, - "--awsui-style-color-default-4hh3rt": undefined, - "--awsui-style-color-disabled-4hh3rt": undefined, - "--awsui-style-color-focus-4hh3rt": undefined, - "--awsui-style-color-hover-4hh3rt": undefined, - "--awsui-style-color-readonly-4hh3rt": undefined, - "--awsui-style-placeholder-color-4hh3rt": undefined, - "--awsui-style-placeholder-font-size-4hh3rt": undefined, - "--awsui-style-placeholder-font-style-4hh3rt": undefined, - "--awsui-style-placeholder-font-weight-4hh3rt": undefined, + "--awsui-style-background-default-c5ek4l": undefined, + "--awsui-style-background-disabled-c5ek4l": undefined, + "--awsui-style-background-focus-c5ek4l": undefined, + "--awsui-style-background-hover-c5ek4l": undefined, + "--awsui-style-background-readonly-c5ek4l": undefined, + "--awsui-style-border-color-default-c5ek4l": undefined, + "--awsui-style-border-color-disabled-c5ek4l": undefined, + "--awsui-style-border-color-focus-c5ek4l": undefined, + "--awsui-style-border-color-hover-c5ek4l": undefined, + "--awsui-style-border-color-readonly-c5ek4l": undefined, + "--awsui-style-box-shadow-default-c5ek4l": undefined, + "--awsui-style-box-shadow-disabled-c5ek4l": undefined, + "--awsui-style-box-shadow-focus-c5ek4l": undefined, + "--awsui-style-box-shadow-hover-c5ek4l": undefined, + "--awsui-style-box-shadow-readonly-c5ek4l": undefined, + "--awsui-style-color-default-c5ek4l": undefined, + "--awsui-style-color-disabled-c5ek4l": undefined, + "--awsui-style-color-focus-c5ek4l": undefined, + "--awsui-style-color-hover-c5ek4l": undefined, + "--awsui-style-color-readonly-c5ek4l": undefined, + "--awsui-style-placeholder-color-c5ek4l": undefined, + "--awsui-style-placeholder-font-size-c5ek4l": undefined, + "--awsui-style-placeholder-font-style-c5ek4l": undefined, + "--awsui-style-placeholder-font-weight-c5ek4l": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = ` exports[`getInputStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-default-4hh3rt": "#ffffff", - "--awsui-style-background-disabled-4hh3rt": "#f0f0f0", - "--awsui-style-background-focus-4hh3rt": "#ffffff", - "--awsui-style-background-hover-4hh3rt": "#fafafa", - "--awsui-style-background-readonly-4hh3rt": "#ffffff", - "--awsui-style-border-color-default-4hh3rt": "#cccccc", - "--awsui-style-border-color-disabled-4hh3rt": "#e0e0e0", - "--awsui-style-border-color-focus-4hh3rt": "#0073bb", - "--awsui-style-border-color-hover-4hh3rt": "#999999", - "--awsui-style-border-color-readonly-4hh3rt": "#e0e0e0", - "--awsui-style-box-shadow-default-4hh3rt": "none", - "--awsui-style-box-shadow-disabled-4hh3rt": "none", - "--awsui-style-box-shadow-focus-4hh3rt": "0 0 0 2px #0073bb", - "--awsui-style-box-shadow-hover-4hh3rt": "0 1px 2px rgba(0,0,0,0.1)", - "--awsui-style-box-shadow-readonly-4hh3rt": "none", - "--awsui-style-color-default-4hh3rt": "#000000", - "--awsui-style-color-disabled-4hh3rt": "#999999", - "--awsui-style-color-focus-4hh3rt": "#000000", - "--awsui-style-color-hover-4hh3rt": "#000000", - "--awsui-style-color-readonly-4hh3rt": "#000000", - "--awsui-style-placeholder-color-4hh3rt": "#999999", - "--awsui-style-placeholder-font-size-4hh3rt": "14px", - "--awsui-style-placeholder-font-style-4hh3rt": "italic", - "--awsui-style-placeholder-font-weight-4hh3rt": "400", + "--awsui-style-background-default-c5ek4l": "#ffffff", + "--awsui-style-background-disabled-c5ek4l": "#f0f0f0", + "--awsui-style-background-focus-c5ek4l": "#ffffff", + "--awsui-style-background-hover-c5ek4l": "#fafafa", + "--awsui-style-background-readonly-c5ek4l": "#ffffff", + "--awsui-style-border-color-default-c5ek4l": "#cccccc", + "--awsui-style-border-color-disabled-c5ek4l": "#e0e0e0", + "--awsui-style-border-color-focus-c5ek4l": "#0073bb", + "--awsui-style-border-color-hover-c5ek4l": "#999999", + "--awsui-style-border-color-readonly-c5ek4l": "#e0e0e0", + "--awsui-style-box-shadow-default-c5ek4l": "none", + "--awsui-style-box-shadow-disabled-c5ek4l": "none", + "--awsui-style-box-shadow-focus-c5ek4l": "0 0 0 2px #0073bb", + "--awsui-style-box-shadow-hover-c5ek4l": "0 1px 2px rgba(0,0,0,0.1)", + "--awsui-style-box-shadow-readonly-c5ek4l": "none", + "--awsui-style-color-default-c5ek4l": "#000000", + "--awsui-style-color-disabled-c5ek4l": "#999999", + "--awsui-style-color-focus-c5ek4l": "#000000", + "--awsui-style-color-hover-c5ek4l": "#000000", + "--awsui-style-color-readonly-c5ek4l": "#000000", + "--awsui-style-placeholder-color-c5ek4l": "#999999", + "--awsui-style-placeholder-font-size-c5ek4l": "14px", + "--awsui-style-placeholder-font-style-c5ek4l": "italic", + "--awsui-style-placeholder-font-weight-c5ek4l": "400", "borderRadius": "4px", "borderWidth": "1px", "fontSize": "14px", diff --git a/src/internal/components/autosuggest-input/index.tsx b/src/internal/components/autosuggest-input/index.tsx index 5add21ecfe..8312e0131b 100644 --- a/src/internal/components/autosuggest-input/index.tsx +++ b/src/internal/components/autosuggest-input/index.tsx @@ -15,6 +15,7 @@ import { } from '../../../input/interfaces'; import InternalInput from '../../../input/internal'; import { BaseComponentProps, getBaseProps } from '../../base-component'; +import { getBreakpointValue } from '../../breakpoints'; import { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context'; import { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events'; import { InternalBaseComponentProps } from '../../hooks/use-base-component'; @@ -294,9 +295,8 @@ const AutosuggestInput = React.forwardRef( return (
    { }) ); test( - 'does nothing, if trigger width is smaller than the provided minWidth', + 'is respected even when larger than trigger width', setupTest('#/light/dropdown/min-width', 'minWidthDropdown', async page => { await page.setWindowSize({ width: 600, height: 600 }); // reopen the dropdown after the window got resized @@ -87,8 +87,8 @@ describe('Dropdown', () => { await page.click(page.getTrigger()); const { width: dropdownWidth } = await page.getBoundingBox(page.getOpenDropdown()); const { width: triggerWidth } = await page.getBoundingBox(page.getTrigger()); - expect(dropdownWidth).toBeLessThan(MIN_WIDTH); - expect(dropdownWidth).toBeLessThanOrEqual(triggerWidth); + expect(triggerWidth).toBeLessThan(MIN_WIDTH); + expect(dropdownWidth).toEqual(MIN_WIDTH); }) ); }); diff --git a/src/internal/components/dropdown/__tests__/dropdown-fit-handler.test.ts b/src/internal/components/dropdown/__tests__/dropdown-fit-handler.test.ts index 8b0424d197..edee16e265 100644 --- a/src/internal/components/dropdown/__tests__/dropdown-fit-handler.test.ts +++ b/src/internal/components/dropdown/__tests__/dropdown-fit-handler.test.ts @@ -102,7 +102,7 @@ describe('getDropdownPosition', () => { }); }); - test('minWidth cannot be more than trigger width', () => { + test('minWidth is respected even when larger than trigger width', () => { const trigger = getSizedElement(200, 50, 300, 100); const dropdown = getSizedElement(100, 400); expect( @@ -114,7 +114,7 @@ describe('getDropdownPosition', () => { }) ).toEqual({ ...defaults, - inlineSize: '200px', + inlineSize: '300px', }); }); @@ -183,7 +183,7 @@ describe('getDropdownPosition', () => { }); }); - describe('with stretchBeyondTriggerWidth=true', () => { + describe('with maxWidth undefined (no max constraint)', () => { test('can expand beyond trigger width', () => { const triggerElement = getSizedElement(100, 50, 300, 15); const dropdownElement = getSizedElement(200, 300); @@ -193,7 +193,7 @@ describe('getDropdownPosition', () => { triggerElement, dropdownElement, overflowParents: [windowSize], - stretchBeyondTriggerWidth: true, + maxWidth: undefined, }) ).toEqual({ ...defaults, @@ -201,7 +201,7 @@ describe('getDropdownPosition', () => { }); }); - test('cannot expand beyond the XXS breakpoint', () => { + test('can expand to content width', () => { const triggerElement = getSizedElement(100, 50, 300, 15); const dropdownElement = getSizedElement(1000, 300); @@ -210,15 +210,15 @@ describe('getDropdownPosition', () => { triggerElement, dropdownElement, overflowParents: [windowSize], - stretchBeyondTriggerWidth: true, + maxWidth: undefined, }) ).toEqual({ ...defaults, - inlineSize: '465px', + inlineSize: '935px', }); }); - test('will always grow to the width of the trigger if possible', () => { + test('will always grow to the width of the content if possible', () => { const triggerElement = getSizedElement(700, 50, 300, 15); const dropdownElement = getSizedElement(400, 300); @@ -227,11 +227,68 @@ describe('getDropdownPosition', () => { triggerElement, dropdownElement, overflowParents: [windowSize], - stretchBeyondTriggerWidth: true, + maxWidth: undefined, + }) + ).toEqual({ + ...defaults, + inlineSize: '400px', + }); + }); + }); + + describe('with maxWidth="trigger" (constrained to trigger)', () => { + test('cannot expand beyond trigger width', () => { + const triggerElement = getSizedElement(100, 50, 300, 15); + const dropdownElement = getSizedElement(200, 300); + + expect( + getDropdownPosition({ + triggerElement, + dropdownElement, + overflowParents: [windowSize], + maxWidth: 'trigger', + }) + ).toEqual({ + ...defaults, + inlineSize: '100px', + }); + }); + }); + + describe('with minWidth=number', () => { + test('respects explicit minWidth pixel value', () => { + const triggerElement = getSizedElement(100, 50, 300, 15); + const dropdownElement = getSizedElement(50, 300); + + expect( + getDropdownPosition({ + triggerElement, + dropdownElement, + overflowParents: [windowSize], + minWidth: 80, + }) + ).toEqual({ + ...defaults, + inlineSize: '80px', + }); + }); + }); + + describe('with maxWidth=number', () => { + test('respects explicit maxWidth pixel value', () => { + const triggerElement = getSizedElement(100, 50, 300, 15); + const dropdownElement = getSizedElement(500, 300); + + expect( + getDropdownPosition({ + triggerElement, + dropdownElement, + overflowParents: [windowSize], + maxWidth: 300, }) ).toEqual({ ...defaults, - inlineSize: '700px', + inlineSize: '300px', }); }); }); diff --git a/src/internal/components/dropdown/__tests__/dropdown.test.tsx b/src/internal/components/dropdown/__tests__/dropdown.test.tsx index de788cd7e6..321782f16e 100644 --- a/src/internal/components/dropdown/__tests__/dropdown.test.tsx +++ b/src/internal/components/dropdown/__tests__/dropdown.test.tsx @@ -5,6 +5,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react'; import Dropdown from '../../../../../lib/components/internal/components/dropdown'; import { calculatePosition } from '../../../../../lib/components/internal/components/dropdown/dropdown-fit-handler'; +import customCssProps from '../../../../../lib/components/internal/generated/custom-css-properties'; import DropdownWrapper from '../../../../../lib/components/test-utils/dom/internal/dropdown'; const outsideId = 'outside'; @@ -192,6 +193,20 @@ describe('Dropdown Component', () => { expect(calculatePosition).toHaveBeenCalledTimes(0); }); }); + + describe('width CSS variables', () => { + test('applies numeric minWidth value as pixels', () => { + const [wrapper] = renderDropdown(} open={true} minWidth={300} />); + const dropdown = wrapper.findOpenDropdown()!.getElement(); + expect(dropdown.style.getPropertyValue(customCssProps.dropdownDefaultMinWidth)).toBe('300px'); + }); + + test('applies numeric maxWidth value as pixels', () => { + const [wrapper] = renderDropdown(} open={true} maxWidth={250} />); + const dropdown = wrapper.findOpenDropdown()!.getElement(); + expect(dropdown.style.getPropertyValue(customCssProps.dropdownDefaultMaxWidth)).toBe('250px'); + }); + }); }); /** diff --git a/src/internal/components/dropdown/dropdown-fit-handler.ts b/src/internal/components/dropdown/dropdown-fit-handler.ts index ffb1af613e..7b95f2f265 100644 --- a/src/internal/components/dropdown/dropdown-fit-handler.ts +++ b/src/internal/components/dropdown/dropdown-fit-handler.ts @@ -2,9 +2,9 @@ // SPDX-License-Identifier: Apache-2.0 import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal'; -import { getBreakpointValue } from '../../breakpoints'; import { BoundingBox, getOverflowParentDimensions, getOverflowParents } from '../../utils/scrollable-containers'; import { LogicalDOMRect } from './dropdown-position'; +import { DropdownWidthConstraint } from './interfaces'; import styles from './styles.css.js'; @@ -44,10 +44,6 @@ const getClosestParentDimensions = (element: HTMLElement): any => { return parents.shift(); }; -// By default, most dropdowns should expand their content as necessary, but to a maximum of 465px (the XXS breakpoint). -// This value was determined by UX but may be subject to change in the future, depending on the feedback. -export const defaultMaxDropdownWidth = getBreakpointValue('xxs'); - const getAvailableSpace = ({ trigger, overflowParents, @@ -159,44 +155,55 @@ const getInteriorAvailableSpace = ({ ); }; +const resolveWidthConstraint = ( + constraint: DropdownWidthConstraint | undefined, + triggerWidth: number, + fallback: number +): number => { + if (constraint === 'trigger') { + return triggerWidth; + } + if (typeof constraint === 'number') { + return constraint; + } + return fallback; +}; + const getWidths = ({ triggerElement, dropdownElement, - desiredMinWidth, - stretchBeyondTriggerWidth = false, + minWidthConstraint, + maxWidthConstraint, }: { triggerElement: HTMLElement; dropdownElement: HTMLElement; - desiredMinWidth?: number; - stretchBeyondTriggerWidth?: boolean; + minWidthConstraint?: DropdownWidthConstraint; + maxWidthConstraint?: DropdownWidthConstraint; }) => { - // Determine the width of the trigger const { inlineSize: triggerInlineSize } = getLogicalBoundingClientRect(triggerElement); - // Minimum width is determined by either an explicit number (desiredMinWidth) or the trigger width - const minWidth = desiredMinWidth ? Math.min(triggerInlineSize, desiredMinWidth) : triggerInlineSize; - // If stretchBeyondTriggerWidth is true, the maximum width is the XS breakpoint (465px) or the trigger width (if bigger). - const maxWidth = stretchBeyondTriggerWidth ? Math.max(defaultMaxDropdownWidth, triggerInlineSize) : Number.MAX_VALUE; - // Determine the actual dropdown width, the size that it "wants" to be const { inlineSize: requiredWidth } = getLogicalBoundingClientRect(dropdownElement); - // Try to achieve the required/desired width within the given parameters + + const minWidth = resolveWidthConstraint(minWidthConstraint, triggerInlineSize, 0); + const maxWidth = resolveWidthConstraint(maxWidthConstraint, triggerInlineSize, Number.MAX_VALUE); + const idealWidth = Math.min(Math.max(requiredWidth, minWidth), maxWidth); return { idealWidth, minWidth, triggerInlineSize }; }; -export const hasEnoughSpaceToStretchBeyondTriggerWidth = ({ +export const hasEnoughSpaceForFlexibleWidth = ({ triggerElement, dropdownElement, - desiredMinWidth, + minWidthConstraint, + maxWidthConstraint, expandToViewport, - stretchWidth, stretchHeight, isMobile, }: { triggerElement: HTMLElement; dropdownElement: HTMLElement; - desiredMinWidth?: number; + minWidthConstraint?: DropdownWidthConstraint; + maxWidthConstraint?: DropdownWidthConstraint; expandToViewport: boolean; - stretchWidth: boolean; stretchHeight: boolean; isMobile: boolean; }) => { @@ -209,13 +216,12 @@ export const hasEnoughSpaceToStretchBeyondTriggerWidth = ({ const { idealWidth } = getWidths({ triggerElement: triggerElement, dropdownElement, - desiredMinWidth, - stretchBeyondTriggerWidth: true, + minWidthConstraint, + maxWidthConstraint, }); const availableSpace = getAvailableSpace({ trigger: triggerElement, overflowParents, - stretchWidth, stretchHeight, isMobile, }); @@ -226,36 +232,36 @@ export const getDropdownPosition = ({ triggerElement, dropdownElement, overflowParents, - minWidth: desiredMinWidth, + minWidth: minWidthConstraint, + maxWidth: maxWidthConstraint, preferCenter = false, - stretchWidth = false, + matchTriggerWidth = false, stretchHeight = false, isMobile = false, - stretchBeyondTriggerWidth = false, }: { triggerElement: HTMLElement; dropdownElement: HTMLElement; overflowParents: ReadonlyArray; - minWidth?: number; + minWidth?: DropdownWidthConstraint; + maxWidth?: DropdownWidthConstraint; preferCenter?: boolean; - stretchWidth?: boolean; + matchTriggerWidth?: boolean; stretchHeight?: boolean; isMobile?: boolean; - stretchBeyondTriggerWidth?: boolean; }): DropdownPosition => { // Determine the space available around the dropdown that it can grow in const availableSpace = getAvailableSpace({ trigger: triggerElement, overflowParents, - stretchWidth, + stretchWidth: matchTriggerWidth, stretchHeight, isMobile, }); const { idealWidth, minWidth, triggerInlineSize } = getWidths({ triggerElement, dropdownElement, - desiredMinWidth, - stretchBeyondTriggerWidth, + minWidthConstraint, + maxWidthConstraint, }); let dropInlineStart: boolean; @@ -357,11 +363,11 @@ export const calculatePosition = ( interior: boolean, expandToViewport: boolean, preferCenter: boolean, - stretchWidth: boolean, + matchTriggerWidth: boolean, stretchHeight: boolean, isMobile: boolean, - minWidth?: number, - stretchBeyondTriggerWidth?: boolean + minWidth?: DropdownWidthConstraint, + maxWidth?: DropdownWidthConstraint ): [DropdownPosition, LogicalDOMRect] => { // cleaning previously assigned values, // so that they are not reused in case of screen resize and similar events @@ -388,11 +394,11 @@ export const calculatePosition = ( dropdownElement, overflowParents, minWidth, + maxWidth, preferCenter, - stretchWidth, + matchTriggerWidth, stretchHeight, isMobile, - stretchBeyondTriggerWidth, }); const triggerBox = getLogicalBoundingClientRect(triggerElement); return [position, triggerBox]; diff --git a/src/internal/components/dropdown/dropdown-position.ts b/src/internal/components/dropdown/dropdown-position.ts index 3ad3aaf2c0..e66a9e92fc 100644 --- a/src/internal/components/dropdown/dropdown-position.ts +++ b/src/internal/components/dropdown/dropdown-position.ts @@ -42,7 +42,10 @@ export function applyDropdownPositionRelativeToViewport({ dropdownElement.style.insetBlockStart = `${verticalScrollOffset + triggerRect.insetBlockEnd}px`; } if (position.dropInlineStart) { - dropdownElement.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerRect.insetInlineEnd}px - ${position.inlineSize})`; + // For right-aligned dropdowns, use the actual rendered width when flexible width is enabled + // to ensure proper alignment even when CSS constraints differ from calculated inlineSize + const actualWidth = dropdownElement.getBoundingClientRect().width; + dropdownElement.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerRect.insetInlineEnd}px - ${actualWidth}px)`; } else { dropdownElement.style.insetInlineStart = `${horizontalScrollOffset + triggerRect.insetInlineStart}px`; } diff --git a/src/internal/components/dropdown/index.tsx b/src/internal/components/dropdown/index.tsx index 95beece345..5ee9b28b01 100644 --- a/src/internal/components/dropdown/index.tsx +++ b/src/internal/components/dropdown/index.tsx @@ -19,9 +19,8 @@ import { Transition, TransitionStatus } from '../transition'; import { DropdownContextProvider, DropdownContextProviderProps } from './context'; import { calculatePosition, - defaultMaxDropdownWidth, DropdownPosition, - hasEnoughSpaceToStretchBeyondTriggerWidth, + hasEnoughSpaceForFlexibleWidth, InteriorDropdownPosition, } from './dropdown-fit-handler'; import { applyDropdownPositionRelativeToViewport, LogicalDOMRect } from './dropdown-position'; @@ -65,13 +64,15 @@ interface TransitionContentProps { state: TransitionStatus; transitionRef: React.MutableRefObject; dropdownClasses: string; - stretchWidth: boolean; + matchTriggerWidth: boolean; + hideBlockBorder: boolean; interior: boolean; isRefresh: boolean; dropdownRef: React.RefObject; verticalContainerRef: React.RefObject; expandToViewport?: boolean; - stretchBeyondTriggerWidth?: boolean; + minWidth?: string; + maxWidth?: string; header?: React.ReactNode; content?: React.ReactNode; footer?: React.ReactNode; @@ -88,13 +89,15 @@ const TransitionContent = ({ state, transitionRef, dropdownClasses, - stretchWidth, + matchTriggerWidth, + hideBlockBorder, interior, isRefresh, dropdownRef, verticalContainerRef, expandToViewport, - stretchBeyondTriggerWidth, + minWidth, + maxWidth, header, content, footer, @@ -107,16 +110,23 @@ const TransitionContent = ({ ariaDescribedby, }: TransitionContentProps) => { const contentRef = useMergeRefs(dropdownRef, transitionRef); + const dropdownStyles: Record = {}; + if (minWidth) { + dropdownStyles[customCssProps.dropdownDefaultMinWidth] = minWidth; + } + if (maxWidth) { + dropdownStyles[customCssProps.dropdownDefaultMaxWidth] = maxWidth; + } return (
    { @@ -193,24 +200,21 @@ const Dropdown = ({ const isMobile = useMobile(); + // Derive if dropdown should match trigger width exactly + // This happens when both minWidth and maxWidth are explicitly set to 'trigger' + const matchTriggerWidth = minWidth === 'trigger' && maxWidth === 'trigger'; + const setDropdownPosition = ( position: DropdownPosition | InteriorDropdownPosition, triggerBox: LogicalDOMRect, target: HTMLDivElement, verticalContainer: HTMLDivElement ) => { - const entireWidth = !interior && stretchWidth; - if (!stretchWidth) { - // 1px offset for dropdowns where the dropdown itself needs a border, rather than on the items - verticalContainer.style.maxBlockSize = `${parseInt(position.blockSize) + 1}px`; - } else { - verticalContainer.style.maxBlockSize = position.blockSize; - } + verticalContainer.style.maxBlockSize = position.blockSize; - if (entireWidth && !expandToViewport) { - if (stretchToTriggerWidth) { - target.classList.add(styles['occupy-entire-width']); - } + // Only apply occupy-entire-width when matching trigger width exactly and not in portal mode + if (!interior && matchTriggerWidth && !expandToViewport) { + target.classList.add(styles['occupy-entire-width']); } else { target.style.inlineSize = position.inlineSize; } @@ -283,22 +287,21 @@ const Dropdown = ({ } }; - // Prevent the dropdown width from stretching beyond the trigger width - // if that is going to cause the dropdown to be cropped because of overflow + // Check if the dropdown has enough space to fit with its desired width constraints + // If not, remove the class that allows flexible width sizing const fixStretching = () => { - const classNameToRemove = styles['stretch-beyond-trigger-width']; + const classNameToRemove = styles['use-flexible-width']; if ( open && - stretchBeyondTriggerWidth && dropdownRef.current && triggerRef.current && dropdownRef.current.classList.contains(classNameToRemove) && - !hasEnoughSpaceToStretchBeyondTriggerWidth({ + !hasEnoughSpaceForFlexibleWidth({ triggerElement: triggerRef.current, dropdownElement: dropdownRef.current, - desiredMinWidth: minWidth, + minWidthConstraint: minWidth, + maxWidthConstraint: maxWidth, expandToViewport, - stretchWidth, stretchHeight, isMobile, }) @@ -312,10 +315,10 @@ const Dropdown = ({ useLayoutEffect(() => { const onDropdownOpen = () => { if (open && dropdownRef.current && triggerRef.current && verticalContainerRef.current) { - // calculate scroll width only for dropdowns that has a scrollbar and ignore it for date picker components if (scrollable) { dropdownRef.current.classList.add(styles.nowrap); } + setDropdownPosition( ...calculatePosition( dropdownRef.current, @@ -324,15 +327,16 @@ const Dropdown = ({ interior, expandToViewport, preferCenter, - stretchWidth, + matchTriggerWidth, stretchHeight, isMobile, minWidth, - stretchBeyondTriggerWidth + maxWidth ), dropdownRef.current, verticalContainerRef.current ); + if (scrollable) { dropdownRef.current.classList.remove(styles.nowrap); } @@ -356,7 +360,7 @@ const Dropdown = ({ } // See AWSUI-13040 // eslint-disable-next-line react-hooks/exhaustive-deps - }, [open, dropdownRef, triggerRef, verticalContainerRef, interior, stretchWidth, isMobile, contentKey]); + }, [open, dropdownRef, triggerRef, verticalContainerRef, interior, matchTriggerWidth, isMobile, contentKey]); // subscribe to outside click useEffect(() => { @@ -406,6 +410,30 @@ const Dropdown = ({ const referrerId = useUniqueId(); + // Compute CSS variable values for min/max width + // These will be used by the use-flexible-width CSS class + const getMinWidthCssValue = (): string | undefined => { + if (minWidth === undefined) { + return undefined; + } + if (typeof minWidth === 'number') { + return `${minWidth}px`; + } + // 'trigger' maps to 100% (relative to parent) + return '100%'; + }; + + const getMaxWidthCssValue = (): string | undefined => { + if (maxWidth === undefined) { + return 'none'; + } + if (typeof maxWidth === 'number') { + return `${maxWidth}px`; + } + // 'trigger' maps to 100% (relative to parent) + return '100%'; + }; + return (
    diff --git a/src/internal/components/dropdown/interfaces.ts b/src/internal/components/dropdown/interfaces.ts index 72b830a69b..5acf2aacee 100644 --- a/src/internal/components/dropdown/interfaces.ts +++ b/src/internal/components/dropdown/interfaces.ts @@ -5,6 +5,14 @@ import React from 'react'; import { NonCancelableEventHandler } from '../../events'; export type OptionsFilteringType = 'none' | 'auto' | 'manual'; + +/** + * Width constraint for the dropdown. + * - 'trigger': references the trigger element's width + * - number: width in pixels + */ +export type DropdownWidthConstraint = 'trigger' | number; + export interface OptionsLoadItemsDetail { filteringText: string; firstPage: boolean; @@ -47,42 +55,47 @@ export interface DropdownProps extends ExpandToViewport { * Trigger element. */ trigger: React.ReactNode; + /** * "Sticky" header of the dropdown content */ header?: React.ReactNode; + /** * Footer slot fixed at the bottom of the dropdown */ footer?: React.ReactNode; + /** * Dropdown content elements. */ content?: React.ReactNode; + /** * Updating content key triggers dropdown position re-evaluation. */ contentKey?: string; + /** * Open state of the dropdown. */ open?: boolean; + /** * Called when a user clicks outside of the dropdown content, when it is open. */ onDropdownClose?: NonCancelableEventHandler; + /** * Called when a mouse button is pressed inside the dropdown content. */ onMouseDown?: React.MouseEventHandler; + /** * Dropdown id */ dropdownId?: string; - /** - * Stretches dropdown to occupy entire width. - */ - stretchWidth?: boolean; + /** * Stretches dropdown to occupy entire height. */ @@ -94,16 +107,20 @@ export interface DropdownProps extends ExpandToViewport { stretchTriggerHeight?: boolean; /** - * Whether the dropdown content should be at least as wide as the trigger. - * - * @defaultValue true + * Minimum width constraint for the dropdown. + * - Number: minimum width in pixels + * - 'trigger': dropdown will be at least as wide as the trigger + * - undefined: no minimum constraint (fits content) */ - stretchToTriggerWidth?: boolean; + minWidth?: DropdownWidthConstraint; /** - * Whether the dropdown content can grow beyond the width of the trigger. + * Maximum width constraint for the dropdown. + * - Number: maximum width in pixels + * - 'trigger': dropdown cannot exceed the trigger width + * - undefined: fit to content width (no max constraint) */ - stretchBeyondTriggerWidth?: boolean; + maxWidth?: DropdownWidthConstraint; /** * Determines that the dropdown should preferably be aligned to the center of the trigger @@ -112,13 +129,15 @@ export interface DropdownProps extends ExpandToViewport { preferCenter?: boolean; /** - * Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out). + * Hides the block (top/bottom) borders of the dropdown content wrapper. */ - interior?: boolean; + hideBlockBorder?: boolean; + /** - * Sets the min width of the dropdown (in px) + * Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out). */ - minWidth?: number; + interior?: boolean; + /** * Whether the dropdown will have a scrollbar or not */ @@ -143,14 +162,17 @@ export interface DropdownProps extends ExpandToViewport { * ID for the dropdown content wrapper */ dropdownContentId?: string; + /** * HTML role for the dropdown content wrapper */ - dropdownContentRole?: string; + ariaRole?: string; + /** * Labelledby for the dropdown (required when role="dialog") */ ariaLabelledby?: string; + /** * Describedby for the dropdown (recommended when role="dialog") */ diff --git a/src/internal/components/dropdown/styles.scss b/src/internal/components/dropdown/styles.scss index f7d9eeb51f..f65a88b5d4 100644 --- a/src/internal/components/dropdown/styles.scss +++ b/src/internal/components/dropdown/styles.scss @@ -73,9 +73,10 @@ &.occupy-entire-width { min-inline-size: 100%; } - &.stretch-beyond-trigger-width { + &.use-flexible-width { inline-size: max-content; - max-inline-size: var(#{custom-props.$dropdownDefaultMaxWidth}, 100%); + max-inline-size: var(#{custom-props.$dropdownDefaultMaxWidth}, none); + min-inline-size: var(#{custom-props.$dropdownDefaultMinWidth}, auto); } &.interior > .dropdown-content-wrapper { margin-block-start: -1px; diff --git a/src/multiselect/internal.tsx b/src/multiselect/internal.tsx index 0c6f47d225..accf257535 100644 --- a/src/multiselect/internal.tsx +++ b/src/multiselect/internal.tsx @@ -7,6 +7,7 @@ import { useUniqueId } from '@cloudscape-design/component-toolkit/internal'; import { useInternalI18n } from '../i18n/context'; import { getBaseProps } from '../internal/base-component'; +import { getBreakpointValue } from '../internal/breakpoints'; import Dropdown from '../internal/components/dropdown'; import DropdownFooter from '../internal/components/dropdown-footer/index.js'; import ScreenreaderOnly from '../internal/components/screenreader-only'; @@ -162,11 +163,11 @@ const InternalMultiselect = React.forwardRef( > Pick< - DropdownProps, - 'onFocus' | 'onBlur' | 'dropdownContentId' | 'dropdownContentRole' - > = () => ({ + const getDropdownProps: () => Pick = () => ({ onFocus: handleFocus, onBlur: handleBlur, dropdownContentId: dialogId, - dropdownContentRole: hasFilter ? 'dialog' : undefined, + ariaRole: hasFilter ? 'dialog' : undefined, }); const getTriggerProps = (disabled = false, autoFocus = false) => { diff --git a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap index 0bbae37e46..5b880a8c80 100644 --- a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,36 +2,36 @@ exports[`getSliderStyles handles all possible style configurations 1`] = ` { - "--awsui-style-slider-handle-background-active-4hh3rt": undefined, - "--awsui-style-slider-handle-background-default-4hh3rt": undefined, - "--awsui-style-slider-handle-background-hover-4hh3rt": undefined, - "--awsui-style-slider-handle-border-radius-4hh3rt": undefined, - "--awsui-style-slider-range-background-active-4hh3rt": undefined, - "--awsui-style-slider-range-background-default-4hh3rt": undefined, - "--awsui-style-slider-track-background-color-4hh3rt": undefined, + "--awsui-style-slider-handle-background-active-c5ek4l": undefined, + "--awsui-style-slider-handle-background-default-c5ek4l": undefined, + "--awsui-style-slider-handle-background-hover-c5ek4l": undefined, + "--awsui-style-slider-handle-border-radius-c5ek4l": undefined, + "--awsui-style-slider-range-background-active-c5ek4l": undefined, + "--awsui-style-slider-range-background-default-c5ek4l": undefined, + "--awsui-style-slider-track-background-color-c5ek4l": undefined, } `; exports[`getSliderStyles handles all possible style configurations 2`] = ` { - "--awsui-style-slider-handle-background-active-4hh3rt": undefined, - "--awsui-style-slider-handle-background-default-4hh3rt": undefined, - "--awsui-style-slider-handle-background-hover-4hh3rt": undefined, - "--awsui-style-slider-handle-border-radius-4hh3rt": undefined, - "--awsui-style-slider-range-background-active-4hh3rt": undefined, - "--awsui-style-slider-range-background-default-4hh3rt": undefined, - "--awsui-style-slider-track-background-color-4hh3rt": undefined, + "--awsui-style-slider-handle-background-active-c5ek4l": undefined, + "--awsui-style-slider-handle-background-default-c5ek4l": undefined, + "--awsui-style-slider-handle-background-hover-c5ek4l": undefined, + "--awsui-style-slider-handle-border-radius-c5ek4l": undefined, + "--awsui-style-slider-range-background-active-c5ek4l": undefined, + "--awsui-style-slider-range-background-default-c5ek4l": undefined, + "--awsui-style-slider-track-background-color-c5ek4l": undefined, } `; exports[`getSliderStyles handles all possible style configurations 3`] = ` { - "--awsui-style-slider-handle-background-active-4hh3rt": "#1d4ed8", - "--awsui-style-slider-handle-background-default-4hh3rt": "#3b82f6", - "--awsui-style-slider-handle-background-hover-4hh3rt": "#2563eb", - "--awsui-style-slider-handle-border-radius-4hh3rt": "50%", - "--awsui-style-slider-range-background-active-4hh3rt": "#2563eb", - "--awsui-style-slider-range-background-default-4hh3rt": "#3b82f6", - "--awsui-style-slider-track-background-color-4hh3rt": "#dbeafe", + "--awsui-style-slider-handle-background-active-c5ek4l": "#1d4ed8", + "--awsui-style-slider-handle-background-default-c5ek4l": "#3b82f6", + "--awsui-style-slider-handle-background-hover-c5ek4l": "#2563eb", + "--awsui-style-slider-handle-border-radius-c5ek4l": "50%", + "--awsui-style-slider-range-background-active-c5ek4l": "#2563eb", + "--awsui-style-slider-range-background-default-c5ek4l": "#3b82f6", + "--awsui-style-slider-track-background-color-c5ek4l": "#dbeafe", } `; diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap index 1819d94ef3..65c1b9228f 100644 --- a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,21 +2,21 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = ` { - "--awsui-style-background-active-4hh3rt": "#bfdbfe", - "--awsui-style-background-default-4hh3rt": "#dbeafe", - "--awsui-style-background-disabled-4hh3rt": "#f3f4f6", - "--awsui-style-background-hover-4hh3rt": "#eff6ff", - "--awsui-style-border-color-active-4hh3rt": "#1d4ed8", - "--awsui-style-border-color-default-4hh3rt": "#3b82f6", - "--awsui-style-border-color-disabled-4hh3rt": "#93c5fd", - "--awsui-style-border-color-hover-4hh3rt": "#2563eb", - "--awsui-style-color-active-4hh3rt": "#1e3a8a", - "--awsui-style-color-default-4hh3rt": "#1e40af", - "--awsui-style-color-disabled-4hh3rt": "#93c5fd", - "--awsui-style-color-hover-4hh3rt": "#1e40af", - "--awsui-style-focus-ring-border-color-4hh3rt": "#3b82f6", - "--awsui-style-focus-ring-border-radius-4hh3rt": "4px", - "--awsui-style-focus-ring-border-width-4hh3rt": "2px", + "--awsui-style-background-active-c5ek4l": "#bfdbfe", + "--awsui-style-background-default-c5ek4l": "#dbeafe", + "--awsui-style-background-disabled-c5ek4l": "#f3f4f6", + "--awsui-style-background-hover-c5ek4l": "#eff6ff", + "--awsui-style-border-color-active-c5ek4l": "#1d4ed8", + "--awsui-style-border-color-default-c5ek4l": "#3b82f6", + "--awsui-style-border-color-disabled-c5ek4l": "#93c5fd", + "--awsui-style-border-color-hover-c5ek4l": "#2563eb", + "--awsui-style-color-active-c5ek4l": "#1e3a8a", + "--awsui-style-color-default-c5ek4l": "#1e40af", + "--awsui-style-color-disabled-c5ek4l": "#93c5fd", + "--awsui-style-color-hover-c5ek4l": "#1e40af", + "--awsui-style-focus-ring-border-color-c5ek4l": "#3b82f6", + "--awsui-style-focus-ring-border-radius-c5ek4l": "4px", + "--awsui-style-focus-ring-border-width-c5ek4l": "2px", "borderRadius": "4px", "borderWidth": "2px", "fontSize": "16px", @@ -28,10 +28,10 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = ` exports[`getTabStyles transforms tab styles to CSS properties 2`] = ` { - "--awsui-style-tabs-active-indicator-border-radius-4hh3rt": "2px", - "--awsui-style-tabs-active-indicator-color-4hh3rt": "#1d4ed8", - "--awsui-style-tabs-active-indicator-width-4hh3rt": "3px", - "--awsui-style-tabs-separator-color-4hh3rt": "#cbd5e1", - "--awsui-style-tabs-separator-width-4hh3rt": "2px", + "--awsui-style-tabs-active-indicator-border-radius-c5ek4l": "2px", + "--awsui-style-tabs-active-indicator-color-c5ek4l": "#1d4ed8", + "--awsui-style-tabs-active-indicator-width-c5ek4l": "3px", + "--awsui-style-tabs-separator-color-c5ek4l": "#cbd5e1", + "--awsui-style-tabs-separator-width-c5ek4l": "2px", } `; diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap index 1656057a7d..1d10ad578d 100644 --- a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,30 +2,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-default-4hh3rt": undefined, - "--awsui-style-background-disabled-4hh3rt": undefined, - "--awsui-style-background-focus-4hh3rt": undefined, - "--awsui-style-background-hover-4hh3rt": undefined, - "--awsui-style-background-readonly-4hh3rt": undefined, - "--awsui-style-border-color-default-4hh3rt": undefined, - "--awsui-style-border-color-disabled-4hh3rt": undefined, - "--awsui-style-border-color-focus-4hh3rt": undefined, - "--awsui-style-border-color-hover-4hh3rt": undefined, - "--awsui-style-border-color-readonly-4hh3rt": undefined, - "--awsui-style-box-shadow-default-4hh3rt": undefined, - "--awsui-style-box-shadow-disabled-4hh3rt": undefined, - "--awsui-style-box-shadow-focus-4hh3rt": undefined, - "--awsui-style-box-shadow-hover-4hh3rt": undefined, - "--awsui-style-box-shadow-readonly-4hh3rt": undefined, - "--awsui-style-color-default-4hh3rt": undefined, - "--awsui-style-color-disabled-4hh3rt": undefined, - "--awsui-style-color-focus-4hh3rt": undefined, - "--awsui-style-color-hover-4hh3rt": undefined, - "--awsui-style-color-readonly-4hh3rt": undefined, - "--awsui-style-placeholder-color-4hh3rt": undefined, - "--awsui-style-placeholder-font-size-4hh3rt": undefined, - "--awsui-style-placeholder-font-style-4hh3rt": undefined, - "--awsui-style-placeholder-font-weight-4hh3rt": undefined, + "--awsui-style-background-default-c5ek4l": undefined, + "--awsui-style-background-disabled-c5ek4l": undefined, + "--awsui-style-background-focus-c5ek4l": undefined, + "--awsui-style-background-hover-c5ek4l": undefined, + "--awsui-style-background-readonly-c5ek4l": undefined, + "--awsui-style-border-color-default-c5ek4l": undefined, + "--awsui-style-border-color-disabled-c5ek4l": undefined, + "--awsui-style-border-color-focus-c5ek4l": undefined, + "--awsui-style-border-color-hover-c5ek4l": undefined, + "--awsui-style-border-color-readonly-c5ek4l": undefined, + "--awsui-style-box-shadow-default-c5ek4l": undefined, + "--awsui-style-box-shadow-disabled-c5ek4l": undefined, + "--awsui-style-box-shadow-focus-c5ek4l": undefined, + "--awsui-style-box-shadow-hover-c5ek4l": undefined, + "--awsui-style-box-shadow-readonly-c5ek4l": undefined, + "--awsui-style-color-default-c5ek4l": undefined, + "--awsui-style-color-disabled-c5ek4l": undefined, + "--awsui-style-color-focus-c5ek4l": undefined, + "--awsui-style-color-hover-c5ek4l": undefined, + "--awsui-style-color-readonly-c5ek4l": undefined, + "--awsui-style-placeholder-color-c5ek4l": undefined, + "--awsui-style-placeholder-font-size-c5ek4l": undefined, + "--awsui-style-placeholder-font-style-c5ek4l": undefined, + "--awsui-style-placeholder-font-weight-c5ek4l": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -37,30 +37,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = ` exports[`getTextFilterStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-default-4hh3rt": undefined, - "--awsui-style-background-disabled-4hh3rt": undefined, - "--awsui-style-background-focus-4hh3rt": undefined, - "--awsui-style-background-hover-4hh3rt": undefined, - "--awsui-style-background-readonly-4hh3rt": undefined, - "--awsui-style-border-color-default-4hh3rt": undefined, - "--awsui-style-border-color-disabled-4hh3rt": undefined, - "--awsui-style-border-color-focus-4hh3rt": undefined, - "--awsui-style-border-color-hover-4hh3rt": undefined, - "--awsui-style-border-color-readonly-4hh3rt": undefined, - "--awsui-style-box-shadow-default-4hh3rt": undefined, - "--awsui-style-box-shadow-disabled-4hh3rt": undefined, - "--awsui-style-box-shadow-focus-4hh3rt": undefined, - "--awsui-style-box-shadow-hover-4hh3rt": undefined, - "--awsui-style-box-shadow-readonly-4hh3rt": undefined, - "--awsui-style-color-default-4hh3rt": undefined, - "--awsui-style-color-disabled-4hh3rt": undefined, - "--awsui-style-color-focus-4hh3rt": undefined, - "--awsui-style-color-hover-4hh3rt": undefined, - "--awsui-style-color-readonly-4hh3rt": undefined, - "--awsui-style-placeholder-color-4hh3rt": undefined, - "--awsui-style-placeholder-font-size-4hh3rt": undefined, - "--awsui-style-placeholder-font-style-4hh3rt": undefined, - "--awsui-style-placeholder-font-weight-4hh3rt": undefined, + "--awsui-style-background-default-c5ek4l": undefined, + "--awsui-style-background-disabled-c5ek4l": undefined, + "--awsui-style-background-focus-c5ek4l": undefined, + "--awsui-style-background-hover-c5ek4l": undefined, + "--awsui-style-background-readonly-c5ek4l": undefined, + "--awsui-style-border-color-default-c5ek4l": undefined, + "--awsui-style-border-color-disabled-c5ek4l": undefined, + "--awsui-style-border-color-focus-c5ek4l": undefined, + "--awsui-style-border-color-hover-c5ek4l": undefined, + "--awsui-style-border-color-readonly-c5ek4l": undefined, + "--awsui-style-box-shadow-default-c5ek4l": undefined, + "--awsui-style-box-shadow-disabled-c5ek4l": undefined, + "--awsui-style-box-shadow-focus-c5ek4l": undefined, + "--awsui-style-box-shadow-hover-c5ek4l": undefined, + "--awsui-style-box-shadow-readonly-c5ek4l": undefined, + "--awsui-style-color-default-c5ek4l": undefined, + "--awsui-style-color-disabled-c5ek4l": undefined, + "--awsui-style-color-focus-c5ek4l": undefined, + "--awsui-style-color-hover-c5ek4l": undefined, + "--awsui-style-color-readonly-c5ek4l": undefined, + "--awsui-style-placeholder-color-c5ek4l": undefined, + "--awsui-style-placeholder-font-size-c5ek4l": undefined, + "--awsui-style-placeholder-font-style-c5ek4l": undefined, + "--awsui-style-placeholder-font-weight-c5ek4l": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -72,30 +72,30 @@ exports[`getTextFilterStyles handles all possible style configurations 2`] = ` exports[`getTextFilterStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-default-4hh3rt": "#ffffff", - "--awsui-style-background-disabled-4hh3rt": "#f0f0f0", - "--awsui-style-background-focus-4hh3rt": "#ffffff", - "--awsui-style-background-hover-4hh3rt": "#fafafa", - "--awsui-style-background-readonly-4hh3rt": "#ffffff", - "--awsui-style-border-color-default-4hh3rt": "#cccccc", - "--awsui-style-border-color-disabled-4hh3rt": "#e0e0e0", - "--awsui-style-border-color-focus-4hh3rt": "#0073bb", - "--awsui-style-border-color-hover-4hh3rt": "#999999", - "--awsui-style-border-color-readonly-4hh3rt": "#e0e0e0", - "--awsui-style-box-shadow-default-4hh3rt": "none", - "--awsui-style-box-shadow-disabled-4hh3rt": "none", - "--awsui-style-box-shadow-focus-4hh3rt": "0 0 0 2px #0073bb", - "--awsui-style-box-shadow-hover-4hh3rt": "0 1px 2px rgba(0,0,0,0.1)", - "--awsui-style-box-shadow-readonly-4hh3rt": "none", - "--awsui-style-color-default-4hh3rt": "#000000", - "--awsui-style-color-disabled-4hh3rt": "#999999", - "--awsui-style-color-focus-4hh3rt": "#000000", - "--awsui-style-color-hover-4hh3rt": "#000000", - "--awsui-style-color-readonly-4hh3rt": "#000000", - "--awsui-style-placeholder-color-4hh3rt": "#999999", - "--awsui-style-placeholder-font-size-4hh3rt": "14px", - "--awsui-style-placeholder-font-style-4hh3rt": "italic", - "--awsui-style-placeholder-font-weight-4hh3rt": "400", + "--awsui-style-background-default-c5ek4l": "#ffffff", + "--awsui-style-background-disabled-c5ek4l": "#f0f0f0", + "--awsui-style-background-focus-c5ek4l": "#ffffff", + "--awsui-style-background-hover-c5ek4l": "#fafafa", + "--awsui-style-background-readonly-c5ek4l": "#ffffff", + "--awsui-style-border-color-default-c5ek4l": "#cccccc", + "--awsui-style-border-color-disabled-c5ek4l": "#e0e0e0", + "--awsui-style-border-color-focus-c5ek4l": "#0073bb", + "--awsui-style-border-color-hover-c5ek4l": "#999999", + "--awsui-style-border-color-readonly-c5ek4l": "#e0e0e0", + "--awsui-style-box-shadow-default-c5ek4l": "none", + "--awsui-style-box-shadow-disabled-c5ek4l": "none", + "--awsui-style-box-shadow-focus-c5ek4l": "0 0 0 2px #0073bb", + "--awsui-style-box-shadow-hover-c5ek4l": "0 1px 2px rgba(0,0,0,0.1)", + "--awsui-style-box-shadow-readonly-c5ek4l": "none", + "--awsui-style-color-default-c5ek4l": "#000000", + "--awsui-style-color-disabled-c5ek4l": "#999999", + "--awsui-style-color-focus-c5ek4l": "#000000", + "--awsui-style-color-hover-c5ek4l": "#000000", + "--awsui-style-color-readonly-c5ek4l": "#000000", + "--awsui-style-placeholder-color-c5ek4l": "#999999", + "--awsui-style-placeholder-font-size-c5ek4l": "14px", + "--awsui-style-placeholder-font-style-c5ek4l": "italic", + "--awsui-style-placeholder-font-weight-c5ek4l": "400", "borderRadius": "4px", "borderWidth": "1px", "fontSize": "14px",