Merge pull request #2440 from teamleadercrm/TIDAL-2727-tweak-select-m…

…enu-margins Tweak select menu margins
teamleadercrm · Nov 16, 2022 · bdb53b7 · bdb53b7
2 parents 6730a4b + e94fa06
commit bdb53b7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### Changed
 
+- `Select`: Adjust margins in dropdown when option groups are used ([@lorgan3](https://github.com/lorgan3)) in [#2440](https://github.com/teamleadercrm/ui/pull/2440))
+
 ### Deprecated
 
 ### Removed

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
@@ -9,6 +9,9 @@ import ReactSelect, {
   CSSObjectWithLabel,
   DropdownIndicatorProps,
   GroupBase,
+  GroupHeadingProps,
+  GroupProps,
+  MenuListProps,
   OptionProps,
   OptionsOrGroups,
   PlaceholderProps,
@@ -251,9 +254,14 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     };
   };
 
-  const getGroupStyles = (base: CSSObjectWithLabel): CSSObjectWithLabel => {
+  const getGroupStyles = (
+    base: CSSObjectWithLabel,
+    props: GroupProps<Option, boolean, GroupBase<Option>>,
+  ): CSSObjectWithLabel => {
     return {
       ...base,
+      paddingTop: props.data.label ? 3 : 0,
+      paddingBottom: 3,
       borderBottomColor: inverse ? COLOR.TEAL.LIGHT : COLOR.NEUTRAL.NORMAL,
       borderBottomStyle: 'solid',
       borderBottomWidth: '1px',
@@ -263,13 +271,25 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     };
   };
 
-  const getGroupHeadingStyles = (base: CSSObjectWithLabel) => {
+  const getGroupHeadingStyles = (
+    base: CSSObjectWithLabel,
+    props: GroupHeadingProps<Option, boolean, GroupBase<Option>>,
+  ) => {
     return {
       ...base,
       color: inverse ? COLOR.NEUTRAL.LIGHTEST : COLOR.TEAL.DARKEST,
       fontSize: '12px',
       fontWeight: 700,
       letterSpacing: '0.6px',
+      ...(props.data.label
+        ? {
+            marginBottom: 9,
+            marginTop: 9,
+          }
+        : {
+            marginBottom: 3,
+            marginTop: 3,
+          }),
     };
   };
 
@@ -296,6 +316,16 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     };
   };
 
+  const getMenuListStyles = (
+    base: CSSObjectWithLabel,
+    props: MenuListProps<Option, boolean, GroupBase<Option>>,
+  ): CSSObjectWithLabel => {
+    return {
+      ...base,
+      ...(props.options[0]?.options ? { paddingTop: 1, paddingBottom: 1 } : {}),
+    };
+  };
+
   const getMenuPortalStyles = (base: CSSObjectWithLabel) => {
     return {
       ...base,
@@ -440,6 +470,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     groupHeading: getGroupHeadingStyles,
     input: getInput,
     menu: getMenuStyles,
+    menuList: getMenuListStyles,
     menuPortal: getMenuPortalStyles,
     multiValue: getMultiValueStyles,
     multiValueLabel: getMultiValueLabelStyles,

diff --git a/src/components/select/select.stories.tsx b/src/components/select/select.stories.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { OptionProps } from 'react-select';
 import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
 import { AsyncSelect, Avatar, Box, Label, Select, TextBody } from '../../index';
-import { customOptions, groupedOptions, options } from '../../static/data/select';
+import { customOptions, groupedOptions, groupedOptionsWithoutLabels, options } from '../../static/data/select';
 import { Option } from './types';
 
 export default {
@@ -97,6 +97,12 @@ export const grouped: ComponentStory<typeof Select> = () => {
   return <Select value={value} options={groupedOptions} onChange={handleChange} />;
 };
 
+export const groupedWithoutLabels: ComponentStory<typeof Select> = () => {
+  const [value, setValue] = useState<Option | null>(null);
+  const handleChange = (option: Option) => setValue(option);
+  return <Select value={value} options={groupedOptionsWithoutLabels} onChange={handleChange} />;
+};
+
 export const customOption: ComponentStory<typeof Select> = () => {
   const [value, setValue] = useState<Option | null>(null);
   const handleChange = (option: Option) => setValue(option);

diff --git a/src/static/data/select.ts b/src/static/data/select.ts
@@ -40,5 +40,22 @@ const groupedOptions: GroupBase<Option>[] = [
   },
 ];
 
+const groupedOptionsWithoutLabels: GroupBase<Option>[] = [
+  {
+    options: [
+      { label: 'Chocolate', value: 'chocolate' },
+      { label: 'Vanilla', value: 'vanilla', isDisabled: true },
+      { label: 'Strawberry', value: 'strawberry' },
+    ],
+  },
+  {
+    options: [
+      { label: 'Red', value: 'red' },
+      { label: 'Green', value: 'green' },
+      { label: 'Blue', value: 'blue' },
+    ],
+  },
+];
+
 export default options;
-export { customOptions, groupedOptions, options };
+export { customOptions, groupedOptions, groupedOptionsWithoutLabels, options };