chore: Expandable component style refactor (#3128)

williamjstanton · josh-bagwell · manuel.carrera · web-flow · commit 7dab7ee02b92 · 2025-03-10T16:17:30.000-06:00
Fixes: #2954 Expandable style re-factor is needed with the new cs prop. We will need to update this component to use the new system level tokens via CSS variables. [category:Tokens] Release Note: - The `ExpandableTarget` component is now rendering the `BaseButton` component, and may have some small impact on the visual styling of the keyboard focus ring. - The `ExpandableIcon` stencil is extending the `SystemIcon` stencil, and may have had an impact on the chevron icon color. - Fixed an accessibility bug in the `Avatar` component where an `aria-label` string was rendered on a generic HTML element that did not have an explicit or implicit `role` Co-authored-by: @josh-bagwell <44883293+josh-bagwell@users.noreply.github.com> Co-authored-by: manuel.carrera <manuel.carrera@workday.com>
diff --git a/modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx
@@ -93,7 +93,7 @@ yarn remove @workday/canvas-kit-codemod
 
 ### Styling API and CSS Tokens
 
-**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120), [#3164](https://github.com/Workday/canvas-kit/pull/3164) 
+**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120), [#3164](https://github.com/Workday/canvas-kit/pull/3164), [#3128](https://github.com/Workday/canvas-kit/pull/3128)
 
 Several components have been refactored to use our
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
@@ -106,6 +106,7 @@ The React interface **has not changed**, but CSS variables are now used for dyna
 
 The following components are affected:
 
+- `Expandable`
 - `ExternalHyperlink`
 - `LoadingSparkles`
 - `Menu`
@@ -135,7 +136,7 @@ The following components are affected:
 
 **PR:** [#3119](https://github.com/Workday/canvas-kit/pull/3119)
 
-- The `disabled` icon color has been updated to use `system.color.fg.disabled`. This has made the icon darker for better contrast. 
+- The `disabled` icon color has been updated to use `system.color.fg.disabled`. This has made the icon darker for better contrast.
 
 **Note:** There should be no developer impact and the visual changes are safe to accept.
 
diff --git a/modules/labs-react/expandable/lib/Expandable.tsx b/modules/labs-react/expandable/lib/Expandable.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {ExpandableContent} from './ExpandableContent';
 import {ExpandableTarget} from './ExpandableTarget';
 import {ExpandableIcon} from './ExpandableIcon';
 import {ExpandableTitle} from './ExpandableTitle';
 import {ExpandableAvatar} from './ExpandableAvatar';
 import {useExpandableModel} from './hooks/useExpandableModel';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ExpandableProps extends ExtractProps<typeof Flex, never> {
   /**
@@ -18,11 +20,20 @@ export interface ExpandableProps extends ExtractProps<typeof Flex, never> {
   children?: React.ReactNode;
 }
 
+export const expandableContainerStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: system.space.x2,
+  },
+});
+
 /**
  * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
  * `DisclosureModel` for its subcomponents. Alternatively, a model may be passed in using the
  * hoisted model pattern.
  */
+
 export const Expandable = createContainer('div')({
   displayName: 'Expandable',
   modelHook: useExpandableModel,
@@ -62,7 +73,5 @@ export const Expandable = createContainer('div')({
     Content: ExpandableContent,
   },
 })<ExpandableProps>(({children, ...elementProps}, Element) => (
-  <Flex as={Element} flexDirection={'column'} padding={'xxs'} {...elementProps}>
-    {children}
-  </Flex>
+  <Element {...mergeStyles(elementProps, expandableContainerStencil())}>{children}</Element>
 ));
diff --git a/modules/labs-react/expandable/lib/ExpandableAvatar.tsx b/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
@@ -1,31 +1,35 @@
 import React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Avatar, AvatarProps} from '@workday/canvas-kit-react/avatar';
+import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-react/avatar';
 import {system} from '@workday/canvas-tokens-web';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ExpandableAvatarProps extends AvatarProps {}
 
-const expandableAvatarStyles = createStyles({
-  marginRight: system.space.x2,
-  flexShrink: 0,
+export const expandableAvatarStencil = createStencil({
+  extends: avatarStencil,
+  base: {
+    marginInlineEnd: system.space.x2,
+    flexShrink: 0,
+  },
 });
 
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`
 // and the types should be properly extracted
+// Setting altText prop to a default empty string for decorative purposes
 export const ExpandableAvatar = createComponent('div')({
   displayName: 'Expandable.Avatar',
-  Component: ({altText, ...elemProps}: ExpandableAvatarProps, ref, Element) => {
+  Component: ({altText = '', ...elemProps}: ExpandableAvatarProps, ref, Element) => {
     return (
       <Avatar
-        cs={expandableAvatarStyles}
         as={Element}
         altText={altText}
         ref={ref}
         size="medium"
-        {...elemProps}
+        {...mergeStyles(elemProps, expandableAvatarStencil())}
       />
     );
   },
diff --git a/modules/labs-react/expandable/lib/ExpandableContent.tsx b/modules/labs-react/expandable/lib/ExpandableContent.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
-import {space} from '@workday/canvas-kit-react/tokens';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Box} from '@workday/canvas-kit-react/layout';
+import {Box, mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {useExpandableContent} from './hooks/useExpandableContent';
 import {useExpandableModel} from './hooks/useExpandableModel';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ExpandableContentProps extends ExtractProps<typeof Box, never> {
   /**
@@ -15,18 +16,16 @@ export interface ExpandableContentProps extends ExtractProps<typeof Box, never>
   children?: React.ReactNode;
 }
 
+export const expandableContentStencil = createStencil({
+  base: {
+    background: system.color.bg.transparent,
+    padding: `${system.space.x4} ${system.space.x2} ${system.space.x2}`,
+  },
+});
+
 export const ExpandableContent = createSubcomponent('div')({
   modelHook: useExpandableModel,
   elemPropsHook: useExpandableContent,
 })<ExpandableContentProps>(({children, ...elementProps}, Element) => {
-  return (
-    <Box
-      as={Element}
-      background="none"
-      padding={`${space.s} ${space.xxs} ${space.xxs}`}
-      {...elementProps}
-    >
-      {children}
-    </Box>
-  );
+  return <Element {...mergeStyles(elementProps, expandableContentStencil())}>{children}</Element>;
 });
diff --git a/modules/labs-react/expandable/lib/ExpandableIcon.tsx b/modules/labs-react/expandable/lib/ExpandableIcon.tsx
@@ -1,20 +1,15 @@
 import React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  filterOutProps,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
-import {chevronUpIcon, chevronDownIcon} from '@workday/canvas-system-icons-web';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {chevronUpIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {useExpandableIcon} from './hooks/useExpandableIcon';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {IconPositions} from '@workday/canvas-kit-react/button';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
-
 import {useExpandableModel} from './hooks/useExpandableModel';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
   /**
@@ -30,51 +25,70 @@ export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon
   iconPosition?: IconPositions;
 }
 
-const StyledEndIcon = styled(SystemIcon, {
-  shouldForwardProp: filterOutProps(['visible']),
-})<{visible: boolean} & StyledType>(
-  {
-    marginLeft: 'auto',
+export const expandableIconStencil = createStencil({
+  extends: systemIconStencil,
+  base: {
+    padding: system.space.x1,
   },
-  ({visible}) => ({
-    transform: !visible ? 'rotate(-180deg)' : undefined,
-    padding: !visible
-      ? `${space.xxxs} ${space.xs} ${space.xxxs} ${space.xxxs}`
-      : `${space.xxxs} ${space.xxxs} ${space.xxxs} ${space.xs}`,
-  })
-);
-
-const StyledStartIcon = styled(SystemIcon, {
-  shouldForwardProp: filterOutProps(['visible']),
-})<{visible: boolean} & StyledType>(
-  {
-    margin: `0 ${space.xxs} 0 0`,
-    padding: space.xxxs,
+  modifiers: {
+    isExpanded: {
+      true: {},
+      false: {},
+    },
+    position: {
+      start: {},
+      end: {},
+      only: {},
+    },
   },
-  ({visible}) => ({
-    transform: !visible ? 'rotate(-90deg)' : undefined,
-  })
-);
+  compound: [
+    {
+      modifiers: {position: 'end', isExpanded: false},
+      styles: {
+        marginInlineStart: 'auto',
+        transform: 'rotate(180deg)',
+        paddingInlineEnd: system.space.x3,
+      },
+    },
+    {
+      modifiers: {position: 'end', isExpanded: true},
+      styles: {
+        marginInlineStart: 'auto',
+        paddingInlineStart: system.space.x3,
+      },
+    },
+    {
+      modifiers: {position: 'start', isExpanded: false},
+      styles: {
+        marginInlineEnd: system.space.x2,
+        transform: 'rotate(90deg)',
+        ':dir(rtl)': {
+          transform: 'rotate(-90deg)',
+        },
+      },
+    },
+    {
+      modifiers: {position: 'start', isExpanded: true},
+      styles: {
+        marginInlineEnd: system.space.x2,
+        transform: 'rotate(180deg)',
+      },
+    },
+  ],
+});
 
 export const ExpandableIcon = createSubcomponent('span')({
   modelHook: useExpandableModel,
   elemPropsHook: useExpandableIcon,
-})<ExpandableIconProps>(({icon, visible, iconPosition = 'start', ...elementProps}, Element) =>
-  iconPosition === 'end' ? (
-    <StyledEndIcon
+})<ExpandableIconProps>(({icon, visible, iconPosition = 'start', ...elementProps}, Element) => {
+  return (
+    <SystemIcon
       as={Element}
-      fill={colors.licorice200}
       icon={icon || chevronUpIcon}
-      visible={visible}
-      {...elementProps}
-    />
-  ) : (
-    <StyledStartIcon
-      as={Element}
-      fill={colors.licorice200}
-      icon={icon || chevronDownIcon}
-      visible={visible}
-      {...elementProps}
+      {...mergeStyles(
+        elementProps,
+        expandableIconStencil({position: iconPosition, isExpanded: visible})
+      )}
     />
-  )
-);
+  );
+});
diff --git a/modules/labs-react/expandable/lib/ExpandableTarget.tsx b/modules/labs-react/expandable/lib/ExpandableTarget.tsx
@@ -1,15 +1,10 @@
 import React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  focusRing,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {colors} from '@workday/canvas-kit-react/tokens';
-
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 import {useExpandableTarget} from './hooks/useExpandableTarget';
 import {useExpandableModel} from './hooks/useExpandableModel';
 
@@ -28,38 +23,38 @@ export interface ExpandableTargetProps extends ExtractProps<typeof Flex, never>
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
-const StyledButton = styled(Flex.as('button'))<StyledType>({
-  cursor: 'pointer',
-  '&:focus-visible, &.focus': {
-    ...focusRing(),
-  },
-  '&:hover': {
-    background: colors.soap300,
+export const expandableTargetStencil = createStencil({
+  base: {
+    background: system.color.bg.transparent,
+    borderColor: system.color.bg.transparent,
+    borderRadius: system.shape.x1,
+    borderWidth: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    justifyContent: 'start',
+    padding: system.space.x2,
+    cursor: 'pointer',
+    width: '100%',
+    '&:hover, &.hover': {
+      backgroundColor: system.color.bg.alt.default,
+    },
   },
 });
 
-const Heading = styled('h1')<StyledType>({
-  margin: 0,
-});
-
 export const ExpandableTarget = createSubcomponent('button')({
   modelHook: useExpandableModel,
   elemPropsHook: useExpandableTarget,
 })<ExpandableTargetProps>(({children, headingLevel, ...elementProps}, Element) => {
   const button = (
-    <StyledButton
-      as={Element}
-      background="none"
-      border="none"
-      borderRadius="m"
-      flexDirection="row"
-      padding="xxs"
-      width="100%"
-      {...elementProps}
-    >
-      {children}
-    </StyledButton>
+    <Element {...mergeStyles(elementProps, expandableTargetStencil())}>{children}</Element>
   );
 
-  return !!headingLevel ? <Heading as={headingLevel}>{button}</Heading> : button;
+  return headingLevel ? (
+    <Heading size="small" as={headingLevel} margin="0">
+      {button}
+    </Heading>
+  ) : (
+    button
+  );
 });
diff --git a/modules/labs-react/expandable/lib/ExpandableTitle.tsx b/modules/labs-react/expandable/lib/ExpandableTitle.tsx
diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
diff --git a/modules/react/icon/lib/SystemIcon.tsx b/modules/react/icon/lib/SystemIcon.tsx
