feat(ui-text-input,ui-select): add contentSpacing prop for even wrapped-tag padding in multiple Select

INSTUI-5079

Author: ToMESSKa

packages/ui-select/src/Select/v2/README.md

@@ -340,7 +340,7 @@ type: example
 
 #### Highlighting and selecting options
 
-To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](Tag) with [AccessibleContent](AccessibleContent) for each selected option via the `renderBeforeInput` prop.
+To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](Tag) with [AccessibleContent](AccessibleContent) for each selected option via the `renderBeforeInput` prop. Set `renderBeforeInputElementGap="even"` so wrapped tags are evenly spaced even as they wrap to multiple rows.
 
 > **Accessibility:** set an explicit `aria-label` on the `Select` (matching `renderLabel`) and list the selected options in the `assistiveText` (e.g. `"Alaska Selected, …"`), as the example below does. This keeps the combobox's accessible name limited to the field label, while screen reader users still hear which options are selected. Each pill's `"Remove …"` label is only announced when that pill receives focus.
 
@@ -491,9 +491,6 @@ type: example
               {getOptionById(id).label}
             </AccessibleContent>
           }
-          margin={
-            index > 0 ? 'xxx-small xx-small xxx-small 0' : '0 xx-small 0 0'
-          }
           onClick={(e) => dismissTag(e, id)}
         />
       ))
@@ -518,6 +515,7 @@ type: example
           renderLabel="Multiple Select"
           aria-label="Multiple Select"
           assistiveText={assistiveText}
+          renderBeforeInputElementGap="even"
           inputValue={inputValue}
           isShowingOptions={isShowingOptions}
           inputRef={(el) => {
@@ -531,6 +529,7 @@ type: example
           onRequestSelectOption={handleSelectOption}
           onKeyDown={handleKeyDown}
           renderBeforeInput={selectedOptionId.length > 0 ? renderTags() : null}
+          htmlSize={2}
         >
           {filteredOptions.length > 0 ? (
             filteredOptions.map((option, index) => {

packages/ui-select/src/Select/v2/index.tsx

@@ -703,6 +703,7 @@ class Select extends Component<SelectProps> {
       isInline,
       width,
       htmlSize,
+      renderBeforeInputElementGap,
       messages,
       renderBeforeInput,
       renderAfterInput,
@@ -756,6 +757,7 @@ class Select extends Component<SelectProps> {
       size,
       width,
       htmlSize,
+      renderBeforeInputElementGap,
       messages,
       value: inputValue,
       inputRef: utils.createChainedFunction(ref, this.handleInputRef),

packages/ui-select/src/Select/v2/props.ts

@@ -248,6 +248,14 @@ type PropsFromTextInput = {
    */
   shouldNotWrap?: boolean
 
+  /**
+   * Whether to apply a gap between the elements rendered via `renderBeforeInput`
+   * (a CSS flex container), e.g. tags.
+   * - `'default'`: no gap is applied between the elements.
+   * - `'even'`: wrapped rows are evenly spaced with a vertical and horizontal gap.
+   */
+  renderBeforeInputElementGap?: 'default' | 'even'
+
   /**
    * In `stacked` mode the input is below the label.
    *
@@ -325,6 +333,7 @@ const allowedProps: AllowedPropKeys = [
   'renderAfterInput',
   'children',
   'shouldNotWrap',
+  'renderBeforeInputElementGap',
   'scrollToHighlightedOption',
   'layout'
 ]

packages/ui-text-input/src/TextInput/v2/README.md

@@ -97,7 +97,10 @@ type: example
 
 TextInput accepts focusable and non-focusable content before and/or after
 the input text. A common use case is adding an icon or avatar to the input.
-Focusable content will be focused separately from the input itself.
+Focusable content will be focused separately from the input itself. When
+rendering multiple elements before the input (such as tags), set
+`renderBeforeInputElementGap="even"` to evenly space them, including as they
+wrap to multiple rows.
 
 ```js
 ---
@@ -121,33 +124,29 @@ type: example
             renderLabel="What are Paula Panda's favorite ice cream flavors?"
             value={this.state.value}
             onChange={this.handleChange}
+            renderBeforeInputElementGap="even"
             renderBeforeInput={
               <>
                 {this.state.value !== '' && (
                   <Tag
                     text={this.state.value}
-                    margin="general.space2xs general.spaceXs general.space2xs none"
                     onClick={() => console.log(this.state.value)}
                   />
                 )}
                 <Tag
                   text="Rocky road"
-                  margin="general.space2xs general.spaceXs general.space2xs none"
                   onClick={() => console.log('Rocky road')}
                 />
                 <Tag
                   text="Vanilla"
-                  margin="general.space2xs general.spaceXs general.space2xs none"
                   onClick={() => console.log('Vanilla')}
                 />
                 <Tag
                   text="Coffee"
-                  margin="general.space2xs general.spaceXs general.space2xs none"
                   onClick={() => console.log('Coffee')}
                 />
                 <Tag
                   text="Strawberry"
-                  margin="general.space2xs general.spaceXs general.space2xs none"
                   onClick={() => console.log('Strawberry')}
                 />
               </>

packages/ui-text-input/src/TextInput/v2/index.tsx

@@ -61,6 +61,7 @@ class TextInput extends Component<TextInputProps> {
     isRequired: false,
     display: 'block',
     shouldNotWrap: false,
+    renderBeforeInputElementGap: 'default',
     size: 'medium',
     textAlign: 'start',
     messages: []

packages/ui-text-input/src/TextInput/v2/props.ts

@@ -121,6 +121,14 @@ type TextInputOwnProps = {
    */
   shouldNotWrap?: boolean
 
+  /**
+   * Whether to apply a gap between the elements rendered via `renderBeforeInput`
+   * (a CSS flex container), e.g. tags.
+   * - `'default'`: no gap is applied between the elements.
+   * - `'even'`: wrapped rows are evenly spaced with a vertical and horizontal gap.
+   */
+  renderBeforeInputElementGap?: 'default' | 'even'
+
   /**
    * Html placeholder text to display when the input has no value. This should be hint text, not a label replacement.
    */
@@ -218,6 +226,7 @@ const allowedProps: AllowedPropKeys = [
   'htmlSize',
   'display',
   'shouldNotWrap',
+  'renderBeforeInputElementGap',
   'placeholder',
   'isRequired',
   'elementRef',

packages/ui-text-input/src/TextInput/v2/styles.ts

@@ -43,24 +43,49 @@ const generateStyle = (
   sharedTokens: SharedTokens,
   state: TextInputStyleProps
 ): TextInputStyle => {
-  const { size, textAlign, shouldNotWrap } = props
+  const { size, textAlign, shouldNotWrap, renderBeforeInputElementGap } = props
   const { interaction, success, invalid, beforeElementExists } = state
 
+  const isEvenSpacing = renderBeforeInputElementGap === 'even'
+
+  const contentGap = {
+    small: sharedTokens.spacing.general.spaceXs,
+    medium: sharedTokens.spacing.general.spaceXs,
+    large: sharedTokens.spacing.general.spaceSm
+  }[size!]
+
+  const contentPaddingBlock = {
+    small: sharedTokens.spacing.general.space2xs,
+    medium: sharedTokens.spacing.general.space2xs,
+    large: sharedTokens.spacing.general.spaceXs
+  }[size!]
+
+  const heightTokens = {
+    small: componentTheme.heightSm,
+    medium: componentTheme.heightMd,
+    large: componentTheme.heightLg
+  }
+
+  const inputHeightStyle = (sizeHeight: string) =>
+    isEvenSpacing
+      ? { height: 'auto' }
+      : {
+          height: `calc(${sizeHeight} - (2 * ${componentTheme.borderWidth}))`,
+          lineHeight: `calc(${sizeHeight} - (2 * ${componentTheme.borderWidth}))`
+        }
+
   const sizeVariants = {
     small: {
       fontSize: componentTheme.fontSizeSm,
-      height: `calc(${componentTheme.heightSm} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.heightSm} - (2 * ${componentTheme.borderWidth}))`
+      ...inputHeightStyle(componentTheme.heightSm)
     },
     medium: {
       fontSize: componentTheme.fontSizeMd,
-      height: `calc(${componentTheme.heightMd} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.heightMd} - (2 * ${componentTheme.borderWidth}))`
+      ...inputHeightStyle(componentTheme.heightMd)
     },
     large: {
       fontSize: componentTheme.fontSizeLg,
-      height: `calc(${componentTheme.heightLg} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.heightLg} - (2 * ${componentTheme.borderWidth}))`
+      ...inputHeightStyle(componentTheme.heightLg)
     }
   }
   const paddingHorizontalVariants = {
@@ -194,6 +219,11 @@ const generateStyle = (
       // left padding of the `renderBeforeInput` element
       ...(beforeElementExists && {
         paddingInlineStart: paddingHorizontalVariants[size!]
+      }),
+      ...(isEvenSpacing && {
+        minHeight: heightTokens[size!],
+        paddingBlock: contentPaddingBlock,
+        gap: contentGap
       })
     },
     inputLayout: {
@@ -206,10 +236,12 @@ const generateStyle = (
       flexDirection: 'row'
     },
     beforeElement: {
-      ...(interaction === 'disabled'
+      label: 'textInput__beforeElement',
+      ...(interaction === 'disabled' && !isEvenSpacing
         ? { opacity: 0.5 }
         : { display: 'contents' }),
-      label: 'textInput__beforeElement'
+      ...(interaction === 'disabled' &&
+        isEvenSpacing && { '& > *': { opacity: 0.5 } })
     },
     afterElement: {
       ...(interaction === 'disabled' && { opacity: 0.5 }),