Merge pull request #498 from mashmatrix/support-slds-2-show-picklist-dividers-expectedly

Show `Picklist` dividers expectedly

Author: stomita

src/scripts/Picklist.tsx

@@ -694,12 +694,8 @@ export const PicklistItem: FC<PicklistItemProps> = ({
     }
   );
 
-  const listItemClassNames = classnames(
-    'slds-listbox__item',
-    divider ? `slds-has-divider_${divider}-space` : undefined
-  );
   const mainListItem = (
-    <li role='presentation' className={listItemClassNames}>
+    <li role='presentation' className='slds-listbox__item'>
       <div
         id={value ? `${optionIdPrefix}-${value}` : undefined}
         className={itemClassNames}

stories/Picklist.stories.tsx

@@ -268,3 +268,36 @@ export const WithTooltip: ComponentStoryObj<typeof Picklist> = {
     },
   },
 };
+
+/**
+ *
+ */
+export const WithDividers: ComponentStoryObj<typeof Picklist> = {
+  name: 'With Dividers',
+  args: {
+    label: 'Picklist Label',
+    defaultOpened: true,
+    children: [
+      <PicklistItem
+        key='1'
+        label='Picklist Item One'
+        value='1'
+        divider='bottom'
+      />,
+      <PicklistItem key='2' label='Picklist Item Two' value='2' />,
+      <PicklistItem
+        key='3'
+        label='Picklist Item Three'
+        value='3'
+        divider='top'
+      />,
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Picklist with dividers',
+      },
+    },
+  },
+};