From 1263ba828390fabe6716038aa564d6269007daf9 Mon Sep 17 00:00:00 2001 From: teonemes Date: Fri, 8 Aug 2025 14:43:23 +0200 Subject: [PATCH 1/3] fix: Remove validateProps from components package --- .../validate-props-production.test.ts | 11 ---------- .../__tests__/validate-props.test.ts | 21 ------------------ src/internal/base-component/index.ts | 22 +------------------ 3 files changed, 1 insertion(+), 53 deletions(-) delete mode 100644 src/internal/base-component/__tests__/validate-props-production.test.ts delete mode 100644 src/internal/base-component/__tests__/validate-props.test.ts diff --git a/src/internal/base-component/__tests__/validate-props-production.test.ts b/src/internal/base-component/__tests__/validate-props-production.test.ts deleted file mode 100644 index d1127c3e96..0000000000 --- a/src/internal/base-component/__tests__/validate-props-production.test.ts +++ /dev/null @@ -1,11 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { validateProps } from '../../../../lib/components/internal/base-component'; -import { isDevelopment } from '../../../../lib/components/internal/is-development'; - -jest.mock('../../../../lib/components/internal/is-development', () => ({ isDevelopment: false })); - -test('does nothing in production builds', () => { - expect(isDevelopment).toBe(false); - expect(() => validateProps('TestComponent', { variant: 'foo' }, ['variant'], {})).not.toThrow(); -}); diff --git a/src/internal/base-component/__tests__/validate-props.test.ts b/src/internal/base-component/__tests__/validate-props.test.ts deleted file mode 100644 index 5a5f9a2563..0000000000 --- a/src/internal/base-component/__tests__/validate-props.test.ts +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { validateProps } from '../../../../lib/components/internal/base-component'; - -test('should pass validation', () => { - expect(() => validateProps('TestComponent', {}, [], {})).not.toThrow(); - expect(() => validateProps('TestComponent', { variant: 'foo' }, ['bar'], { variant: ['foo'] })).not.toThrow(); - expect(() => validateProps('TestComponent', { variant: undefined }, ['bar'], { variant: ['foo'] })).not.toThrow(); -}); - -test('should throw error when excluded prop is used', () => { - expect(() => validateProps('TestComponent', { variant: 'foo' }, ['variant'], {})).toThrow( - new Error('TestComponent does not support "variant" property when used in default theme') - ); -}); - -test('should throw error when invalid prop is used', () => { - expect(() => validateProps('TestComponent', { variant: 'foo' }, [], { variant: ['bar'] })).toThrow( - new Error('TestComponent does not support "variant" with value "foo" when used in default theme') - ); -}); diff --git a/src/internal/base-component/index.ts b/src/internal/base-component/index.ts index 231fb47151..cf367b9269 100644 --- a/src/internal/base-component/index.ts +++ b/src/internal/base-component/index.ts @@ -4,8 +4,7 @@ import { initAwsUiVersions } from '@cloudscape-design/component-toolkit/internal'; import { AnalyticsMetadata } from '../analytics/interfaces'; -import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from '../environment'; -import { isDevelopment } from '../is-development'; +import { PACKAGE_SOURCE, PACKAGE_VERSION } from '../environment'; // these styles needed to be imported for every public component import './styles.css.js'; @@ -40,25 +39,6 @@ export function getBaseProps(props: BaseComponentProps) { return baseProps as BaseComponentProps; } -export function validateProps( - componentName: string, - props: Record, - excludedProps: Array, - allowedEnums: Record> -) { - if (!isDevelopment) { - return; - } - for (const [prop, value] of Object.entries(props)) { - if (excludedProps.includes(prop)) { - throw new Error(`${componentName} does not support "${prop}" property when used in ${THEME} theme`); - } - if (value && allowedEnums[prop] && !allowedEnums[prop].includes(value)) { - throw new Error(`${componentName} does not support "${prop}" with value "${value}" when used in ${THEME} theme`); - } - } -} - export interface BasePropsWithAnalyticsMetadata { analyticsMetadata?: AnalyticsMetadata; __analyticsMetadata?: AnalyticsMetadata; From 7e45e82a25f89d6f38a7fbc5b6f4a0758c7077d2 Mon Sep 17 00:00:00 2001 From: teonemes Date: Tue, 12 Aug 2025 16:18:18 +0200 Subject: [PATCH 2/3] fix: Added custom properties for the Alert focus ring --- build-tools/utils/custom-css-properties.js | 5 +++++ src/alert/style.tsx | 6 +++--- src/alert/styles.scss | 10 +++++----- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js index 7db67cf777..73998ca2e2 100644 --- a/build-tools/utils/custom-css-properties.js +++ b/build-tools/utils/custom-css-properties.js @@ -89,5 +89,10 @@ const customCssPropertiesList = [ 'styleFocusRingBorderRadius', 'styleFocusRingBorderWidth', 'styleFocusRingBoxShadow', + // Alert focus ring properties + 'alertFocusRingBorderColor', + 'alertFocusRingBorderRadius', + 'alertFocusRingBorderWidth', + 'alertFocusRingBoxShadow', ]; module.exports = customCssPropertiesList; diff --git a/src/alert/style.tsx b/src/alert/style.tsx index 2e2599cd95..44b607ce43 100644 --- a/src/alert/style.tsx +++ b/src/alert/style.tsx @@ -16,9 +16,9 @@ export function getAlertStyles(style: AlertProps['style']) { borderWidth: style.root?.borderWidth, color: style.root?.color, ...(style.root?.focusRing && { - [customCssProps.styleFocusRingBorderColor]: style.root.focusRing?.borderColor, - [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing?.borderRadius, - [customCssProps.styleFocusRingBorderWidth]: style.root.focusRing?.borderWidth, + [customCssProps.alertFocusRingBorderColor]: style.root.focusRing?.borderColor, + [customCssProps.alertFocusRingBorderRadius]: style.root.focusRing?.borderRadius, + [customCssProps.alertFocusRingBorderWidth]: style.root.focusRing?.borderWidth, }), }; } diff --git a/src/alert/styles.scss b/src/alert/styles.scss index 33d026b1ac..77f3a651ef 100644 --- a/src/alert/styles.scss +++ b/src/alert/styles.scss @@ -37,9 +37,9 @@ padding-inline: awsui.$space-alert-horizontal; background-color: awsui.$color-background-container-content; - #{custom-props.$styleFocusRingBoxShadow}: 0 0 0 - var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width) - var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused); + #{custom-props.$alertFocusRingBoxShadow}: 0 0 0 + var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width) + var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused); } .alert-wrapper { @@ -85,8 +85,8 @@ @include focus-visible.when-visible { @include styles.focus-highlight( $gutter: awsui.$space-button-focus-outline-gutter, - $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring), - $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow}) + $border-radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring), + $box-shadow: var(#{custom-props.$alertFocusRingBoxShadow}) ); } } From de9c2889d0ea6c84a501d03cb4e8a162c0055436 Mon Sep 17 00:00:00 2001 From: teonemes Date: Tue, 12 Aug 2025 16:44:21 +0200 Subject: [PATCH 3/3] fix: Added the custom props for the focus-ring of Alert in the test --- src/alert/__tests__/alert.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/alert/__tests__/alert.test.tsx b/src/alert/__tests__/alert.test.tsx index b9a5bd7ff2..3378848c22 100644 --- a/src/alert/__tests__/alert.test.tsx +++ b/src/alert/__tests__/alert.test.tsx @@ -313,17 +313,17 @@ describe('Style API', () => { expect(getComputedStyle(wrapper.findRootElement().getElement()).getPropertyValue('color')).toBe('rgb(0, 0, 0)'); expect( getComputedStyle(wrapper.findRootElement().getElement()).getPropertyValue( - customCssProps.styleFocusRingBorderColor + customCssProps.alertFocusRingBorderColor ) ).toBe('rgb(23, 31, 118)'); expect( getComputedStyle(wrapper.findRootElement().getElement()).getPropertyValue( - customCssProps.styleFocusRingBorderRadius + customCssProps.alertFocusRingBorderRadius ) ).toBe('6px'); expect( getComputedStyle(wrapper.findRootElement().getElement()).getPropertyValue( - customCssProps.styleFocusRingBorderWidth + customCssProps.alertFocusRingBorderWidth ) ).toBe('4px');