chore: New style api for popover, tooltip, copy-to-clipboard

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 (
+    <SimplePage title="Copy to clipboard - Style API v2" screenshotArea={{}}>
+      <KeyValuePairs
+        columns={3}
+        items={[
+          {
+            type: 'pair',
+            label: 'Button variant',
+            value: <CopyToClipboard variant="button" copyButtonText="Copy ARN" {...shared} />,
+          },
+          {
+            type: 'pair',
+            label: 'Icon variant',
+            value: <CopyToClipboard variant="icon" copyButtonAriaLabel="Copy ARN" {...shared} />,
+          },
+          {
+            type: 'pair',
+            label: 'Inline variant',
+            value: <CopyToClipboard variant="inline" copyButtonAriaLabel="Copy ARN" {...shared} />,
+          },
+        ]}
+      />
+    </SimplePage>
+  );
+}

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);
+}

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 (
+    <SimplePage
+      title="Popover - Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox
+          checked={renderWithPortal}
+          onChange={({ detail }) => setUrlParams({ renderWithPortal: detail.checked })}
+        >
+          renderWithPortal
+        </Checkbox>
+      }
+    >
+      <KeyValuePairs
+        columns={4}
+        items={[
+          {
+            type: 'pair',
+            label: 'Brand',
+            value: (
+              <Popover
+                {...shared}
+                {...{
+                  styleClassNames: {
+                    container: styles['popover-brand'],
+                    arrow: styles['popover-brand-arrow'],
+                    dismissButton: styles['popover-brand-dismiss'],
+                  },
+                }}
+              >
+                Open popover
+              </Popover>
+            ),
+          },
+          {
+            type: 'pair',
+            label: 'Info',
+            value: (
+              <Popover
+                {...shared}
+                {...{
+                  styleClassNames: {
+                    container: styles['popover-borderless'],
+                    arrow: styles['popover-borderless-arrow'],
+                  },
+                }}
+              >
+                Open popover
+              </Popover>
+            ),
+          },
+        ]}
+      />
+    </SimplePage>
+  );
+}

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);
+  }
+}

pages/tooltip/style-api-v2.page.tsx

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef, useState } 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<HTMLDivElement>(null);
+  const [showTooltip, setShowTooltip] = useState(false);
+  return (
+    <SimplePage title="Tooltip - Style API v2" screenshotArea={{}}>
+      <br />
+      <div
+        ref={triggerRef}
+        style={{ display: 'inline-block' }}
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+      >
+        <Button
+          variant="icon"
+          iconName="copy"
+          ariaLabel="Copy"
+          nativeButtonAttributes={{
+            'aria-describedby': 'copy-description',
+            onFocus: () => setShowTooltip(true),
+            onBlur: () => setShowTooltip(false),
+          }}
+        />
+        <span id="copy-description" hidden={true}>
+          ARN Copied
+        </span>
+        {showTooltip && (
+          <Tooltip
+            content="ARN Copied"
+            getTrack={() => triggerRef.current}
+            onEscape={() => setShowTooltip(false)}
+            {...{ styleClassNames: { container: styles['tooltip-info'], arrow: styles['tooltip-info-arrow'] } }}
+          />
+        )}
+      </div>
+    </SimplePage>
+  );
+}

pages/tooltip/style-api-v2.scss

@@ -0,0 +1,20 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~components/styling/tooltip';
+@use '../style-api/palette' as palette;
+
+.tooltip-info {
+  @include tooltip.container(
+    $background: palette.$info-surface,
+    $border-color: palette.$info-surface,
+    $border-radius: 8px,
+    $box-shadow: 0px 4px 20px 1px palette.$info
+  );
+}
+
+.tooltip-info-arrow {
+  @include tooltip.arrow($fill-color: palette.$info-surface, $border-color: palette.$info-surface);
+}

src/copy-to-clipboard/__tests__/style-api.test.tsx

@@ -0,0 +1,67 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import CopyToClipboard, { CopyToClipboardProps } from '../../../lib/components/copy-to-clipboard';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+import popoverStyles from '../../../lib/components/popover/styles.css.js';
+
+function renderCopyToClipboard(props: Partial<CopyToClipboardProps> & Record<string, unknown> = {}) {
+  const { container } = render(
+    <CopyToClipboard
+      copyButtonText="Copy"
+      copyButtonAriaLabel="Copy"
+      copyErrorText="Failed to copy"
+      copySuccessText="Copied"
+      textToCopy="text to copy"
+      {...props}
+    />
+  );
+  return { container, wrapper: createWrapper(container).findCopyToClipboard()! };
+}
+
+describe('CopyToClipboard Style API v2', () => {
+  test.each<CopyToClipboardProps.Variant>(['button', 'icon', 'inline'])(
+    'applies the copyButton slot (variant=%s)',
+    variant => {
+      const { container, wrapper } = renderCopyToClipboard({
+        variant,
+        styleClassNames: { copyButton: 'a', unknown: 'b' },
+      });
+      expect(wrapper.findCopyButton().getElement()).toHaveClass('a');
+      expect(container.querySelector('.b')).toBeNull();
+    }
+  );
+
+  test('forwards the statusPopover slot to the status popover', () => {
+    const { container, wrapper } = renderCopyToClipboard({
+      styleClassNames: { statusPopover: { container: 'a', arrow: 'b' } },
+    });
+    wrapper.findCopyButton().click();
+    expect(wrapper.findStatusText()).not.toBeNull();
+    expect(container.querySelector(`.${popoverStyles['container-body']}`)).toHaveClass('a');
+    expect(container.querySelector(`.${popoverStyles.arrow}`)).toHaveClass('b');
+    expect(wrapper.findCopyButton().getElement()).not.toHaveClass('a');
+  });
+
+  test('forwards the statusPopover slot when the popover is rendered in a portal', () => {
+    const { wrapper } = renderCopyToClipboard({
+      popoverRenderWithPortal: true,
+      styleClassNames: { statusPopover: { container: 'a' } },
+    });
+    wrapper.findCopyButton().click();
+    expect(wrapper.findStatusText({ popoverRenderWithPortal: true })).not.toBeNull();
+    expect(document.body.querySelector(`.${popoverStyles['container-body']}`)).toHaveClass('a');
+  });
+
+  test('does not leak the styleClassNames prop to the DOM', () => {
+    const { wrapper } = renderCopyToClipboard({
+      popoverRenderWithPortal: true,
+      styleClassNames: { copyButton: 'a', statusPopover: { container: 'b' } },
+    });
+    wrapper.findCopyButton().click();
+    expect(document.body.querySelector('[styleClassNames]')).toBeNull();
+  });
+});

src/copy-to-clipboard/index.tsx

@@ -7,7 +7,7 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { getExternalProps } from '../internal/utils/external-props';
 import { CopyToClipboardProps } from './interfaces';
-import InternalCopyToClipboard from './internal';
+import InternalCopyToClipboard, { StyleClassNames } from './internal';
 
 export { CopyToClipboardProps };
 
@@ -29,6 +29,7 @@ export default function CopyToClipboard({
       wrapText={wrapText}
       {...baseProps}
       {...filteredProps}
+      styleClassNames={(filteredProps as { styleClassNames?: StyleClassNames }).styleClassNames}
     />
   );
 }