review: updates story controls, adds aria-label to drop indicator

zendeskgarden · Apr 13, 2023 · 446feeb · 446feeb
1 parent e687f7d
commit 446feeb
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 65 deletions.
diff --git a/packages/drag-drop/.size-snapshot.json b/packages/drag-drop/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 21610,
-    "minified": 15530,
-    "gzipped": 4062
+    "bundled": 21582,
+    "minified": 15498,
+    "gzipped": 4073
   },
   "index.esm.js": {
-    "bundled": 20018,
-    "minified": 14116,
-    "gzipped": 3875,
+    "bundled": 20000,
+    "minified": 14093,
+    "gzipped": 3889,
     "treeshaked": {
       "rollup": {
-        "code": 11196,
-        "import_statements": 347
+        "code": 11215,
+        "import_statements": 360
       },
       "webpack": {
-        "code": 12244
+        "code": 12243
       }
     }
   }

diff --git a/packages/drag-drop/demo/draggable-list.stories.mdx b/packages/drag-drop/demo/draggable-list.stories.mdx
@@ -21,14 +21,15 @@ import { LIST_ITEMS as items } from './stories/data';
 <Canvas>
   <Story
     name="DraggableList"
-    args={{ items }}
+    args={{ items, 'aria-label': 'Label' }}
     argTypes={{
       items: { name: 'DraggableList.Item[]', table: { category: 'Story' } },
-      dropIndicatorIndex: {
+      indicatorIndex: {
         name: 'DraggableList.DropIndicator',
         control: { type: 'number' },
         table: { category: 'Story' }
-      }
+      },
+      'aria-label': { table: { category: 'DraggableList.DropIndicator' } }
     }}
   >
     {args => <DraggableListStory {...args} />}

diff --git a/packages/drag-drop/demo/draggable.stories.mdx b/packages/drag-drop/demo/draggable.stories.mdx
@@ -21,11 +21,11 @@ import { DraggableStory } from './stories/DraggableStory';
   <Story
     name="Draggable"
     args={{
-      content: 'Label',
+      children: 'Content',
       hasGrip: true
     }}
     argTypes={{
-      content: { name: 'Draggable.Content', table: { category: 'Story' } },
+      children: { name: 'Draggable.Content', table: { category: 'Story' } },
       hasGrip: { name: 'Draggable.Grip', table: { category: 'Story' } },
       tag: { control: { type: 'text' } }
     }}

diff --git a/packages/drag-drop/demo/dropzone.stories.mdx b/packages/drag-drop/demo/dropzone.stories.mdx
@@ -20,11 +20,11 @@ import { DropzoneStory } from './stories/DropzoneStory';
 <Canvas>
   <Story
     name="Dropzone"
-    args={{ hasIcon: false, message: 'Message' }}
+    args={{ hasIcon: false, children: 'Message' }}
     argTypes={{
       tag: { control: { type: 'text' } },
       hasIcon: { name: 'Dropzone.Icon', table: { category: 'Story' } },
-      message: { name: 'Dropzone.Message', table: { category: 'Story' } }
+      children: { name: 'Dropzone.Message', table: { category: 'Story' } }
     }}
   >
     {args => <DropzoneStory {...args} />}

diff --git a/packages/drag-drop/demo/stories/DraggableListStory.tsx b/packages/drag-drop/demo/stories/DraggableListStory.tsx
@@ -11,23 +11,29 @@ import { Draggable, IDraggableListProps, DraggableList } from '@zendeskgarden/re
 
 interface IArgs extends IDraggableListProps {
   items: string[];
-  dropIndicatorIndex?: number;
+  indicatorIndex?: number;
+  ariaLabel?: string;
 }
 
-export const DraggableListStory: Story<IArgs> = ({ items, dropIndicatorIndex, ...args }: IArgs) => (
+export const DraggableListStory: Story<IArgs> = ({
+  items,
+  indicatorIndex,
+  'aria-label': ariaLabel,
+  ...args
+}: IArgs) => (
   <DraggableList {...args}>
-    {dropIndicatorIndex === 0 && <DraggableList.DropIndicator />}
+    {indicatorIndex === 0 && <DraggableList.DropIndicator aria-label={ariaLabel} />}
 
     {items.map((item, idx) => {
       const innerStartIdx = 1;
       const endIdx = items.length - 1;
 
       return (
         <Fragment key={item}>
-          {typeof dropIndicatorIndex === 'number' &&
-            dropIndicatorIndex >= innerStartIdx &&
-            dropIndicatorIndex <= endIdx &&
-            dropIndicatorIndex === idx && <DraggableList.DropIndicator />}
+          {typeof indicatorIndex === 'number' &&
+            indicatorIndex >= innerStartIdx &&
+            indicatorIndex <= endIdx &&
+            indicatorIndex === idx && <DraggableList.DropIndicator aria-label={ariaLabel} />}
           <DraggableList.Item>
             <Draggable>
               <Draggable.Grip />
@@ -38,6 +44,6 @@ export const DraggableListStory: Story<IArgs> = ({ items, dropIndicatorIndex, ..
       );
     })}
 
-    {dropIndicatorIndex === items.length && <DraggableList.DropIndicator />}
+    {indicatorIndex === items.length && <DraggableList.DropIndicator aria-label={ariaLabel} />}
   </DraggableList>
 );
diff --git a/packages/drag-drop/demo/stories/DraggableStory.tsx b/packages/drag-drop/demo/stories/DraggableStory.tsx
@@ -11,12 +11,11 @@ import { Draggable, IDraggableProps } from '@zendeskgarden/react-drag-drop';
 
 interface IArgs extends IDraggableProps {
   hasGrip?: boolean;
-  content?: string;
 }
 
-export const DraggableStory: Story<IArgs> = ({ hasGrip, content, ...args }) => (
+export const DraggableStory: Story<IArgs> = ({ hasGrip, children, ...args }) => (
   <Draggable {...args}>
     {hasGrip && <Draggable.Grip />}
-    {content && <Draggable.Content>{content}</Draggable.Content>}
+    {children && <Draggable.Content>{children}</Draggable.Content>}
   </Draggable>
 );
diff --git a/packages/drag-drop/demo/stories/DropzoneStory.tsx b/packages/drag-drop/demo/stories/DropzoneStory.tsx
@@ -11,17 +11,17 @@ import { Dropzone, IDropzoneProps } from '@zendeskgarden/react-drag-drop';
 import ReplaceIcon from '@zendeskgarden/svg-icons/src/16/arrow-retweet-stroke.svg';
 
 interface IArgs extends IDropzoneProps {
-  message: string;
+  children: string;
   hasIcon?: boolean;
 }
 
-export const DropzoneStory: Story<IArgs> = ({ message, hasIcon, ...args }) => (
+export const DropzoneStory: Story<IArgs> = ({ children, hasIcon, ...args }) => (
   <Dropzone {...args}>
     {hasIcon && (
       <Dropzone.Icon>
         <ReplaceIcon />
       </Dropzone.Icon>
     )}
-    <Dropzone.Message>{message}</Dropzone.Message>
+    <Dropzone.Message>{children}</Dropzone.Message>
   </Dropzone>
 );
diff --git a/packages/drag-drop/src/elements/draggable-list/components/DropIndicator.tsx b/packages/drag-drop/src/elements/draggable-list/components/DropIndicator.tsx
@@ -8,16 +8,23 @@
 import React, { forwardRef, LiHTMLAttributes } from 'react';
 import { useDraggableListContext } from '../../../utils/useDraggableListContext';
 import { StyledDropIndicator } from '../../../styled';
+import { useText } from '@zendeskgarden/react-theming';
 
 /**
  * @extends LiHTMLAttributes<HTMLLIElement>
  */
 export const DropIndicator = forwardRef<HTMLLIElement, LiHTMLAttributes<HTMLLIElement>>(
   (props, ref) => {
     const { isHorizontal } = useDraggableListContext();
+    const ariaLabel = useText(DropIndicator, props, 'aria-label', 'Drop indicator');
 
     return (
-      <StyledDropIndicator aria-hidden="true" {...props} isHorizontal={isHorizontal} ref={ref} />
+      <StyledDropIndicator
+        {...props}
+        aria-label={ariaLabel}
+        isHorizontal={isHorizontal}
+        ref={ref}
+      />
     );
   }
 );

diff --git a/packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts b/packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts
@@ -50,26 +50,6 @@ function afterPseudoElementStyles(props: IStyledDropIndicatorProps) {
   return style;
 }
 
-const pseudoElementStyles = (props: IStyledDropIndicatorProps) => css`
-  &::before,
-  &::after {
-    position: absolute;
-    border-radius: 50%;
-    background-color: ${p => getColor('primaryHue', 600, p.theme)};
-    width: ${p => p.theme.space.xs};
-    height: ${p => p.theme.space.xs};
-    content: '';
-  }
-
-  &::before {
-    ${beforePseudoElementStyles(props)}
-  }
-
-  &::after {
-    ${afterPseudoElementStyles(props)}
-  }
-`;
-
 const colorStyles = (props: IStyledDropIndicatorProps) => {
   const { theme } = props;
 
@@ -89,7 +69,24 @@ export const StyledDropIndicator = styled.li.attrs({
   position: relative;
 
   ${colorStyles}
-  ${pseudoElementStyles}
+
+  &::before,
+  &::after {
+    position: absolute;
+    border-radius: 50%;
+    background-color: ${p => getColor('primaryHue', 600, p.theme)};
+    width: ${p => p.theme.space.xs};
+    height: ${p => p.theme.space.xs};
+    content: '';
+  }
+
+  &::before {
+    ${beforePseudoElementStyles}
+  }
+
+  &::after {
+    ${afterPseudoElementStyles}
+  }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;

diff --git a/packages/drag-drop/src/styled/draggable/StyledDraggable.ts b/packages/drag-drop/src/styled/draggable/StyledDraggable.ts
@@ -93,18 +93,6 @@ const colorStyles = (props: IStyledDraggableProps) => {
   `;
 };
 
-const cursorStyles = (props: IStyledDraggableProps) => {
-  let cursor = props.isGrabbed ? 'grabbing' : 'grab';
-
-  if (props.isDisabled || props.isPlaceholder) {
-    cursor = 'default';
-  }
-
-  return css`
-    cursor: ${cursor};
-  `;
-};
-
 const sizeStyles = (props: IStyledDraggableProps) => {
   const { isCompact, theme } = props;
   const paddingDefault = theme.space.base * 2.25;
@@ -124,6 +112,16 @@ const sizeStyles = (props: IStyledDraggableProps) => {
   `;
 };
 
+const getCursor = (props: IStyledDraggableProps) => {
+  let cursor = props.isGrabbed ? 'grabbing' : 'grab';
+
+  if (props.isDisabled || props.isPlaceholder) {
+    cursor = 'default';
+  }
+
+  return cursor;
+};
+
 export const StyledDraggable = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
@@ -138,6 +136,7 @@ export const StyledDraggable = styled.div.attrs({
     background-color 0.25s ease-in-out,
     color 0.25s ease-in-out,
     z-index 0.25s ease-in-out;
+  cursor: ${getCursor};
   font-family: ${props => props.theme.fonts.system};
   direction: ${props => props.theme.rtl && 'rtl'};
   box-sizing: border-box;
@@ -148,7 +147,6 @@ export const StyledDraggable = styled.div.attrs({
     outline: none;
   }
 
-  ${cursorStyles}
   ${colorStyles}
 
   > * {