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

[ToMESSKa]

INSTUI-5094 (includes regression-test font-determinism fix)

INSTUI-5079

ISSUE:

• multiple select with multiple rows of Tags, the bottom and top margins aren't consistent

-TEST PLAN:

• check the code below if the examples have consistent top and bottom padding in the legacy and new themes
• check the disabled state in the code examples too, the tag spacing should work as well
• Tags in Select/TextInput should work the same when the new prop is not set and the current change should cause a breaking change

const MultiSelectSizeExample = ({ size, options }) => {
    const [inputValue, setInputValue] = useState('')
    const [isShowingOptions, setIsShowingOptions] = useState(false)
    const [highlightedOptionId, setHighlightedOptionId] = useState(null)
    const [selectedOptionId, setSelectedOptionId] = useState(
      // the large version starts with one fewer (5) selected state
      size === 'large'
        ? ['opt1', 'opt2', 'opt3', 'opt4', 'opt5']
        :  ['opt1', 'opt2', 'opt4', 'opt5', 'opt6', 'opt7']
    )
    const inputRef = useRef()

    const getOptionById = (id) => options.find((o) => o.id === id)

    const availableOptions = () =>
      options.filter((o) => !selectedOptionId.includes(o.id))

    const focusInput = () => {
      if (inputRef.current) {
        inputRef.current.blur()
        inputRef.current.focus()
      }
    }

    const handleSelectOption = (event, { id }) => {
      if (!getOptionById(id)) return
      focusInput()
      setSelectedOptionId([...selectedOptionId, id])
      setHighlightedOptionId(null)
      setInputValue('')
      setIsShowingOptions(false)
    }

    const handleKeyDown = (event) => {
      // remove last selected option on backspace, if input has no entered text
      if (event.keyCode === 8 && inputValue === '' && selectedOptionId.length > 0) {
        setHighlightedOptionId(null)
        setSelectedOptionId(selectedOptionId.slice(0, -1))
      }
    }

    const dismissTag = (e, tag) => {
      // prevent closing of list
      e.stopPropagation()
      e.preventDefault()
      setSelectedOptionId(selectedOptionId.filter((id) => id !== tag))
      setHighlightedOptionId(null)
      inputRef.current.focus()
    }

    const renderTags = () =>
      selectedOptionId.map((id) => (
        <Tag
          dismissible
          key={id}
          size={size}
          text={
            <AccessibleContent alt={`Remove ${getOptionById(id).label}`}>
              {getOptionById(id).label}
            </AccessibleContent>
          }
          onClick={(e) => dismissTag(e, id)}
        />
      ))

    return (
      <Select
        renderLabel={`Multiple Select (${size})`}
        size={size}
        width="30rem"
        contentSpacing="even"
        assistiveText="Type or use arrow keys to navigate options. Multiple selections allowed."
        inputValue={inputValue}
        isShowingOptions={isShowingOptions}
        inputRef={(el) => {
          inputRef.current = el
        }}
        onInputChange={(e) => setInputValue(e.target.value)}
        onRequestShowOptions={() => setIsShowingOptions(true)}
        onRequestHideOptions={() => setIsShowingOptions(false)}
        onRequestHighlightOption={(e, { id }) => setHighlightedOptionId(id)}
        onRequestSelectOption={handleSelectOption}
        onKeyDown={handleKeyDown}
        renderBeforeInput={selectedOptionId.length > 0 ? renderTags() : null}
      >
        {availableOptions().length > 0 ? (
          availableOptions().map((option) => (
            <Select.Option
              id={option.id}
              key={option.id}
              isHighlighted={option.id === highlightedOptionId}
            >
              {option.label}
            </Select.Option>
          ))
        ) : (
          <Select.Option id="empty-option" key="empty-option">
            ---
          </Select.Option>
        )}
      </Select>
    )
  }

  const states = [
    { id: 'opt1', label: 'Alabama' },
    { id: 'opt2', label: 'Alaska' },
    { id: 'opt3', label: 'Arizona' },
    { id: 'opt4', label: 'Arkansas' },
    { id: 'opt5', label: 'California' },
    { id: 'opt6', label: 'Colorado' },
    { id: 'opt7', label: 'Connecticut' },
    { id: 'opt8', label: 'Delaware' },
    { id: 'opt9', label: 'Florida' },
    { id: 'opt10', label: 'Georgia' }
  ]

  render(
    <View as="div">
      <MultiSelectSizeExample size="small" options={states} />
      <View as="div" margin="medium 0 0 0">
        <MultiSelectSizeExample size="medium" options={states} />
      </View>
      <View as="div" margin="medium 0 0 0">
        <MultiSelectSizeExample size="large" options={states} />
      </View>
    </View>
  )

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2606/
Built to branch gh-pages at 2026-07-14 09:18 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

⚠️ Changes detected.

Status	Count
Unchanged	3
Changed	29
New	0
Removed	0

📊 View full report

Diff images (29)

alert.png — 3444 pixels differ

badge.png — 1300 pixels differ

billboard.png — 10930 pixels differ

breadcrumb.png — 9136 pixels differ

button-and-derivatives.png — 13604 pixels differ

byline.png — 5878 pixels differ

calendar.png — 7170 pixels differ

checkbox.png — 5095 pixels differ

checkboxgroup.png — 8807 pixels differ

colorpicker.png — 26341 pixels differ

contextview.png — 9344 pixels differ

dateinput-dateinput2.png — 3755 pixels differ

datetimeinput.png — 4776 pixels differ

drilldown.png — 9731 pixels differ

filedrop.png — 20401 pixels differ

form-errors.png — 34246 pixels differ

heading.png — 17393 pixels differ

link.png — 21258 pixels differ

menu.png — 4949 pixels differ

metric-pill-tag-timeselect-text.png — 21956 pixels differ

options.png — 96793 pixels differ

pagination.png — 1692 pixels differ

progressbar.png — 1421 pixels differ

select-simpleselect.png — 7058 pixels differ

table.png — 8866 pixels differ

tabs.png — 2863 pixels differ

tooltip.png — 44534 pixels differ

treebrowser.png — 6805 pixels differ

view.png — 17107 pixels differ

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}

[git-nandor]

When contentSpacing="even" is set, the even tag spacing only works while the input is enabled, because beforeElement is display: contents only in the enabled state — in the disabled state it becomes a plain block, so the tags are no longer individual flex items.

[ToMESSKa]

@git-nandor Nice catch, I fixed it, can you please check again?

[matyasf]

Also change the example in TextInput to use this prop, change the example not to use margin="xxx-small xxx-small xxx-small none"