From 6145cf0b5e20d9220e57884c9d78cfe8f418ee46 Mon Sep 17 00:00:00 2001 From: Andrei Zhaleznichenka Date: Thu, 22 Oct 2026 11:45:47 +0200 Subject: [PATCH 1/4] chore: New style api for popover, tooltip, copy-to-clipboard --- pages/copy-to-clipboard/style-api-v2.page.tsx | 48 ++++++ pages/copy-to-clipboard/style-api-v2.scss | 36 +++++ pages/popover/style-api-v2.page.tsx | 79 ++++++++++ pages/popover/style-api-v2.scss | 42 +++++ pages/tooltip/style-api-v2.page.tsx | 26 ++++ pages/tooltip/style-api-v2.scss | 20 +++ .../__snapshots__/style-docs.test.ts.snap | 147 +++++++++++++++++- .../__tests__/style-api.test.tsx | 67 ++++++++ src/copy-to-clipboard/index.tsx | 3 +- src/copy-to-clipboard/internal.tsx | 15 +- src/copy-to-clipboard/styles.scss | 4 + src/popover/__tests__/style-api.test.tsx | 41 +++++ src/popover/arrow.scss | 12 +- src/popover/arrow.tsx | 12 +- src/popover/body.tsx | 3 + src/popover/container.tsx | 4 +- src/popover/internal.tsx | 13 +- src/popover/style-api.scss | 8 + src/popover/styles.scss | 8 + src/tooltip/__tests__/style-api.test.tsx | 28 ++++ src/tooltip/internal.tsx | 11 +- src/tooltip/styles.scss | 5 + 22 files changed, 617 insertions(+), 15 deletions(-) create mode 100644 pages/copy-to-clipboard/style-api-v2.page.tsx create mode 100644 pages/copy-to-clipboard/style-api-v2.scss create mode 100644 pages/popover/style-api-v2.page.tsx create mode 100644 pages/popover/style-api-v2.scss create mode 100644 pages/tooltip/style-api-v2.page.tsx create mode 100644 pages/tooltip/style-api-v2.scss create mode 100644 src/copy-to-clipboard/__tests__/style-api.test.tsx create mode 100644 src/popover/__tests__/style-api.test.tsx create mode 100644 src/popover/style-api.scss create mode 100644 src/tooltip/__tests__/style-api.test.tsx diff --git a/pages/copy-to-clipboard/style-api-v2.page.tsx b/pages/copy-to-clipboard/style-api-v2.page.tsx new file mode 100644 index 00000000000..5befec5f477 --- /dev/null +++ b/pages/copy-to-clipboard/style-api-v2.page.tsx @@ -0,0 +1,48 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; + +import { CopyToClipboard, KeyValuePairs } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-api-v2.scss'; + +const styleClassNames = { + copyButton: styles['copy-brand'], + statusPopover: { container: styles['copy-status-popover'], arrow: styles['copy-status-popover-arrow'] }, +}; + +export default function () { + const shared = { + copyErrorText: 'Failed to copy', + copySuccessText: 'Copied', + textToCopy: 'arn:aws:iam::123456789012:role/example', + ...{ styleClassNames }, + }; + return ( + + , + }, + { + type: 'pair', + label: 'Icon variant', + value: , + }, + { + type: 'pair', + label: 'Inline variant', + value: , + }, + ]} + /> + + ); +} diff --git a/pages/copy-to-clipboard/style-api-v2.scss b/pages/copy-to-clipboard/style-api-v2.scss new file mode 100644 index 00000000000..483b1123d53 --- /dev/null +++ b/pages/copy-to-clipboard/style-api-v2.scss @@ -0,0 +1,36 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '~components/styling/button'; +@use '~components/styling/popover'; +@use '../style-api/palette' as palette; + +// The copy button forwards to the button root slot. +.copy-brand { + @include button.root( + $background: palette.$control-bg, + $color: palette.$accent, + $border-color: palette.$border-accent, + $border-radius: 4px, + $focus-ring-color: palette.$accent + ); + + &:hover { + @include button.root($color: palette.$accent-hover, $border-color: palette.$accent-hover); + } + + &:active { + @include button.root($color: palette.$accent-active); + } +} + +// The status popover forwards to the popover container and arrow slots. +.copy-status-popover { + @include popover.container($border-color: palette.$border-accent, $border-radius: 4px); +} + +.copy-status-popover-arrow { + @include popover.arrow($border-color: palette.$border-accent); +} diff --git a/pages/popover/style-api-v2.page.tsx b/pages/popover/style-api-v2.page.tsx new file mode 100644 index 00000000000..95e33764c9b --- /dev/null +++ b/pages/popover/style-api-v2.page.tsx @@ -0,0 +1,79 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useContext } from 'react'; + +import { Checkbox, KeyValuePairs, Popover } from '~components'; + +import AppContext, { AppContextType } from '../app/app-context'; +import { SimplePage } from '../app/templates'; + +import styles from './style-api-v2.scss'; + +type PageContext = React.Context< + AppContextType<{ + renderWithPortal: boolean; + }> +>; + +export default function () { + const { + urlParams: { renderWithPortal = true }, + setUrlParams, + } = useContext(AppContext as PageContext); + const shared = { header: 'Header', content: 'Popover content with a styled surface and arrow.', renderWithPortal }; + return ( + setUrlParams({ renderWithPortal: detail.checked })} + > + renderWithPortal + + } + > + + Open popover + + ), + }, + { + type: 'pair', + label: 'Info', + value: ( + + Open popover + + ), + }, + ]} + /> + + ); +} diff --git a/pages/popover/style-api-v2.scss b/pages/popover/style-api-v2.scss new file mode 100644 index 00000000000..5d11ad8ec0c --- /dev/null +++ b/pages/popover/style-api-v2.scss @@ -0,0 +1,42 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '~components/styling/popover'; +@use '~components/styling/button'; +@use '../style-api/palette' as palette; + +.popover-brand { + @include popover.container( + $background: palette.$genai-surface, + $border-color: palette.$genai, + $border-width: 3px, + $border-radius: 8px + ); +} + +.popover-brand-arrow { + @include popover.arrow($fill-color: palette.$genai-surface, $border-color: palette.$genai, $border-width: 3px); +} + +.popover-borderless { + @include popover.container( + $background: palette.$info-surface, + $border-width: 0px, + $border-radius: 4px, + $box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) + ); +} + +.popover-borderless-arrow { + @include popover.arrow($fill-color: palette.$info, $border-width: 0px); +} + +.popover-brand-dismiss { + @include button.root($color: palette.$genai, $focus-ring-color: palette.$genai); + + &:hover { + @include button.root($color: palette.$genai-hover); + } +} diff --git a/pages/tooltip/style-api-v2.page.tsx b/pages/tooltip/style-api-v2.page.tsx new file mode 100644 index 00000000000..321fe68cc1c --- /dev/null +++ b/pages/tooltip/style-api-v2.page.tsx @@ -0,0 +1,26 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useRef } from 'react'; + +import { Button, Tooltip } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-api-v2.scss'; + +export default function () { + const triggerRef = useRef(null); + return ( + +
+ +