fix(dropdowns): add missing data-garden- attributes to menu item icon…

… elements (#1158)
zendeskgarden · Jul 22, 2021 · 78b0c91 · 78b0c91
1 parent 7f56ecf
commit 78b0c91
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 22 deletions.
diff --git a/packages/dropdowns/.size-snapshot.json b/packages/dropdowns/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 89862,
-    "minified": 55103,
-    "gzipped": 11601
+    "bundled": 89987,
+    "minified": 55212,
+    "gzipped": 11607
   },
   "index.esm.js": {
-    "bundled": 83481,
-    "minified": 49626,
-    "gzipped": 11274,
+    "bundled": 83606,
+    "minified": 49735,
+    "gzipped": 11289,
     "treeshaked": {
       "rollup": {
-        "code": 37445,
+        "code": 37524,
         "import_statements": 813
       },
       "webpack": {
-        "code": 43832
+        "code": 43911
       }
     }
   }

diff --git a/packages/dropdowns/src/styled/items/StyledItemIcon.ts b/packages/dropdowns/src/styled/items/StyledItemIcon.ts
@@ -10,6 +10,8 @@ import { math } from 'polished';
 import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { getItemPaddingVertical } from './StyledItem';
 
+const COMPONENT_ID = 'dropdowns.item_icon';
+
 interface IStyledItemIconProps {
   isCompact?: boolean;
   isVisible?: boolean;
@@ -23,7 +25,10 @@ const getSizeStyles = (props: IStyledItemIconProps & ThemeProps<DefaultTheme>) =
   `;
 };
 
-export const StyledItemIcon = styled.div<IStyledItemIconProps>`
+export const StyledItemIcon = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': PACKAGE_VERSION
+})<IStyledItemIconProps>`
   display: flex;
   position: absolute;
   top: 0;

diff --git a/packages/dropdowns/stories/examples/Menu/Advanced.tsx b/packages/dropdowns/stories/examples/Menu/Advanced.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Story } from '@storybook/react';
 import {
   Dropdown,
@@ -46,29 +46,22 @@ interface IStoryProps {
   isAnimated: boolean;
   isCompact: boolean;
   isDisabled: boolean;
+  isOpen: boolean;
 }
 
 export const Advanced: Story<IStoryProps> = ({
   hasArrow,
   isAnimated,
   isCompact,
   placement,
-  isDisabled
+  isDisabled,
+  isOpen
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
   return (
     <Grid>
       <Row style={{ minHeight: 400 }}>
         <Col textAlign="center">
-          <Dropdown
-            isOpen={isOpen}
-            onStateChange={changes => {
-              if (Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {
-                setIsOpen(changes.isOpen === true);
-              }
-            }}
-          >
+          <Dropdown isOpen={isOpen || undefined}>
             <Trigger>
               <Button size={isCompact ? 'small' : 'medium'}>Advanced Layout</Button>
             </Trigger>
@@ -157,7 +150,8 @@ Advanced.argTypes = {
       ]
     }
   },
-  isDisabled: { name: 'Disabled items', control: 'boolean' }
+  isDisabled: { name: 'Disabled items', control: 'boolean' },
+  isOpen: { control: 'boolean' }
 };
 
 Advanced.args = {