fix(Picker): fix group headers' height and equalise padding (#1453)

livechat · Dec 10, 2024 · 4d456e0 · 4d456e0
1 parent 7ed07d2
commit 4d456e0
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
@@ -66,7 +66,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 },