Deploying to gh-pages from @ efee2e1 🚀

Author: ToMESSKa

latest/docs/v11_6/markdown-and-sources-data.json

@@ -339,7 +339,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.
 
@@ -490,9 +490,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)}
         />
       ))
@@ -517,6 +514,7 @@ type: example
           renderLabel="Multiple Select"
           aria-label="Multiple Select"
           assistiveText={assistiveText}
+          renderBeforeInputElementGap="even"
           inputValue={inputValue}
           isShowingOptions={isShowingOptions}
           inputRef={(el) => {
@@ -530,6 +528,7 @@ type: example
           onRequestSelectOption={handleSelectOption}
           onKeyDown={handleKeyDown}
           renderBeforeInput={selectedOptionId.length > 0 ? renderTags() : null}
+          htmlSize={2}
         >
           {filteredOptions.length > 0 ? (
             filteredOptions.map((option, index) => {
@@ -1319,6 +1318,7 @@ type: embed
 | Select | renderBeforeInput | `Renderable` | No | - | Content to display before the text input. This will commonly be an icon or tags to show multiple selections. |
 | Select | renderAfterInput | `Renderable` | No | - | Content to display after the text input. This content will replace the default arrow icons. |
 | Select | shouldNotWrap | `boolean` | No | `false` | Prevents the default behavior of wrapping the input and rendered content when available space is exceeded. |
+| Select | renderBeforeInputElementGap | `'default' \| 'even'` | No | - | 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. |
 | Select | layout | `'stacked' \| 'inline'` | No | - | In `stacked` mode the input is below the label. In `inline` mode the input is to the right/left (depending on text direction) of the label, and the layout will look like `stacked` for small screens. |
 | Select | placement | `PlacementPropValues` | No | `'bottom stretch'` | The placement of the options list. |
 | Select | constrain | `PositionConstraint` | No | `'window'` | The parent in which to constrain the placement. |

latest/docs/v11_7/Select.json

@@ -96,7 +96,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
 ---
@@ -120,33 +123,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')}
                 />
               </>
@@ -365,6 +364,7 @@ type: embed
 | TextInput | htmlSize | `number` | No | - | The width of the input (integer value 0 or higher), if a width is not explicitly provided via the `width` prop. Only applicable if `display="inline-block"`. For more see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size |
 | TextInput | display | `'inline-block' \| 'block'` | No | `'block'` | The display of the root element. |
 | TextInput | shouldNotWrap | `boolean` | No | `false` | Prevents the default behavior of wrapping the input and rendered content when available space is exceeded. |
+| TextInput | renderBeforeInputElementGap | `'default' \| 'even'` | No | `'default'` | 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. |
 | TextInput | placeholder | `string` | No | - | Html placeholder text to display when the input has no value. This should be hint text, not a label replacement. |
 | TextInput | isRequired | `boolean` | No | `false` | Whether or not the text input is required. |
 | TextInput | elementRef | `(element: Element \| null) => void` | No | - | provides a reference to the underlying html root element |