fix(Picker): fix group headers' height and equalize padding

Group headers can now stretch vertically, allowing for more than one line to be displayed in a clear way without overflowing the background
livechat · Dec 10, 2024 · 287b3d6 · 287b3d6
1 parent e52e072
commit 287b3d6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/react-components/src/components/Picker/components/PickerListItem.module.scss b/packages/react-components/src/components/Picker/components/PickerListItem.module.scss
@@ -90,16 +90,15 @@ $base-class: 'picker-list';
       margin-bottom: var(--spacing-05);
       background-color: var(--picker-list-group-background);
       cursor: auto;
-      padding: 12px 12px 4px;
-      height: 36px;
+      padding: 8px 12px;
       color: var(--content-basic-secondary);
 
       &::after {
         position: absolute;
         top: 0;
         z-index: -1;
         background: var(--picker-list-group-background);
-        height: 36px;
+        height: 100%;
         content: '';
       }
 

diff --git a/packages/react-components/src/components/Picker/constants.tsx b/packages/react-components/src/components/Picker/constants.tsx
@@ -65,7 +65,11 @@ export const DEFAULT_EXTENDED_OPTIONS = [
   { key: 'one', name: 'Option one' },
   { key: 'two', name: 'Option two' },
   { key: 'three', name: 'Option three', disabled: true },
-  { key: 'groupB', name: 'Group B title header', groupHeader: true },
+  {
+    key: 'groupB',
+    name: 'Group B title header, longer than one line',
+    groupHeader: true,
+  },
   { key: 'four', name: 'Option four' },
   { key: 'five', name: 'Option five' },
   { key: 'six', name: 'Option six', disabled: true },