Add trailing note to select field options (#538)

hazelcast · Mar 5, 2024 · f73ed61 · f73ed61
1 parent cc21e0e
commit f73ed61
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 3 deletions.
diff --git a/.../.loki/reference/chrome_minimal_Components_SelectField_With_Grouped_Options.png b/.../.loki/reference/chrome_minimal_Components_SelectField_With_Grouped_Options.png
diff --git a/...ui/.loki/reference/chrome_minimal_Components_SelectField_With_Trailing_Note.png b/...ui/.loki/reference/chrome_minimal_Components_SelectField_With_Trailing_Note.png
diff --git a/packages/ui/__stories__/SelectField.stories.tsx b/packages/ui/__stories__/SelectField.stories.tsx
@@ -94,6 +94,16 @@ WithHelperText.args = {
   helperText: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
 }
 
+export const WithTrailingNote = Template.bind({})
+WithTrailingNote.args = {
+  options: [
+    { value: 'luke_skywalker', label: 'Luke Skywalker', trailingNote: 'Note' },
+    { value: 'custom', label: 'Customized Side Note', trailingNote: <span style={{ color: 'red', fontWeight: '600' }}>Custom Note</span> },
+    { value: 'one_word', label: LONG_ONE_WORD_TEXT, trailingNote: 'Note' },
+    { value: 'multiple_word', label: LONG_MULTIPLE_WORD_TEXT, trailingNote: 'Note' },
+  ],
+}
+
 export const Clearable = Template.bind({})
 Clearable.args = {
   isClearable: true,

diff --git a/packages/ui/src/Select/Common.module.scss b/packages/ui/src/Select/Common.module.scss
@@ -54,3 +54,16 @@ $selectHorizontalPadding: c.$grid * 3;
     // color: c.$colorPrimary;
   }
 }
+
+.valueContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  .trailingNote {
+    flex-shrink: 0;
+    color: c.$colorTextSecondary;
+    margin-left: c.$grid * 2;
+  }
+}
diff --git a/packages/ui/src/Select/Common.tsx b/packages/ui/src/Select/Common.tsx
@@ -5,9 +5,10 @@ import cn from 'classnames'
 
 import { Icon } from '../Icon'
 import { IconButton } from '../IconButton'
+import { TruncatedText } from '../TruncatedText'
+import { SelectFieldOption } from './helpers'
 
 import styles from './Common.module.scss'
-import { TruncatedText } from '../TruncatedText'
 
 const DropdownIndicator: typeof rsComponents.DropdownIndicator = ({ selectProps }) => (
   <Icon
@@ -55,7 +56,10 @@ const MenuList: typeof rsComponents.MenuList = (props) => {
 
 const Option: typeof rsComponents.Option = (props) => (
   <rsComponents.Option {...props}>
-    <TruncatedText text={props.label} />
+    <div className={styles.valueContainer}>
+      <TruncatedText text={props.label} />
+      <span className={styles.trailingNote}>{(props.data as SelectFieldOption<string>)?.trailingNote}</span>
+    </div>
   </rsComponents.Option>
 )
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -64,7 +68,10 @@ const IndicatorSeparator: typeof rsComponents.IndicatorSeparator = () => null
 
 const SingleValue: typeof rsComponents.SingleValue = ({ children, ...props }) => (
   <rsComponents.SingleValue {...props}>
-    <TruncatedText text={children as string} />
+    <div className={styles.valueContainer}>
+      <TruncatedText text={children as string} />
+      <span className={styles.trailingNote}>{(props.data as SelectFieldOption<string>)?.trailingNote}</span>
+    </div>
   </rsComponents.SingleValue>
 )
 

diff --git a/packages/ui/src/Select/helpers.ts b/packages/ui/src/Select/helpers.ts
@@ -1,10 +1,12 @@
+import { ReactNode } from 'react'
 import { Options, GroupBase } from 'react-select'
 
 import { canUseDOM } from '../utils/ssr'
 
 export type SelectFieldOption<V> = {
   label: string
   value: V
+  trailingNote?: ReactNode
 }
 
 export type SelectFieldOptionsMap<V> = {