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

[ToMESSKa]

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
• 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-01 15:05 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

⚠️ Changes detected.

Status	Count
Unchanged	31
Changed	1
New	0
Removed	0

📊 View full report

Diff images (1)

select-simpleselect.png — 3221 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.