@coinbase/cds-mcp-server 8.66.2 → 9.0.0-rc.2
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/AccordionItem.txt +4 -4
- package/mcp-docs/mobile/components/Alert.txt +2 -1
- package/mcp-docs/mobile/components/AreaChart.txt +40 -40
- package/mcp-docs/mobile/components/Avatar.txt +33 -33
- package/mcp-docs/mobile/components/AvatarButton.txt +35 -35
- package/mcp-docs/mobile/components/Banner.txt +55 -40
- package/mcp-docs/mobile/components/BarChart.txt +40 -40
- package/mcp-docs/mobile/components/Box.txt +34 -34
- package/mcp-docs/mobile/components/BrowserBar.txt +35 -35
- package/mcp-docs/mobile/components/Button.txt +52 -42
- package/mcp-docs/mobile/components/Calendar.txt +34 -34
- package/mcp-docs/mobile/components/Carousel.txt +48 -58
- package/mcp-docs/mobile/components/CartesianChart.txt +40 -40
- package/mcp-docs/mobile/components/CellMedia.txt +1 -1
- package/mcp-docs/mobile/components/Checkbox.txt +3 -3
- package/mcp-docs/mobile/components/CheckboxCell.txt +37 -37
- package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
- package/mcp-docs/mobile/components/Chip.txt +39 -39
- package/mcp-docs/mobile/components/Coachmark.txt +39 -39
- package/mcp-docs/mobile/components/Collapsible.txt +2 -2
- package/mcp-docs/mobile/components/Combobox.txt +10 -10
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +7 -7
- package/mcp-docs/mobile/components/ContentCard.txt +37 -37
- package/mcp-docs/mobile/components/ContentCardBody.txt +42 -42
- package/mcp-docs/mobile/components/ContentCardFooter.txt +34 -34
- package/mcp-docs/mobile/components/ContentCardHeader.txt +41 -41
- package/mcp-docs/mobile/components/ContentCell.txt +49 -49
- package/mcp-docs/mobile/components/ControlGroup.txt +36 -36
- package/mcp-docs/mobile/components/DataCard.txt +47 -47
- package/mcp-docs/mobile/components/DateInput.txt +25 -22
- package/mcp-docs/mobile/components/DatePicker.txt +25 -22
- package/mcp-docs/mobile/components/Divider.txt +33 -33
- package/mcp-docs/mobile/components/DotCount.txt +4 -2
- package/mcp-docs/mobile/components/DotStatusColor.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +6 -6
- package/mcp-docs/mobile/components/Fallback.txt +32 -32
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
- package/mcp-docs/mobile/components/HStack.txt +34 -34
- package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +3 -3
- package/mcp-docs/mobile/components/IconButton.txt +38 -58
- package/mcp-docs/mobile/components/InputChip.txt +39 -39
- package/mcp-docs/mobile/components/Interactable.txt +34 -34
- package/mcp-docs/mobile/components/Legend.txt +43 -41
- package/mcp-docs/mobile/components/LineChart.txt +40 -40
- package/mcp-docs/mobile/components/Link.txt +41 -38
- package/mcp-docs/mobile/components/ListCell.txt +52 -52
- package/mcp-docs/mobile/components/Lottie.txt +34 -34
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +41 -41
- package/mcp-docs/mobile/components/MediaChip.txt +39 -39
- package/mcp-docs/mobile/components/MessagingCard.txt +42 -42
- package/mcp-docs/mobile/components/Modal.txt +6 -2
- package/mcp-docs/mobile/components/ModalBody.txt +8 -8
- package/mcp-docs/mobile/components/ModalFooter.txt +33 -33
- package/mcp-docs/mobile/components/ModalHeader.txt +34 -34
- package/mcp-docs/mobile/components/MultiContentModule.txt +40 -40
- package/mcp-docs/mobile/components/NavigationTitle.txt +38 -36
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +38 -36
- package/mcp-docs/mobile/components/NudgeCard.txt +6 -6
- package/mcp-docs/mobile/components/Numpad.txt +37 -37
- package/mcp-docs/mobile/components/Overlay.txt +33 -33
- package/mcp-docs/mobile/components/PageFooter.txt +36 -30
- package/mcp-docs/mobile/components/PageHeader.txt +38 -32
- package/mcp-docs/mobile/components/PercentageBarChart.txt +40 -40
- package/mcp-docs/mobile/components/PeriodSelector.txt +39 -39
- package/mcp-docs/mobile/components/Pictogram.txt +1 -1
- package/mcp-docs/mobile/components/Point.txt +2 -2
- package/mcp-docs/mobile/components/PortalProvider.txt +2 -2
- package/mcp-docs/mobile/components/Pressable.txt +36 -36
- package/mcp-docs/mobile/components/ProgressBar.txt +2 -2
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
- package/mcp-docs/mobile/components/ProgressCircle.txt +3 -3
- package/mcp-docs/mobile/components/Radio.txt +3 -3
- package/mcp-docs/mobile/components/RadioCell.txt +37 -37
- package/mcp-docs/mobile/components/RadioGroup.txt +3 -3
- package/mcp-docs/mobile/components/ReferenceLine.txt +1 -1
- package/mcp-docs/mobile/components/RemoteImage.txt +6 -6
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +1 -1
- package/mcp-docs/mobile/components/RollingNumber.txt +41 -39
- package/mcp-docs/mobile/components/Scrubber.txt +2 -2
- package/mcp-docs/mobile/components/SearchInput.txt +25 -22
- package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
- package/mcp-docs/mobile/components/SegmentedTabs.txt +34 -34
- package/mcp-docs/mobile/components/Select.txt +3 -3
- package/mcp-docs/mobile/components/SelectAlpha.txt +10 -10
- package/mcp-docs/mobile/components/SelectChip.txt +42 -40
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +11 -11
- package/mcp-docs/mobile/components/SelectOption.txt +10 -10
- package/mcp-docs/mobile/components/SlideButton.txt +40 -40
- package/mcp-docs/mobile/components/Spacer.txt +7 -7
- package/mcp-docs/mobile/components/Sparkline.txt +3 -3
- package/mcp-docs/mobile/components/SparklineGradient.txt +3 -3
- package/mcp-docs/mobile/components/SparklineInteractive.txt +6 -6
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +5 -5
- package/mcp-docs/mobile/components/Spinner.txt +2 -2
- package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
- package/mcp-docs/mobile/components/SpotRectangle.txt +1 -1
- package/mcp-docs/mobile/components/SpotSquare.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +37 -36
- package/mcp-docs/mobile/components/Switch.txt +13 -3
- package/mcp-docs/mobile/components/TabIndicator.txt +1 -1
- package/mcp-docs/mobile/components/TabLabel.txt +39 -37
- package/mcp-docs/mobile/components/TabNavigation.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChips.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +34 -34
- package/mcp-docs/mobile/components/Tabs.txt +34 -34
- package/mcp-docs/mobile/components/Tag.txt +41 -41
- package/mcp-docs/mobile/components/Text.txt +51 -58
- package/mcp-docs/mobile/components/TextInput.txt +25 -22
- package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
- package/mcp-docs/mobile/components/Toast.txt +34 -34
- package/mcp-docs/mobile/components/Tooltip.txt +2 -2
- package/mcp-docs/mobile/components/TopNavBar.txt +9 -9
- package/mcp-docs/mobile/components/Tray.txt +5 -3
- package/mcp-docs/mobile/components/UpsellCard.txt +15 -14
- package/mcp-docs/mobile/components/VStack.txt +34 -34
- package/mcp-docs/mobile/components/XAxis.txt +1 -1
- package/mcp-docs/mobile/components/YAxis.txt +1 -1
- package/mcp-docs/mobile/getting-started/installation.txt +9 -3
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/AccordionItem.txt +4 -4
- package/mcp-docs/web/components/Alert.txt +3 -2
- package/mcp-docs/web/components/AreaChart.txt +63 -63
- package/mcp-docs/web/components/Avatar.txt +49 -49
- package/mcp-docs/web/components/AvatarButton.txt +54 -324
- package/mcp-docs/web/components/Banner.txt +71 -55
- package/mcp-docs/web/components/BarChart.txt +58 -58
- package/mcp-docs/web/components/Box.txt +49 -312
- package/mcp-docs/web/components/Button.txt +62 -324
- package/mcp-docs/web/components/Calendar.txt +49 -49
- package/mcp-docs/web/components/Carousel.txt +65 -72
- package/mcp-docs/web/components/CartesianChart.txt +63 -63
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/Checkbox.txt +9 -7
- package/mcp-docs/web/components/CheckboxCell.txt +52 -52
- package/mcp-docs/web/components/CheckboxGroup.txt +3 -3
- package/mcp-docs/web/components/Chip.txt +51 -51
- package/mcp-docs/web/components/Coachmark.txt +55 -55
- package/mcp-docs/web/components/Collapsible.txt +2 -2
- package/mcp-docs/web/components/Combobox.txt +8 -8
- package/mcp-docs/web/components/ContainedAssetCard.txt +60 -55
- package/mcp-docs/web/components/ContentCard.txt +54 -317
- package/mcp-docs/web/components/ContentCardBody.txt +57 -318
- package/mcp-docs/web/components/ContentCardFooter.txt +49 -312
- package/mcp-docs/web/components/ContentCardHeader.txt +56 -318
- package/mcp-docs/web/components/ContentCell.txt +63 -322
- package/mcp-docs/web/components/ControlGroup.txt +50 -50
- package/mcp-docs/web/components/DataCard.txt +60 -60
- package/mcp-docs/web/components/DateInput.txt +54 -54
- package/mcp-docs/web/components/DatePicker.txt +54 -54
- package/mcp-docs/web/components/Divider.txt +49 -49
- package/mcp-docs/web/components/DotCount.txt +3 -1
- package/mcp-docs/web/components/DotStatusColor.txt +1 -1
- package/mcp-docs/web/components/DotSymbol.txt +6 -6
- package/mcp-docs/web/components/Dropdown.txt +3 -3
- package/mcp-docs/web/components/Fallback.txt +49 -312
- package/mcp-docs/web/components/FloatingAssetCard.txt +53 -53
- package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
- package/mcp-docs/web/components/FullscreenModal.txt +5 -4
- package/mcp-docs/web/components/FullscreenModalLayout.txt +3 -2
- package/mcp-docs/web/components/Grid.txt +51 -314
- package/mcp-docs/web/components/GridColumn.txt +48 -311
- package/mcp-docs/web/components/HStack.txt +49 -312
- package/mcp-docs/web/components/HeroSquare.txt +1 -1
- package/mcp-docs/web/components/Icon.txt +51 -51
- package/mcp-docs/web/components/IconButton.txt +51 -341
- package/mcp-docs/web/components/InputChip.txt +51 -51
- package/mcp-docs/web/components/Interactable.txt +48 -319
- package/mcp-docs/web/components/Legend.txt +62 -62
- package/mcp-docs/web/components/LineChart.txt +63 -63
- package/mcp-docs/web/components/Link.txt +48 -318
- package/mcp-docs/web/components/ListCell.txt +66 -325
- package/mcp-docs/web/components/Lottie.txt +49 -49
- package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/web/components/MediaCard.txt +53 -53
- package/mcp-docs/web/components/MediaChip.txt +51 -51
- package/mcp-docs/web/components/MessagingCard.txt +54 -54
- package/mcp-docs/web/components/Modal.txt +51 -50
- package/mcp-docs/web/components/ModalBody.txt +49 -49
- package/mcp-docs/web/components/ModalFooter.txt +49 -49
- package/mcp-docs/web/components/ModalHeader.txt +50 -50
- package/mcp-docs/web/components/MultiContentModule.txt +55 -316
- package/mcp-docs/web/components/NavigationBar.txt +53 -53
- package/mcp-docs/web/components/NavigationTitle.txt +103 -0
- package/mcp-docs/web/components/NavigationTitleSelect.txt +48 -48
- package/mcp-docs/web/components/NudgeCard.txt +53 -53
- package/mcp-docs/web/components/Overlay.txt +49 -49
- package/mcp-docs/web/components/PageFooter.txt +54 -48
- package/mcp-docs/web/components/PageHeader.txt +58 -52
- package/mcp-docs/web/components/Pagination.txt +49 -49
- package/mcp-docs/web/components/PercentageBarChart.txt +58 -58
- package/mcp-docs/web/components/PeriodSelector.txt +62 -62
- package/mcp-docs/web/components/Pictogram.txt +1 -1
- package/mcp-docs/web/components/Point.txt +5 -14
- package/mcp-docs/web/components/PopoverPanel.txt +1 -1
- package/mcp-docs/web/components/PortalProvider.txt +2 -2
- package/mcp-docs/web/components/Pressable.txt +48 -319
- package/mcp-docs/web/components/ProgressBar.txt +1 -1
- package/mcp-docs/web/components/ProgressCircle.txt +2 -2
- package/mcp-docs/web/components/Radio.txt +9 -7
- package/mcp-docs/web/components/RadioCell.txt +52 -52
- package/mcp-docs/web/components/RadioGroup.txt +3 -3
- package/mcp-docs/web/components/ReferenceLine.txt +2 -2
- package/mcp-docs/web/components/RemoteImage.txt +48 -48
- package/mcp-docs/web/components/RemoteImageGroup.txt +3 -3
- package/mcp-docs/web/components/RollingNumber.txt +51 -313
- package/mcp-docs/web/components/Scrubber.txt +2 -2
- package/mcp-docs/web/components/SearchInput.txt +56 -56
- package/mcp-docs/web/components/SectionHeader.txt +55 -55
- package/mcp-docs/web/components/SegmentedControl.txt +1 -1
- package/mcp-docs/web/components/SegmentedTabs.txt +49 -49
- package/mcp-docs/web/components/Select.txt +3 -3
- package/mcp-docs/web/components/SelectAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectChip.txt +55 -55
- package/mcp-docs/web/components/SelectChipAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectOption.txt +56 -56
- package/mcp-docs/web/components/Sidebar.txt +66 -56
- package/mcp-docs/web/components/SidebarItem.txt +10 -111
- package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -2
- package/mcp-docs/web/components/Spacer.txt +55 -318
- package/mcp-docs/web/components/Sparkline.txt +3 -3
- package/mcp-docs/web/components/SparklineGradient.txt +3 -3
- package/mcp-docs/web/components/SparklineInteractive.txt +4 -4
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +4 -4
- package/mcp-docs/web/components/Spinner.txt +49 -49
- package/mcp-docs/web/components/SpotIcon.txt +1 -1
- package/mcp-docs/web/components/SpotRectangle.txt +1 -1
- package/mcp-docs/web/components/SpotSquare.txt +1 -1
- package/mcp-docs/web/components/Stepper.txt +53 -53
- package/mcp-docs/web/components/Switch.txt +21 -7
- package/mcp-docs/web/components/TabIndicator.txt +1 -1
- package/mcp-docs/web/components/TabLabel.txt +50 -50
- package/mcp-docs/web/components/TabNavigation.txt +48 -48
- package/mcp-docs/web/components/TabbedChips.txt +49 -49
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +49 -49
- package/mcp-docs/web/components/Table.txt +4 -4
- package/mcp-docs/web/components/TableCaption.txt +1 -1
- package/mcp-docs/web/components/TableCell.txt +2 -2
- package/mcp-docs/web/components/TableRow.txt +1 -1
- package/mcp-docs/web/components/Tabs.txt +49 -49
- package/mcp-docs/web/components/Tag.txt +52 -52
- package/mcp-docs/web/components/Text.txt +49 -312
- package/mcp-docs/web/components/TextInput.txt +56 -56
- package/mcp-docs/web/components/ThemeProvider.txt +24 -4
- package/mcp-docs/web/components/TileButton.txt +48 -318
- package/mcp-docs/web/components/Toast.txt +51 -51
- package/mcp-docs/web/components/Tooltip.txt +3 -3
- package/mcp-docs/web/components/Tray.txt +2 -2
- package/mcp-docs/web/components/UpsellCard.txt +15 -14
- package/mcp-docs/web/components/VStack.txt +49 -312
- package/mcp-docs/web/components/XAxis.txt +1 -1
- package/mcp-docs/web/components/YAxis.txt +1 -1
- package/mcp-docs/web/getting-started/installation.txt +13 -5
- package/mcp-docs/web/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/web/routes.txt +1 -1
- package/package.json +1 -1
|
@@ -129,21 +129,21 @@ function Example() {
|
|
|
129
129
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
130
130
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
131
131
|
| `as` | `button` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
132
|
-
| `aspectRatio` |
|
|
132
|
+
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<AspectRatio \| undefined>` | 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
134
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
135
135
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
136
|
-
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
137
|
-
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
138
|
-
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
139
|
-
| `borderColor` | `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
|
|
140
|
-
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
141
|
-
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
142
|
-
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
143
|
-
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
144
|
-
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
145
|
-
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
146
|
-
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
136
|
+
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
137
|
+
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
138
|
+
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
139
|
+
| `borderColor` | `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
|
|
140
|
+
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
141
|
+
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
142
|
+
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
143
|
+
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
144
|
+
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
145
|
+
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
146
|
+
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
147
147
|
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
148
148
|
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
149
149
|
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
@@ -152,42 +152,42 @@ function Example() {
|
|
|
152
152
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
153
153
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
154
154
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
155
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
155
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed in the center of the Chip |
|
|
156
156
|
| `className` | `string` | No | `-` | Apply class names to the outer container. |
|
|
157
157
|
| `classNames` | `{ root?: string; content?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the Chip component |
|
|
158
|
-
| `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
|
|
159
|
-
| `columnGap` | `0 \| 1 \|
|
|
158
|
+
| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
|
|
159
|
+
| `columnGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
160
160
|
| `compact` | `boolean` | No | `-` | Reduces spacing around Chip content |
|
|
161
161
|
| `contentStyle` | `CSSProperties` | No | `-` | - |
|
|
162
162
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
163
163
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
|
|
164
164
|
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
165
|
-
| `elevation` | `0 \| 1 \| 2
|
|
166
|
-
| `end` | `null \| string \| number \| false \| true \| ReactElement<
|
|
165
|
+
| `elevation` | `0 \| 1 \| 2 \| ResponsiveValue<Elevation \| undefined>` | No | `-` | - |
|
|
166
|
+
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed after the value |
|
|
167
167
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
168
168
|
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
169
|
-
| `flexGrow` |
|
|
170
|
-
| `flexShrink` |
|
|
169
|
+
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<FlexGrow \| undefined>` | No | `-` | - |
|
|
170
|
+
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<FlexShrink \| undefined>` | No | `-` | - |
|
|
171
171
|
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
172
172
|
| `focusable` | `boolean` | No | `-` | - |
|
|
173
173
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
174
174
|
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
175
175
|
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
176
176
|
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
177
|
-
| `gap` | `0 \| 1 \|
|
|
178
|
-
| `grid` |
|
|
179
|
-
| `gridArea` |
|
|
177
|
+
| `gap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
178
|
+
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<Grid \| undefined>` | No | `-` | - |
|
|
179
|
+
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridArea \| undefined>` | No | `-` | - |
|
|
180
180
|
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
181
|
-
| `gridAutoFlow` |
|
|
181
|
+
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| column \| dense \| row \| ResponsiveValue<GridAutoFlow \| undefined>` | No | `-` | - |
|
|
182
182
|
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
183
|
-
| `gridColumn` |
|
|
184
|
-
| `gridColumnEnd` |
|
|
185
|
-
| `gridColumnStart` |
|
|
186
|
-
| `gridRow` |
|
|
187
|
-
| `gridRowEnd` |
|
|
188
|
-
| `gridRowStart` |
|
|
189
|
-
| `gridTemplate` |
|
|
190
|
-
| `gridTemplateAreas` |
|
|
183
|
+
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumn \| undefined>` | No | `-` | - |
|
|
184
|
+
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumnEnd \| undefined>` | No | `-` | - |
|
|
185
|
+
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumnStart \| undefined>` | No | `-` | - |
|
|
186
|
+
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRow \| undefined>` | No | `-` | - |
|
|
187
|
+
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRowEnd \| undefined>` | No | `-` | - |
|
|
188
|
+
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRowStart \| undefined>` | No | `-` | - |
|
|
189
|
+
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<GridTemplate \| undefined>` | No | `-` | - |
|
|
190
|
+
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<GridTemplateAreas \| undefined>` | No | `-` | - |
|
|
191
191
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
192
192
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
193
193
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
@@ -197,35 +197,35 @@ function Example() {
|
|
|
197
197
|
| `key` | `Key \| null` | No | `-` | - |
|
|
198
198
|
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
199
199
|
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
200
|
-
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
201
|
-
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
202
|
-
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
203
|
-
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
204
|
-
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
205
|
-
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
206
|
-
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
200
|
+
| `margin` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
201
|
+
| `marginBottom` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
202
|
+
| `marginEnd` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
203
|
+
| `marginStart` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
204
|
+
| `marginTop` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
205
|
+
| `marginX` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
206
|
+
| `marginY` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
207
207
|
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
|
|
208
208
|
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
|
|
209
209
|
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
210
210
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
211
211
|
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
|
|
212
212
|
| `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
|
|
213
|
-
| `opacity` |
|
|
213
|
+
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<Opacity \| undefined>` | No | `-` | - |
|
|
214
214
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
215
|
-
| `padding` | `0 \| 1 \|
|
|
216
|
-
| `paddingBottom` | `0 \| 1 \|
|
|
217
|
-
| `paddingEnd` | `0 \| 1 \|
|
|
218
|
-
| `paddingStart` | `0 \| 1 \|
|
|
219
|
-
| `paddingTop` | `0 \| 1 \|
|
|
220
|
-
| `paddingX` | `0 \| 1 \|
|
|
221
|
-
| `paddingY` | `0 \| 1 \|
|
|
215
|
+
| `padding` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
216
|
+
| `paddingBottom` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
217
|
+
| `paddingEnd` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
218
|
+
| `paddingStart` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
219
|
+
| `paddingTop` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
220
|
+
| `paddingX` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
221
|
+
| `paddingY` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
222
222
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
223
223
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
224
224
|
| `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
|
|
225
|
-
| `ref` | `(
|
|
225
|
+
| `ref` | `null \| RefObject<HTMLButtonElement \| null> \| (instance: HTMLButtonElement \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
226
226
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
227
|
-
| `rowGap` | `0 \| 1 \|
|
|
228
|
-
| `start` | `null \| string \| number \| false \| true \| ReactElement<
|
|
227
|
+
| `rowGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
228
|
+
| `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed before the value |
|
|
229
229
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
230
230
|
| `styles` | `{ root?: CSSProperties; content?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the Chip component |
|
|
231
231
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
@@ -233,14 +233,14 @@ function Example() {
|
|
|
233
233
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
234
234
|
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
235
235
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
236
|
-
| `transform` |
|
|
236
|
+
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<Transform \| undefined>` | No | `-` | - |
|
|
237
237
|
| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
|
|
238
238
|
| `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 |
|
|
239
239
|
| `type` | `button \| reset \| submit` | No | `-` | - |
|
|
240
240
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
241
241
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
242
242
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
243
|
-
| `zIndex` |
|
|
243
|
+
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<ZIndex \| undefined>` | No | `-` | - |
|
|
244
244
|
|
|
245
245
|
|
|
246
246
|
## Styles
|
|
@@ -82,26 +82,26 @@ import { Coachmark } from '@coinbase/cds-web/coachmark/Coachmark'
|
|
|
82
82
|
|
|
83
83
|
| Prop | Type | Required | Default | Description |
|
|
84
84
|
| --- | --- | --- | --- | --- |
|
|
85
|
-
| `action` | `null \| string \| number \| false \| true \| ReactElement<
|
|
86
|
-
| `content` | `null \| string \| number \| false \| true \| ReactElement<
|
|
87
|
-
| `title` | `null \| string \| number \| false \| true \| ReactElement<
|
|
85
|
+
| `action` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Action button for next step or ending the tour |
|
|
86
|
+
| `content` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Content of the Coachmark. Text or ReactNode to be rendered below the title |
|
|
87
|
+
| `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Title of the Coachmark. Text or ReactNode |
|
|
88
88
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
89
89
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
90
90
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
91
91
|
| `as` | `div` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
92
|
-
| `aspectRatio` |
|
|
93
|
-
| `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
|
|
94
|
-
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
95
|
-
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
96
|
-
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
97
|
-
| `borderColor` | `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
|
|
98
|
-
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
99
|
-
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
100
|
-
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
101
|
-
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
102
|
-
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
103
|
-
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
104
|
-
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
92
|
+
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<AspectRatio \| undefined>` | No | `-` | - |
|
|
93
|
+
| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
|
|
94
|
+
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
95
|
+
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
96
|
+
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
97
|
+
| `borderColor` | `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
|
|
98
|
+
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
99
|
+
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
100
|
+
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
101
|
+
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
102
|
+
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
103
|
+
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
104
|
+
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
105
105
|
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
106
106
|
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
107
107
|
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
@@ -110,36 +110,36 @@ import { Coachmark } from '@coinbase/cds-web/coachmark/Coachmark'
|
|
|
110
110
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
111
111
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
112
112
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
113
|
-
| `checkbox` | `null \| string \| number \| false \| true \| ReactElement<
|
|
113
|
+
| `checkbox` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Checkbox component to be rendered below the content |
|
|
114
114
|
| `closeButtonAccessibilityLabel` | `string` | No | `-` | a11y label of the close button |
|
|
115
|
-
| `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
|
|
116
|
-
| `columnGap` | `0 \| 1 \|
|
|
115
|
+
| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
|
|
116
|
+
| `columnGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
117
117
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
118
118
|
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
119
|
-
| `elevation` | `0 \| 1 \| 2
|
|
119
|
+
| `elevation` | `0 \| 1 \| 2 \| ResponsiveValue<Elevation \| undefined>` | No | `-` | - |
|
|
120
120
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
121
121
|
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
122
|
-
| `flexGrow` |
|
|
123
|
-
| `flexShrink` |
|
|
122
|
+
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<FlexGrow \| undefined>` | No | `-` | - |
|
|
123
|
+
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<FlexShrink \| undefined>` | No | `-` | - |
|
|
124
124
|
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
125
125
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
126
126
|
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
127
127
|
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
128
128
|
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
129
|
-
| `gap` | `0 \| 1 \|
|
|
130
|
-
| `grid` |
|
|
131
|
-
| `gridArea` |
|
|
129
|
+
| `gap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
130
|
+
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<Grid \| undefined>` | No | `-` | - |
|
|
131
|
+
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridArea \| undefined>` | No | `-` | - |
|
|
132
132
|
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
133
|
-
| `gridAutoFlow` |
|
|
133
|
+
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| column \| dense \| row \| ResponsiveValue<GridAutoFlow \| undefined>` | No | `-` | - |
|
|
134
134
|
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
135
|
-
| `gridColumn` |
|
|
136
|
-
| `gridColumnEnd` |
|
|
137
|
-
| `gridColumnStart` |
|
|
138
|
-
| `gridRow` |
|
|
139
|
-
| `gridRowEnd` |
|
|
140
|
-
| `gridRowStart` |
|
|
141
|
-
| `gridTemplate` |
|
|
142
|
-
| `gridTemplateAreas` |
|
|
135
|
+
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumn \| undefined>` | No | `-` | - |
|
|
136
|
+
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumnEnd \| undefined>` | No | `-` | - |
|
|
137
|
+
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumnStart \| undefined>` | No | `-` | - |
|
|
138
|
+
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRow \| undefined>` | No | `-` | - |
|
|
139
|
+
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRowEnd \| undefined>` | No | `-` | - |
|
|
140
|
+
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRowStart \| undefined>` | No | `-` | - |
|
|
141
|
+
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<GridTemplate \| undefined>` | No | `-` | - |
|
|
142
|
+
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<GridTemplateAreas \| undefined>` | No | `-` | - |
|
|
143
143
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
144
144
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
145
145
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
@@ -147,44 +147,44 @@ import { Coachmark } from '@coinbase/cds-web/coachmark/Coachmark'
|
|
|
147
147
|
| `key` | `Key \| null` | No | `-` | - |
|
|
148
148
|
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
149
149
|
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
150
|
-
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
151
|
-
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
152
|
-
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
153
|
-
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
154
|
-
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
155
|
-
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
156
|
-
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1
|
|
150
|
+
| `margin` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
151
|
+
| `marginBottom` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
152
|
+
| `marginEnd` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
153
|
+
| `marginStart` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
154
|
+
| `marginTop` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
155
|
+
| `marginX` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
156
|
+
| `marginY` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
157
157
|
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
|
|
158
158
|
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
|
|
159
|
-
| `media` | `null \| string \| number \| false \| true \| ReactElement<
|
|
159
|
+
| `media` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Media of the Coachmark |
|
|
160
160
|
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
161
161
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
162
162
|
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
|
|
163
163
|
| `onClose` | `(() => void)` | No | `-` | Callback function fired when close button is pressed |
|
|
164
|
-
| `opacity` |
|
|
164
|
+
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<Opacity \| undefined>` | No | `-` | - |
|
|
165
165
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
166
|
-
| `padding` | `0 \| 1 \|
|
|
167
|
-
| `paddingBottom` | `0 \| 1 \|
|
|
168
|
-
| `paddingEnd` | `0 \| 1 \|
|
|
169
|
-
| `paddingStart` | `0 \| 1 \|
|
|
170
|
-
| `paddingTop` | `0 \| 1 \|
|
|
171
|
-
| `paddingX` | `0 \| 1 \|
|
|
172
|
-
| `paddingY` | `0 \| 1 \|
|
|
166
|
+
| `padding` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
167
|
+
| `paddingBottom` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
168
|
+
| `paddingEnd` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
169
|
+
| `paddingStart` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
170
|
+
| `paddingTop` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
171
|
+
| `paddingX` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
172
|
+
| `paddingY` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
173
173
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
174
174
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
175
|
-
| `ref` | `RefObject<
|
|
175
|
+
| `ref` | `null \| RefObject<HTMLButtonElement \| null> \| (instance: HTMLButtonElement \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
176
176
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
177
|
-
| `rowGap` | `0 \| 1 \|
|
|
177
|
+
| `rowGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
178
178
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
179
179
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
180
180
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
181
181
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
182
182
|
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
183
183
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
184
|
-
| `transform` |
|
|
184
|
+
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<Transform \| undefined>` | No | `-` | - |
|
|
185
185
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
186
186
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
187
|
-
| `width` | `((Width<string \| number> \|
|
|
188
|
-
| `zIndex` |
|
|
187
|
+
| `width` | `((Width<string \| number> \| ResponsiveValue<Width<string \| number>>) & Width<string \| number>) \| undefined` | No | `-` | Desired width of the Coachmark with respect to max width of windowWidth - spacing2 * 2 |
|
|
188
|
+
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<ZIndex \| undefined>` | No | `-` | - |
|
|
189
189
|
|
|
190
190
|
|
|
@@ -108,14 +108,14 @@ function Horizontal() {
|
|
|
108
108
|
|
|
109
109
|
| Prop | Type | Required | Default | Description |
|
|
110
110
|
| --- | --- | --- | --- | --- |
|
|
111
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
111
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Collapsible content |
|
|
112
112
|
| `collapsed` | `boolean` | Yes | `true` | Expand/collapse state of the content. |
|
|
113
113
|
| `dangerouslyDisableOverflowHidden` | `boolean` | No | `-` | This option may break animation. Only use this if your container has fixed height or width. |
|
|
114
114
|
| `direction` | `horizontal \| vertical` | No | `vertical` | Direction the content should expand/collapse to |
|
|
115
115
|
| `key` | `Key \| null` | No | `-` | - |
|
|
116
116
|
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | Max height of the content. Overflow content will be scrollable. |
|
|
117
117
|
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | Max width of the content. Overflow content will be scrollable. |
|
|
118
|
-
| `ref` | `RefObject<
|
|
118
|
+
| `ref` | `null \| RefObject<HTMLButtonElement \| null> \| (instance: HTMLButtonElement \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
119
119
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
120
120
|
|
|
121
121
|
|
|
@@ -587,27 +587,27 @@ function FreeSoloExample() {
|
|
|
587
587
|
| `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
|
|
588
588
|
| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
|
|
589
589
|
| `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
|
|
590
|
-
| `end` | `null \| string \| number \| false \| true \| ReactElement<
|
|
591
|
-
| `endNode` | `null \| string \| number \| false \| true \| ReactElement<
|
|
590
|
+
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
|
|
591
|
+
| `endNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
|
|
592
592
|
| `filterFunction` | `((options: SelectOptionList<Type, SelectOptionValue>, searchText: string) => SelectOption<SelectOptionValue>[])` | No | `-` | Custom filter function for searching options |
|
|
593
593
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
594
|
-
| `helperText` | `null \| string \| number \| false \| true \| ReactElement<
|
|
594
|
+
| `helperText` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Helper text displayed below the select |
|
|
595
595
|
| `hiddenSelectedOptionsLabel` | `string` | No | `-` | Label to show for showcasing count of hidden selected options |
|
|
596
596
|
| `hideSearchInput` | `boolean` | No | `-` | Hide the search input |
|
|
597
597
|
| `hideSelectAll` | `boolean` | No | `-` | Whether to hide the Select All option in multi-select mode |
|
|
598
|
-
| `label` | `null \| string \| number \| false \| true \| ReactElement<
|
|
598
|
+
| `label` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Label displayed above the control |
|
|
599
599
|
| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
|
|
600
600
|
| `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
|
|
601
|
-
| `media` | `ReactElement
|
|
601
|
+
| `media` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
|
|
602
602
|
| `onSearch` | `((searchText: string) => void)` | No | `-` | Search text change handler |
|
|
603
603
|
| `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
|
|
604
|
-
| `placeholder` | `null \| string \| number \| false \| true \| ReactElement<
|
|
605
|
-
| `ref` | `null \| (instance: SelectRef \| null) => void \| RefObject<SelectRef>` | No | `-` | - |
|
|
604
|
+
| `placeholder` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Placeholder text displayed when no option is selected |
|
|
605
|
+
| `ref` | `null \| (instance: SelectRef \| null) => void \| (() => VoidOrUndefinedOnly) \| RefObject<SelectRef \| null>` | No | `-` | - |
|
|
606
606
|
| `removeSelectedOptionAccessibilityLabel` | `string` | No | `-` | Accessibility label for each chip in a multi-select |
|
|
607
607
|
| `searchText` | `string` | No | `-` | Controlled search text value |
|
|
608
608
|
| `selectAllLabel` | `string` | No | `-` | Label for the Select All option in multi-select mode |
|
|
609
609
|
| `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
|
|
610
|
-
| `startNode` | `null \| string \| number \| false \| true \| ReactElement<
|
|
610
|
+
| `startNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
|
|
611
611
|
| `style` | `CSSProperties` | No | `-` | Inline styles for the root element |
|
|
612
612
|
| `styles` | `{ root?: CSSProperties; control?: CSSProperties \| undefined; controlStartNode?: CSSProperties \| undefined; controlInputNode?: CSSProperties \| undefined; controlValueNode?: CSSProperties \| undefined; controlLabelNode?: CSSProperties \| undefined; controlHelperTextNode?: CSSProperties \| undefined; controlEndNode?: CSSProperties \| undefined; controlBlendStyles?: InteractableBlendStyles \| undefined; dropdown?: CSSProperties \| undefined; option?: CSSProperties \| undefined; optionCell?: CSSProperties \| undefined; optionContent?: CSSProperties \| undefined; optionLabel?: CSSProperties \| undefined; optionDescription?: CSSProperties \| undefined; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: CSSProperties \| undefined; emptyContentsContainer?: CSSProperties \| undefined; emptyContentsText?: CSSProperties \| undefined; optionGroup?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the Select component |
|
|
613
613
|
| `testID` | `string` | No | `-` | Test ID for the root element |
|