@coinbase/cds-mcp-server 8.19.1 → 8.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/mcp-docs/mobile/components/AvatarButton.txt +1 -1
- package/mcp-docs/mobile/components/Button.txt +1 -1
- package/mcp-docs/mobile/components/CheckboxCell.txt +1 -1
- package/mcp-docs/mobile/components/Chip.txt +2 -1
- package/mcp-docs/mobile/components/ContentCell.txt +1 -0
- package/mcp-docs/mobile/components/IconButton.txt +1 -1
- package/mcp-docs/mobile/components/InputChip.txt +7 -3
- package/mcp-docs/mobile/components/Interactable.txt +1 -1
- package/mcp-docs/mobile/components/ListCell.txt +1 -0
- package/mcp-docs/mobile/components/MediaChip.txt +2 -1
- package/mcp-docs/mobile/components/Pressable.txt +1 -1
- package/mcp-docs/mobile/components/RadioCell.txt +1 -1
- package/mcp-docs/mobile/components/Select.txt +12 -12
- package/mcp-docs/mobile/components/SelectAlpha.txt +1211 -0
- package/mcp-docs/mobile/components/SelectChip.txt +2 -1
- package/mcp-docs/mobile/components/SelectOption.txt +3 -2
- package/mcp-docs/mobile/components/SlideButton.txt +1 -1
- package/mcp-docs/mobile/routes.txt +1 -0
- package/mcp-docs/web/components/AvatarButton.txt +1 -1
- package/mcp-docs/web/components/Button.txt +1 -1
- package/mcp-docs/web/components/CheckboxCell.txt +1 -1
- package/mcp-docs/web/components/Chip.txt +2 -2
- package/mcp-docs/web/components/IconButton.txt +1 -1
- package/mcp-docs/web/components/InputChip.txt +7 -2
- package/mcp-docs/web/components/Interactable.txt +1 -1
- package/mcp-docs/web/components/Link.txt +1 -1
- package/mcp-docs/web/components/MediaChip.txt +2 -2
- package/mcp-docs/web/components/Pressable.txt +1 -1
- package/mcp-docs/web/components/RadioCell.txt +1 -1
- package/mcp-docs/web/components/Select.txt +16 -16
- package/mcp-docs/web/components/SelectAlpha.txt +1115 -0
- package/mcp-docs/web/components/SelectChip.txt +3 -2
- package/mcp-docs/web/components/SelectOption.txt +2 -2
- package/mcp-docs/web/components/SidebarItem.txt +1 -1
- package/mcp-docs/web/components/TileButton.txt +1 -1
- package/mcp-docs/web/routes.txt +1 -0
- package/package.json +1 -1
|
@@ -190,7 +190,7 @@ function SelectChipExample() {
|
|
|
190
190
|
| `animationType` | `none \| slide \| fade` | No | `-` | The animationType prop controls how the modal animates. - slide slides in from the bottom - fade fades into view - none appears without an animation |
|
|
191
191
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
192
192
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
193
|
-
| `blendStyles` | `
|
|
193
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
194
194
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
195
195
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
196
196
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -238,6 +238,7 @@ function SelectChipExample() {
|
|
|
238
238
|
| `hardwareAccelerated` | `boolean` | No | `-` | Controls whether to force hardware acceleration for the underlying window. |
|
|
239
239
|
| `height` | `string \| number` | No | `-` | - |
|
|
240
240
|
| `hideHandleBar` | `boolean` | No | `false` | The HandleBar by default only is used for a bottom pinned drawer. This removes it. |
|
|
241
|
+
| `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
241
242
|
| `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
242
243
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
243
244
|
| `key` | `Key \| null` | No | `-` | - |
|
|
@@ -34,7 +34,7 @@ const SelectMobile = () => {
|
|
|
34
34
|
|
|
35
35
|
return (
|
|
36
36
|
<>
|
|
37
|
-
<
|
|
37
|
+
<OldSelect value={value} onPress={handleOpenTray} />
|
|
38
38
|
{isTrayVisible && (
|
|
39
39
|
<Tray title={title} onCloseComplete={handleClose} ref={trayRef}>
|
|
40
40
|
{/* You must wrap options in Menu. Treat it as a Select on web */}
|
|
@@ -61,8 +61,9 @@ const SelectMobile = () => {
|
|
|
61
61
|
| Prop | Type | Required | Default | Description |
|
|
62
62
|
| --- | --- | --- | --- | --- |
|
|
63
63
|
| `value` | `string` | Yes | `-` | Unique identifier for each option |
|
|
64
|
-
| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` |
|
|
64
|
+
| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
|
|
65
65
|
| `accessoryNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom accessory node rendered at the end of the cell. Takes precedence over accessory. |
|
|
66
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
66
67
|
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
67
68
|
| `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content. |
|
|
68
69
|
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use descriptionNode. |
|
|
@@ -213,7 +213,7 @@ function Example() {
|
|
|
213
213
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
214
214
|
| `autoCompleteSlideOnThresholdMet` | `boolean` | No | `-` | If true, the slide button will automatically complete the slide when the threshold is met. If false, the user must release to complete the action. |
|
|
215
215
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
216
|
-
| `blendStyles` | `
|
|
216
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
217
217
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
218
218
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
219
219
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -77,6 +77,7 @@
|
|
|
77
77
|
- [SlideButton](mobile/components/SlideButton.txt): A button that slides to confirm an action.
|
|
78
78
|
- [SelectOption](mobile/components/SelectOption.txt): A single option of a Select component.
|
|
79
79
|
- [SelectChip](mobile/components/SelectChip.txt): A Chip and Select control for selecting from a list of options
|
|
80
|
+
- [SelectAlpha](mobile/components/SelectAlpha.txt): A flexible select component for both single and multi-selection, built for mobile applications with comprehensive accessibility support.
|
|
80
81
|
- [Select](mobile/components/Select.txt): A control for selecting from a list of options.
|
|
81
82
|
- [SearchInput](mobile/components/SearchInput.txt): A control for searching a dataset.
|
|
82
83
|
- [RadioGroup](mobile/components/RadioGroup.txt): Radio is a control component that allows users to select one option from a set.
|
|
@@ -131,7 +131,7 @@ AvatarButton can use fallback colors with names when no image source is provided
|
|
|
131
131
|
| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
132
132
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
133
133
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
134
|
-
| `blendStyles` | `
|
|
134
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
135
135
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
136
136
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
137
137
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -97,7 +97,7 @@ You can add an icon after the label of a button.
|
|
|
97
97
|
| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
98
98
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
99
99
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
100
|
-
| `blendStyles` | `
|
|
100
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
101
101
|
| `block` | `boolean` | No | `-` | Change to block and expand to 100% of parent width. |
|
|
102
102
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
103
103
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -88,7 +88,7 @@ function CustomCheckboxCellExample() {
|
|
|
88
88
|
| `as` | `label` | No | `-` | - |
|
|
89
89
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
90
90
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
91
|
-
| `blendStyles` | `
|
|
91
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
92
92
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
93
93
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
94
94
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -84,7 +84,7 @@ function Example() {
|
|
|
84
84
|
| `as` | `button` | No | `-` | - |
|
|
85
85
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
86
86
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
87
|
-
| `blendStyles` | `
|
|
87
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
88
88
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
89
89
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
90
90
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -144,6 +144,7 @@ function Example() {
|
|
|
144
144
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
145
145
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
146
146
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
147
|
+
| `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
147
148
|
| `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
148
149
|
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
149
150
|
| `key` | `Key \| null` | No | `-` | - |
|
|
@@ -190,7 +191,6 @@ function Example() {
|
|
|
190
191
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
191
192
|
| `type` | `button \| submit \| reset` | No | `-` | - |
|
|
192
193
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
193
|
-
| `value` | `string \| number \| readonly string[]` | No | `-` | - |
|
|
194
194
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
195
195
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
196
196
|
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
@@ -283,7 +283,7 @@ Since icon buttons have no descriptive text or children, an accessibility label
|
|
|
283
283
|
| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
284
284
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
285
285
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
286
|
-
| `blendStyles` | `
|
|
286
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
287
287
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
288
288
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
289
289
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -79,7 +79,7 @@ function Example() {
|
|
|
79
79
|
| `as` | `button` | No | `-` | - |
|
|
80
80
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
81
81
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
82
|
-
| `blendStyles` | `
|
|
82
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
83
83
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
84
84
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
85
85
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -100,6 +100,7 @@ function Example() {
|
|
|
100
100
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
101
101
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
102
102
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
103
|
+
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed in the center of the Chip |
|
|
103
104
|
| `className` | `string` | No | `-` | Apply class names to the outer container. |
|
|
104
105
|
| `classNames` | `{ root?: string; content?: string \| undefined; } \| undefined` | No | `-` | Class names for the components |
|
|
105
106
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
@@ -110,6 +111,7 @@ function Example() {
|
|
|
110
111
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
|
|
111
112
|
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
112
113
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
114
|
+
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
|
|
113
115
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
114
116
|
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
115
117
|
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
@@ -137,6 +139,8 @@ function Example() {
|
|
|
137
139
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
138
140
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
139
141
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
142
|
+
| `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
143
|
+
| `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
140
144
|
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
141
145
|
| `key` | `Key \| null` | No | `-` | - |
|
|
142
146
|
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
@@ -152,6 +156,7 @@ function Example() {
|
|
|
152
156
|
| `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
|
|
153
157
|
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
154
158
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
159
|
+
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
|
|
155
160
|
| `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
|
|
156
161
|
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
157
162
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
@@ -181,7 +186,7 @@ function Example() {
|
|
|
181
186
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
182
187
|
| `type` | `button \| submit \| reset` | No | `-` | - |
|
|
183
188
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
184
|
-
| `value` | `string
|
|
189
|
+
| `value` | `string` | No | `-` | Value indicates what is currently selected |
|
|
185
190
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
186
191
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
187
192
|
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
@@ -92,7 +92,7 @@ Since this component is low-level, it doesn't require much accessibility out of
|
|
|
92
92
|
| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
93
93
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
94
94
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `transparent` | Background color of the overlay (element being interacted with). |
|
|
95
|
-
| `blendStyles` | `
|
|
95
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
96
96
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
97
97
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
98
98
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -137,7 +137,7 @@ _The link text must have a 3:1 contrast ratio from the surrounding non-link text
|
|
|
137
137
|
| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
138
138
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
139
139
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
140
|
-
| `blendStyles` | `
|
|
140
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
141
141
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
142
142
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
143
143
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -160,7 +160,7 @@ You can override the automatic spacing with custom values if needed.
|
|
|
160
160
|
| `as` | `button` | No | `-` | - |
|
|
161
161
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
162
162
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
163
|
-
| `blendStyles` | `
|
|
163
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
164
164
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
165
165
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
166
166
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -220,6 +220,7 @@ You can override the automatic spacing with custom values if needed.
|
|
|
220
220
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
221
221
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
222
222
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
223
|
+
| `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
223
224
|
| `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
224
225
|
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
225
226
|
| `key` | `Key \| null` | No | `-` | - |
|
|
@@ -266,7 +267,6 @@ You can override the automatic spacing with custom values if needed.
|
|
|
266
267
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
267
268
|
| `type` | `button \| submit \| reset` | No | `-` | - |
|
|
268
269
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
269
|
-
| `value` | `string \| number \| readonly string[]` | No | `-` | - |
|
|
270
270
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
271
271
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
272
272
|
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
@@ -90,7 +90,7 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
|
|
|
90
90
|
| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
91
91
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
92
92
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
93
|
-
| `blendStyles` | `
|
|
93
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
94
94
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
95
95
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
96
96
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -101,7 +101,7 @@ function CustomRadioCellExample() {
|
|
|
101
101
|
| `as` | `label` | No | `-` | - |
|
|
102
102
|
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
103
103
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
104
|
-
| `blendStyles` | `
|
|
104
|
+
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
105
105
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
106
106
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
107
107
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -20,11 +20,11 @@ function DefaultSelect() {
|
|
|
20
20
|
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
|
|
21
21
|
return (
|
|
22
22
|
<VStack padding={2}>
|
|
23
|
-
<
|
|
23
|
+
<OldSelect value={value} placeholder="Choose something..." onChange={setValue}>
|
|
24
24
|
{options.map((option) => (
|
|
25
25
|
<SelectOption value={option} key={option} title={option} description="Description" />
|
|
26
26
|
))}
|
|
27
|
-
</
|
|
27
|
+
</OldSelect>
|
|
28
28
|
</VStack>
|
|
29
29
|
);
|
|
30
30
|
}
|
|
@@ -46,7 +46,7 @@ function DefaultSelect() {
|
|
|
46
46
|
const selectedValueLabel = value && options.find((option) => option.value === value).label;
|
|
47
47
|
return (
|
|
48
48
|
<VStack padding={2}>
|
|
49
|
-
<
|
|
49
|
+
<OldSelect
|
|
50
50
|
value={value}
|
|
51
51
|
valueLabel={selectedValueLabel}
|
|
52
52
|
placeholder="Choose something..."
|
|
@@ -60,7 +60,7 @@ function DefaultSelect() {
|
|
|
60
60
|
description="Description"
|
|
61
61
|
/>
|
|
62
62
|
))}
|
|
63
|
-
</
|
|
63
|
+
</OldSelect>
|
|
64
64
|
</VStack>
|
|
65
65
|
);
|
|
66
66
|
}
|
|
@@ -80,7 +80,7 @@ function LabelHelperTextSelect() {
|
|
|
80
80
|
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
|
|
81
81
|
return (
|
|
82
82
|
<VStack padding={2}>
|
|
83
|
-
<
|
|
83
|
+
<OldSelect
|
|
84
84
|
label="Make a selection"
|
|
85
85
|
helperText="You can only choose one"
|
|
86
86
|
value={value}
|
|
@@ -90,7 +90,7 @@ function LabelHelperTextSelect() {
|
|
|
90
90
|
{options.map((option) => (
|
|
91
91
|
<SelectOption value={option} key={option} title={option} description="Description" />
|
|
92
92
|
))}
|
|
93
|
-
</
|
|
93
|
+
</OldSelect>
|
|
94
94
|
</VStack>
|
|
95
95
|
);
|
|
96
96
|
}
|
|
@@ -106,7 +106,7 @@ function CompactSelect() {
|
|
|
106
106
|
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
|
|
107
107
|
return (
|
|
108
108
|
<VStack padding={2}>
|
|
109
|
-
<
|
|
109
|
+
<OldSelect compact label="Make a selection" value={value} onChange={setValue}>
|
|
110
110
|
{options.map((option) => (
|
|
111
111
|
<SelectOption
|
|
112
112
|
value={option}
|
|
@@ -116,7 +116,7 @@ function CompactSelect() {
|
|
|
116
116
|
description="Description"
|
|
117
117
|
/>
|
|
118
118
|
))}
|
|
119
|
-
</
|
|
119
|
+
</OldSelect>
|
|
120
120
|
</VStack>
|
|
121
121
|
);
|
|
122
122
|
}
|
|
@@ -132,7 +132,7 @@ function Variant() {
|
|
|
132
132
|
const options = ['Positive', 'Negative', 'Primary', 'Secondary', 'Foreground'];
|
|
133
133
|
return (
|
|
134
134
|
<VStack padding={2}>
|
|
135
|
-
<
|
|
135
|
+
<OldSelect
|
|
136
136
|
variant={value.toLowerCase()}
|
|
137
137
|
label="Make a selection"
|
|
138
138
|
helperText="You can only choose one"
|
|
@@ -142,7 +142,7 @@ function Variant() {
|
|
|
142
142
|
{options.map((option) => (
|
|
143
143
|
<SelectOption value={option} key={option} title={option} />
|
|
144
144
|
))}
|
|
145
|
-
</
|
|
145
|
+
</OldSelect>
|
|
146
146
|
</VStack>
|
|
147
147
|
);
|
|
148
148
|
}
|
|
@@ -164,29 +164,29 @@ When using the `inside` label variant, you should always include a `placeholder`
|
|
|
164
164
|
<Text as="p">
|
|
165
165
|
<strong>Outside label (default):</strong>
|
|
166
166
|
</Text>
|
|
167
|
-
<
|
|
167
|
+
<OldSelect placeholder="Choose an option">
|
|
168
168
|
<SelectOption value="option1" title="Option 1" description="Description" />
|
|
169
169
|
<SelectOption value="option2" title="Option 2" description="Description" />
|
|
170
170
|
<SelectOption value="option3" title="Option 3" description="Description" />
|
|
171
|
-
</
|
|
171
|
+
</OldSelect>
|
|
172
172
|
</VStack>
|
|
173
173
|
|
|
174
174
|
<VStack>
|
|
175
175
|
<Text as="p">
|
|
176
176
|
<strong>Inside label:</strong>
|
|
177
177
|
</Text>
|
|
178
|
-
<
|
|
178
|
+
<OldSelect label="Choose Option" labelVariant="inside" placeholder="Select from list">
|
|
179
179
|
<SelectOption value="option1" title="Option 1" description="Description" />
|
|
180
180
|
<SelectOption value="option2" title="Option 2" description="Description" />
|
|
181
181
|
<SelectOption value="option3" title="Option 3" description="Description" />
|
|
182
|
-
</
|
|
182
|
+
</OldSelect>
|
|
183
183
|
</VStack>
|
|
184
184
|
|
|
185
185
|
<VStack>
|
|
186
186
|
<Text as="p">
|
|
187
187
|
<strong>Inside label (with start content):</strong>
|
|
188
188
|
</Text>
|
|
189
|
-
<
|
|
189
|
+
<OldSelect
|
|
190
190
|
label="Filter Options"
|
|
191
191
|
labelVariant="inside"
|
|
192
192
|
startNode={<InputIcon name="search" />}
|
|
@@ -195,7 +195,7 @@ When using the `inside` label variant, you should always include a `placeholder`
|
|
|
195
195
|
<SelectOption value="option1" title="Option 1" description="Description" />
|
|
196
196
|
<SelectOption value="option2" title="Option 2" description="Description" />
|
|
197
197
|
<SelectOption value="option3" title="Option 3" description="Description" />
|
|
198
|
-
</
|
|
198
|
+
</OldSelect>
|
|
199
199
|
</VStack>
|
|
200
200
|
</VStack>
|
|
201
201
|
```
|