Add side note to select field options

packages/ui/__stories__/SelectField.stories.tsx

@@ -94,6 +94,11 @@ WithHelperText.args = {
   helperText: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
 }
 
+export const WithSideNote = Template.bind({})
+WithSideNote.args = {
+  options: options.map((o) => ({ ...o, sideNote: 'Side Note' })),
+}
+
 export const Clearable = Template.bind({})
 Clearable.args = {
   isClearable: true,

packages/ui/src/Select/Common.tsx

@@ -7,6 +7,7 @@ import { Icon } from '../Icon'
 import { IconButton } from '../IconButton'
 
 import styles from './Common.module.scss'
+import { SelectFieldOption } from './helpers'
 import { TruncatedText } from '../TruncatedText'
 
 const DropdownIndicator: typeof rsComponents.DropdownIndicator = ({ selectProps }) => (
@@ -55,7 +56,7 @@ const MenuList: typeof rsComponents.MenuList = (props) => {
 
 const Option: typeof rsComponents.Option = (props) => (
   <rsComponents.Option {...props}>
-    <TruncatedText text={props.label} />
+    <TruncatedText text={props.label} sideNote={(props.data as SelectFieldOption<string>)?.sideNote} />
   </rsComponents.Option>
 )
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -64,7 +65,7 @@ const IndicatorSeparator: typeof rsComponents.IndicatorSeparator = () => null
 
 const SingleValue: typeof rsComponents.SingleValue = ({ children, ...props }) => (
   <rsComponents.SingleValue {...props}>
-    <TruncatedText text={children as string} />
+    <TruncatedText text={children as string} sideNote={(props.data as SelectFieldOption<string>)?.sideNote} />
   </rsComponents.SingleValue>
 )
 

packages/ui/src/Select/SelectField.module.scss

@@ -6,6 +6,7 @@ $menuMargin: c.$grid * 3;
 $selectContainer: ':global .hz-select-field';
 $selectControl: ':global .hz-select-field__control';
 $selectValueContainer: ':global .hz-select-field__value-container';
+$selectSingleValue: ':global .hz-select-field__single-value';
 $selectMenuPortal: ':global .hz-select-field__menu-portal';
 $selectMenu: ':global .hz-select-field__menu';
 $selectMenuList: ':global .hz-select-field__menu-list';
@@ -24,6 +25,12 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
     }
   }
 
+  &.withSideNote {
+    #{$selectSingleValue} {
+      width: 100%;
+    }
+  }
+
   .helperText {
     margin-left: c.$grid * 1.5;
     display: block;

packages/ui/src/Select/SelectField.tsx

@@ -194,6 +194,7 @@ export const SelectField = <V extends string | number = string>(props: SelectFie
           [styles.hasIcon]: !!iconLeft,
           [styles.small]: size === 'small',
           [styles.withError]: 'error' in props,
+          [styles.withSideNote]: options.some((option) => 'sideNote' in option),
         },
         className,
       )}

packages/ui/src/Select/helpers.ts

@@ -5,6 +5,7 @@ import { canUseDOM } from '../utils/ssr'
 export type SelectFieldOption<V> = {
   label: string
   value: V
+  sideNote?: string
 }
 
 export type SelectFieldOptionsMap<V> = {

packages/ui/src/TruncatedText.module.scss

@@ -1,5 +1,19 @@
 @use '../styles/helpers' as h;
+@use '../styles/constants' as c;
 
-.truncatedText {
-  @include h.overflowEllipsis;
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  .truncatedText {
+    @include h.overflowEllipsis;
+  }
+
+  .sideNote {
+    flex-shrink: 0;
+    color: c.$colorTextSecondary;
+    margin-left: c.$grid * 2;
+  }
 }

packages/ui/src/TruncatedText.tsx

@@ -10,6 +10,7 @@ import styles from './TruncatedText.module.scss'
 
 interface TruncatedTextProps {
   text: ReactText | ((...arg: unknown[]) => string) | ReactElement
+  sideNote?: string
   // Pass a new value to trigger a force re-render
   forceUpdateToken?: ReactText | boolean
   className?: string
@@ -25,6 +26,7 @@ export const TruncatedText: FC<TruncatedTextProps> = ({
   tooltipVisible,
   tooltipPlacement = 'top',
   hoverAbleTooltip,
+  sideNote,
 }) => {
   const textRef = useRef<HTMLDivElement>(null)
   const [tooltip, setTooltip] = useState<ReactChild | undefined>()
@@ -42,19 +44,22 @@ export const TruncatedText: FC<TruncatedTextProps> = ({
   }, [text, forceUpdateToken])
 
   return (
-    <Tooltip
-      id={idTooltip}
-      content={tooltip}
-      visible={tooltipVisible}
-      placement={tooltipPlacement}
-      updateToken={forceUpdateToken}
-      hoverAbleTooltip={hoverAbleTooltip}
-    >
-      {(ref) => (
-        <div ref={mergeRefs([textRef, ref])} className={cn(styles.truncatedText, className)}>
-          <span aria-labelledby={tooltip ? idTooltip : undefined}>{text}</span>
-        </div>
-      )}
-    </Tooltip>
+    <div className={styles.container}>
+      <Tooltip
+        id={idTooltip}
+        content={tooltip}
+        visible={tooltipVisible}
+        placement={tooltipPlacement}
+        updateToken={forceUpdateToken}
+        hoverAbleTooltip={hoverAbleTooltip}
+      >
+        {(ref) => (
+          <div ref={mergeRefs([textRef, ref])} className={cn(styles.truncatedText, className)}>
+            <span aria-labelledby={tooltip ? idTooltip : undefined}>{text}</span>
+          </div>
+        )}
+      </Tooltip>
+      {sideNote && <span className={styles.sideNote}>{sideNote}</span>}
+    </div>
   )
 }