Merge pull request #835 from Orfium/feat/CDP-308-slot-provider

feat: slot provider
Orfium · Nov 19, 2024 · cf56542 · cf56542
2 parents 94f47cf + fa1fa3f
commit cf56542
Show file tree

Hide file tree

Showing 23 changed files with 254 additions and 20 deletions.
diff --git a/src/__storyshots__/Updated Components/Breadcrumb-BasicBreadcrumbs.snap b/src/__storyshots__/Updated Components/Breadcrumb-BasicBreadcrumbs.snap
@@ -162,6 +162,7 @@
           >
             <a
               class="emotion-4"
+              data-slot="link"
               data-testid="_breadcrumb_link_Level 1_link"
               href="/first-level"
             >
@@ -196,6 +197,7 @@
           >
             <a
               class="emotion-4"
+              data-slot="link"
               data-testid="_breadcrumb_link_Level 2_link"
               href="/second-level"
             >
@@ -230,6 +232,7 @@
           >
             <a
               class="emotion-4"
+              data-slot="link"
               data-testid="_breadcrumb_link_Level 3_link"
               href="/third-level"
             >
@@ -264,6 +267,7 @@
           >
             <a
               class="emotion-4"
+              data-slot="link"
               data-testid="_breadcrumb_link_Level 4_link"
               href="/forth-level"
             >

diff --git a/src/__storyshots__/Updated Components/Breadcrumb-GoBackTo.snap b/src/__storyshots__/Updated Components/Breadcrumb-GoBackTo.snap
@@ -113,6 +113,7 @@
         >
           <a
             class="emotion-3"
+            data-slot="link"
             data-testid="_breadcrumb_go_back_to_Level 1_link"
             href="/first-level"
           >

diff --git a/src/__storyshots__/Updated Components/Breadcrumb-Playground.snap b/src/__storyshots__/Updated Components/Breadcrumb-Playground.snap
@@ -253,6 +253,7 @@
             >
               <a
                 class="emotion-7"
+                data-slot="link"
                 data-testid="_breadcrumb_link_Level 1_link"
                 href="/first-level"
               >

diff --git a/src/__storyshots__/Updated Components/Breadcrumb-ThirdPartyRoutingLibrary.snap b/src/__storyshots__/Updated Components/Breadcrumb-ThirdPartyRoutingLibrary.snap
@@ -162,6 +162,7 @@
           >
             <a
               class="emotion-4"
+              data-slot="link"
               data-testid="_breadcrumb_link_Level 1_link"
               href="/first-level"
             >
@@ -196,6 +197,7 @@
           >
             <a
               class="emotion-4"
+              data-slot="link"
               data-testid="_breadcrumb_link_Level 2_link"
               href="/second-level"
             >
@@ -230,6 +232,7 @@
           >
             <a
               class="emotion-4"
+              data-slot="link"
               data-testid="_breadcrumb_link_Level 3_link"
               href="/third-level"
             >
@@ -264,6 +267,7 @@
           >
             <a
               class="emotion-4"
+              data-slot="link"
               data-testid="_breadcrumb_link_Level 4_link"
               href="/forth-level"
             >

diff --git a/src/__storyshots__/Updated Components/Link-LinkStyles.snap b/src/__storyshots__/Updated Components/Link-LinkStyles.snap
@@ -142,6 +142,7 @@
     >
       <a
         class="emotion-1"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >
@@ -159,6 +160,7 @@
     >
       <a
         class="emotion-3"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >

diff --git a/src/__storyshots__/Updated Components/Link-LinkWithIcon.snap b/src/__storyshots__/Updated Components/Link-LinkWithIcon.snap
@@ -234,6 +234,7 @@
     >
       <a
         class="emotion-1"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >
@@ -263,6 +264,7 @@
     >
       <a
         class="emotion-4"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >
@@ -292,6 +294,7 @@
     >
       <a
         class="emotion-7"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >

diff --git a/src/__storyshots__/Updated Components/Link-Placement.snap b/src/__storyshots__/Updated Components/Link-Placement.snap
@@ -132,6 +132,7 @@
 
         <a
           class="emotion-1"
+          data-slot="link"
           data-testid="_link"
           href="#"
         >
@@ -149,6 +150,7 @@
         This is a
         <a
           class="emotion-2"
+          data-slot="link"
           data-testid="_link"
           href="#"
         >

diff --git a/src/__storyshots__/Updated Components/Link-Playground.snap b/src/__storyshots__/Updated Components/Link-Playground.snap
@@ -74,6 +74,7 @@
     >
       <a
         class="emotion-1"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >

diff --git a/src/__storyshots__/Updated Components/Link-Sizes.snap b/src/__storyshots__/Updated Components/Link-Sizes.snap
@@ -180,6 +180,7 @@
     >
       <a
         class="emotion-1"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >
@@ -193,6 +194,7 @@
     >
       <a
         class="emotion-2"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >
@@ -206,6 +208,7 @@
     >
       <a
         class="emotion-3"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >

diff --git a/src/__storyshots__/Updated Components/Link-ThirdPartyRoutingLibrary.snap b/src/__storyshots__/Updated Components/Link-ThirdPartyRoutingLibrary.snap
@@ -54,6 +54,7 @@
 <div>
   <a
     class="emotion-0"
+    data-slot="link"
     data-testid="_link"
     href="/"
   >

diff --git a/src/__storyshots__/Updated Components/Menu-MenuTriggers.snap b/src/__storyshots__/Updated Components/Menu-MenuTriggers.snap
@@ -275,6 +275,7 @@
         aria-haspopup="true"
         aria-label="Menu"
         class="emotion-8"
+        data-slot="link"
         data-testid="_link"
         href="#"
       >

diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Error.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Error.snap
@@ -252,6 +252,7 @@
       >
         <a
           class="emotion-7"
+          data-slot="link"
           data-testid="_link"
         >
           <span>

diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Informational.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Informational.snap
@@ -254,6 +254,7 @@
       >
         <a
           class="emotion-7"
+          data-slot="link"
           data-testid="_link"
         >
           <span>

diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Neutral.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Neutral.snap
@@ -214,6 +214,7 @@
       >
         <a
           class="emotion-5"
+          data-slot="link"
           data-testid="_link"
         >
           <span>

diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Playground.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Playground.snap
@@ -214,6 +214,7 @@
       >
         <a
           class="emotion-5"
+          data-slot="link"
           data-testid="_link"
         >
           <span>

diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Success.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Success.snap
@@ -252,6 +252,7 @@
       >
         <a
           class="emotion-7"
+          data-slot="link"
           data-testid="_link"
         >
           <span>

diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Warning.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Warning.snap
@@ -254,6 +254,7 @@
       >
         <a
           class="emotion-7"
+          data-slot="link"
           data-testid="_link"
         >
           <span>

diff --git a/src/components/ButtonBase/ButtonBase.tsx b/src/components/ButtonBase/ButtonBase.tsx
@@ -7,6 +7,7 @@ import { generateTestDataId } from 'utils/helpers';
 import type { ComponentSizes, TestProps } from 'utils/types';
 
 import { buttonBaseStyle, buttonWrapperStyle } from './ButtonBase.style';
+import { useSlotProps } from '../utils/Slots';
 import type { ButtonTypes } from 'components/Button/Button.types';
 import ButtonLoader from 'components/Button/ButtonLoader';
 import type { IconButtonShape } from 'components/IconButton';
@@ -43,6 +44,7 @@ export type ButtonBaseProps = {
 
 //@TODO fix props to not overwrite button props
 const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonBaseProps>((props, ref) => {
+  props = useSlotProps(props, 'button');
   const {
     type = 'primary',
     size = 'normal',
@@ -70,7 +72,6 @@ const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonBaseProps>((props,
         ref={ref}
         type={htmlType}
         data-testid={generateTestDataId(testIdName, dataTestId)}
-        data-slot="button"
         css={buttonBaseStyle({
           type,
           size,

diff --git a/src/components/InlineAlert/InlineAlert.stories.tsx b/src/components/InlineAlert/InlineAlert.stories.tsx
@@ -30,7 +30,7 @@ type Story = StoryObj<typeof InlineAlert>;
 
 export const Neutral: Story = {
   render: (args) => (
-    <InlineAlert actions={<Link size={2}>Single Action</Link>} onDismiss={() => {}} {...args}>
+    <InlineAlert actions={<Link>Single Action</Link>} onDismiss={() => {}} {...args}>
       Alert copy should be short, easy to understand and actionable.
     </InlineAlert>
   ),
@@ -40,7 +40,7 @@ export const Informational: Story = {
   render: (args) => (
     <InlineAlert
       status="informational"
-      actions={<Link size={2}>Single Action</Link>}
+      actions={<Link>Single Action</Link>}
       onDismiss={() => {}}
       {...args}
     >
@@ -51,12 +51,7 @@ export const Informational: Story = {
 
 export const Error: Story = {
   render: (args) => (
-    <InlineAlert
-      status="error"
-      actions={<Link size={2}>Single Action</Link>}
-      onDismiss={() => {}}
-      {...args}
-    >
+    <InlineAlert status="error" actions={<Link>Single Action</Link>} onDismiss={() => {}} {...args}>
       Alert copy should be short, easy to understand and actionable.
     </InlineAlert>
   ),
@@ -66,7 +61,7 @@ export const Warning: Story = {
   render: (args) => (
     <InlineAlert
       status="warning"
-      actions={<Link size={2}>Single Action</Link>}
+      actions={<Link>Single Action</Link>}
       onDismiss={() => {}}
       {...args}
     >
@@ -79,7 +74,7 @@ export const Success: Story = {
   render: (args) => (
     <InlineAlert
       status="success"
-      actions={<Link size={2}>Single Action</Link>}
+      actions={<Link>Single Action</Link>}
       onDismiss={() => {}}
       {...args}
     >
@@ -92,12 +87,7 @@ export const WithButtons: Story = {
   render: (args) => (
     <InlineAlert
       status="informational"
-      actions={[
-        <Button type="tertiary" size="compact">
-          Tertiary
-        </Button>,
-        <Button size="compact">Primary</Button>,
-      ]}
+      actions={[<Button type="tertiary">Tertiary</Button>, <Button>Primary</Button>]}
       onDismiss={() => {}}
       {...args}
     >
@@ -141,7 +131,7 @@ export const WithTrigger: Story = {
 
 export const Playground: Story = {
   render: (args) => (
-    <InlineAlert actions={<Link size={2}>Single Action</Link>} onDismiss={() => {}} {...args}>
+    <InlineAlert actions={<Link>Single Action</Link>} onDismiss={() => {}} {...args}>
       Alert copy should be short, easy to understand and actionable.
     </InlineAlert>
   ),

diff --git a/src/components/InlineAlert/InlineAlert.tsx b/src/components/InlineAlert/InlineAlert.tsx
@@ -5,12 +5,14 @@ import { useId } from 'react-aria';
 import { getIconColor, styles } from './InlineAlert.style';
 import type { InlineAlertProps } from './InlineAlert.types';
 import Icon from '../Icon';
+import { SlotProvider, useSlotProps } from '../utils/Slots';
 import { useDOMRef } from '../utils/useDOMRef';
 
 import useTheme from '~/hooks/useTheme';
 
 export const InlineAlert = forwardRef<HTMLDivElement, InlineAlertProps>(
   (props: InlineAlertProps, ref: RefObject<HTMLDivElement>) => {
+    props = useSlotProps(props, 'inline-alert');
     const {
       status = 'neutral',
       actions,
@@ -46,7 +48,6 @@ export const InlineAlert = forwardRef<HTMLDivElement, InlineAlertProps>(
         tabIndex={0}
         role={status === 'warning' || status === 'error' ? 'alert' : 'status'}
         aria-describedby={onDismiss ? dismissId : undefined}
-        data-slot="inline-alert"
         data-testid={`${dataTestPrefixId}_inline_alert`}
       >
         {status !== 'neutral' ? (
@@ -59,7 +60,18 @@ export const InlineAlert = forwardRef<HTMLDivElement, InlineAlertProps>(
           />
         ) : null}
         <div css={styles.content}>{children}</div>
-        {actionsArray.length > 0 ? <div css={styles.actions}>{actionsArray}</div> : null}
+        {actionsArray.length > 0 ? (
+          <div css={styles.actions}>
+            <SlotProvider
+              slots={{
+                button: { size: 'compact' },
+                link: { size: 2 },
+              }}
+            >
+              {actionsArray}
+            </SlotProvider>
+          </div>
+        ) : null}
         {onDismiss ? (
           <Icon
             role="button"

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -4,9 +4,11 @@ import React from 'react';
 import { iconSize } from './constants';
 import { linkContainer } from './Link.style';
 import type { LinkProps } from './Link.types';
+import { useSlotProps } from '../utils/Slots';
 import Icon from 'components/Icon';
 
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  props = useSlotProps(props, 'link');
   const {
     type = 'primary',
     placement = 'block',
-Original file line number
+Diff line change
@@ Expand Up / @@ -252,6 +252,7 @@ @@
           >
             <a
               class="emotion-7"
+              data-slot="link"
               data-testid="_link"
             >
               <span>
@@ Expand Down @@