@coinbase/cds-mcp-server 8.17.3 → 8.17.4
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 +4 -0
- package/mcp-docs/mobile/components/Accordion.txt +11 -12
- package/mcp-docs/mobile/components/AccordionItem.txt +5 -6
- package/mcp-docs/mobile/components/Alert.txt +21 -22
- package/mcp-docs/mobile/components/AreaChart.txt +118 -119
- package/mcp-docs/mobile/components/Avatar.txt +82 -83
- package/mcp-docs/mobile/components/AvatarButton.txt +103 -104
- package/mcp-docs/mobile/components/Banner.txt +100 -101
- package/mcp-docs/mobile/components/BarChart.txt +120 -121
- package/mcp-docs/mobile/components/Box.txt +65 -66
- package/mcp-docs/mobile/components/BrowserBar.txt +38 -39
- package/mcp-docs/mobile/components/Button.txt +78 -79
- package/mcp-docs/mobile/components/ButtonGroup.txt +10 -11
- package/mcp-docs/mobile/components/Carousel.txt +103 -104
- package/mcp-docs/mobile/components/CartesianChart.txt +107 -108
- package/mcp-docs/mobile/components/CellMedia.txt +15 -16
- package/mcp-docs/mobile/components/Checkbox.txt +35 -36
- package/mcp-docs/mobile/components/CheckboxCell.txt +73 -74
- package/mcp-docs/mobile/components/CheckboxGroup.txt +24 -25
- package/mcp-docs/mobile/components/Chip.txt +67 -68
- package/mcp-docs/mobile/components/Coachmark.txt +42 -43
- package/mcp-docs/mobile/components/Collapsible.txt +15 -16
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +16 -17
- package/mcp-docs/mobile/components/ContentCard.txt +99 -100
- package/mcp-docs/mobile/components/ContentCardBody.txt +23 -24
- package/mcp-docs/mobile/components/ContentCardFooter.txt +19 -20
- package/mcp-docs/mobile/components/ContentCardHeader.txt +33 -34
- package/mcp-docs/mobile/components/ContentCell.txt +102 -103
- package/mcp-docs/mobile/components/ControlGroup.txt +106 -107
- package/mcp-docs/mobile/components/DatePicker.txt +121 -122
- package/mcp-docs/mobile/components/Divider.txt +31 -32
- package/mcp-docs/mobile/components/DotCount.txt +15 -16
- package/mcp-docs/mobile/components/DotStatusColor.txt +12 -13
- package/mcp-docs/mobile/components/DotSymbol.txt +21 -22
- package/mcp-docs/mobile/components/Fallback.txt +49 -50
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +13 -14
- package/mcp-docs/mobile/components/HStack.txt +99 -100
- package/mcp-docs/mobile/components/HeroSquare.txt +11 -12
- package/mcp-docs/mobile/components/Icon.txt +16 -17
- package/mcp-docs/mobile/components/IconButton.txt +104 -105
- package/mcp-docs/mobile/components/InputChip.txt +62 -63
- package/mcp-docs/mobile/components/Interactable.txt +72 -73
- package/mcp-docs/mobile/components/LineChart.txt +117 -118
- package/mcp-docs/mobile/components/Link.txt +113 -114
- package/mcp-docs/mobile/components/ListCell.txt +149 -128
- package/mcp-docs/mobile/components/LogoMark.txt +8 -9
- package/mcp-docs/mobile/components/LogoWordMark.txt +7 -8
- package/mcp-docs/mobile/components/Lottie.txt +39 -40
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +11 -12
- package/mcp-docs/mobile/components/Modal.txt +36 -37
- package/mcp-docs/mobile/components/ModalBody.txt +5 -6
- package/mcp-docs/mobile/components/ModalFooter.txt +5 -6
- package/mcp-docs/mobile/components/ModalHeader.txt +5 -6
- package/mcp-docs/mobile/components/MultiContentModule.txt +107 -108
- package/mcp-docs/mobile/components/NavigationTitle.txt +13 -14
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +20 -21
- package/mcp-docs/mobile/components/NudgeCard.txt +20 -21
- package/mcp-docs/mobile/components/Numpad.txt +108 -109
- package/mcp-docs/mobile/components/Overlay.txt +45 -46
- package/mcp-docs/mobile/components/PageFooter.txt +57 -58
- package/mcp-docs/mobile/components/PageHeader.txt +79 -80
- package/mcp-docs/mobile/components/PeriodSelector.txt +98 -99
- package/mcp-docs/mobile/components/Pictogram.txt +11 -12
- package/mcp-docs/mobile/components/Point.txt +21 -22
- package/mcp-docs/mobile/components/PortalProvider.txt +7 -8
- package/mcp-docs/mobile/components/Pressable.txt +67 -68
- package/mcp-docs/mobile/components/ProgressBar.txt +18 -19
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +13 -14
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +13 -14
- package/mcp-docs/mobile/components/ProgressCircle.txt +22 -23
- package/mcp-docs/mobile/components/Radio.txt +35 -36
- package/mcp-docs/mobile/components/RadioCell.txt +73 -74
- package/mcp-docs/mobile/components/RadioGroup.txt +35 -36
- package/mcp-docs/mobile/components/ReferenceLine.txt +15 -16
- package/mcp-docs/mobile/components/RemoteImage.txt +47 -48
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +11 -12
- package/mcp-docs/mobile/components/RollingNumber.txt +130 -131
- package/mcp-docs/mobile/components/Scrubber.txt +19 -20
- package/mcp-docs/mobile/components/SearchInput.txt +77 -78
- package/mcp-docs/mobile/components/SectionHeader.txt +16 -17
- package/mcp-docs/mobile/components/SegmentedTabs.txt +105 -106
- package/mcp-docs/mobile/components/Select.txt +35 -36
- package/mcp-docs/mobile/components/SelectChip.txt +143 -144
- package/mcp-docs/mobile/components/SelectOption.txt +26 -27
- package/mcp-docs/mobile/components/SlideButton.txt +128 -129
- package/mcp-docs/mobile/components/Spacer.txt +27 -28
- package/mcp-docs/mobile/components/Sparkline.txt +18 -19
- package/mcp-docs/mobile/components/SparklineGradient.txt +18 -19
- package/mcp-docs/mobile/components/SparklineInteractive.txt +37 -38
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +12 -13
- package/mcp-docs/mobile/components/Spinner.txt +15 -16
- package/mcp-docs/mobile/components/SpotIcon.txt +11 -12
- package/mcp-docs/mobile/components/SpotRectangle.txt +11 -12
- package/mcp-docs/mobile/components/SpotSquare.txt +11 -12
- package/mcp-docs/mobile/components/Stepper.txt +113 -114
- package/mcp-docs/mobile/components/SubBrandLogoMark.txt +8 -9
- package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +8 -9
- package/mcp-docs/mobile/components/Switch.txt +35 -36
- package/mcp-docs/mobile/components/TabIndicator.txt +12 -13
- package/mcp-docs/mobile/components/TabLabel.txt +28 -29
- package/mcp-docs/mobile/components/TabNavigation.txt +41 -42
- package/mcp-docs/mobile/components/TabbedChips.txt +38 -39
- package/mcp-docs/mobile/components/Tabs.txt +76 -77
- package/mcp-docs/mobile/components/Tag.txt +102 -103
- package/mcp-docs/mobile/components/Text.txt +91 -92
- package/mcp-docs/mobile/components/TextInput.txt +107 -108
- package/mcp-docs/mobile/components/ThemeProvider.txt +8 -9
- package/mcp-docs/mobile/components/Toast.txt +82 -83
- package/mcp-docs/mobile/components/Tooltip.txt +20 -21
- package/mcp-docs/mobile/components/TopNavBar.txt +55 -56
- package/mcp-docs/mobile/components/Tour.txt +18 -19
- package/mcp-docs/mobile/components/Tray.txt +43 -44
- package/mcp-docs/mobile/components/UpsellCard.txt +16 -17
- package/mcp-docs/mobile/components/VStack.txt +99 -100
- package/mcp-docs/mobile/components/XAxis.txt +25 -26
- package/mcp-docs/mobile/components/YAxis.txt +26 -27
- package/mcp-docs/mobile/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
- package/mcp-docs/mobile/getting-started/installation.txt +57 -0
- package/mcp-docs/mobile/getting-started/introduction.txt +3 -0
- package/mcp-docs/mobile/getting-started/playground.txt +3 -0
- package/mcp-docs/mobile/getting-started/styling.txt +84 -0
- package/mcp-docs/mobile/getting-started/theming.txt +286 -0
- package/mcp-docs/mobile/hooks/useDimensions.txt +27 -2
- package/mcp-docs/mobile/hooks/useEventHandler.txt +120 -0
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +116 -0
- package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +67 -2
- package/mcp-docs/mobile/hooks/usePreviousValue.txt +74 -0
- package/mcp-docs/mobile/hooks/useRefMap.txt +178 -0
- package/mcp-docs/mobile/hooks/useTheme.txt +213 -2
- package/mcp-docs/mobile/routes.txt +8 -1
- package/mcp-docs/web/components/Accordion.txt +12 -13
- package/mcp-docs/web/components/AccordionItem.txt +5 -6
- package/mcp-docs/web/components/Alert.txt +24 -25
- package/mcp-docs/web/components/AreaChart.txt +137 -138
- package/mcp-docs/web/components/Avatar.txt +91 -92
- package/mcp-docs/web/components/AvatarButton.txt +113 -114
- package/mcp-docs/web/components/Banner.txt +101 -102
- package/mcp-docs/web/components/BarChart.txt +367 -368
- package/mcp-docs/web/components/Box.txt +65 -66
- package/mcp-docs/web/components/Button.txt +81 -82
- package/mcp-docs/web/components/ButtonGroup.txt +10 -11
- package/mcp-docs/web/components/Calendar.txt +56 -57
- package/mcp-docs/web/components/Carousel.txt +116 -117
- package/mcp-docs/web/components/CartesianChart.txt +357 -358
- package/mcp-docs/web/components/CellMedia.txt +14 -15
- package/mcp-docs/web/components/Checkbox.txt +22 -23
- package/mcp-docs/web/components/CheckboxCell.txt +70 -71
- package/mcp-docs/web/components/CheckboxGroup.txt +15 -16
- package/mcp-docs/web/components/Chip.txt +67 -68
- package/mcp-docs/web/components/Coachmark.txt +69 -70
- package/mcp-docs/web/components/Collapsible.txt +15 -16
- package/mcp-docs/web/components/ContainedAssetCard.txt +108 -109
- package/mcp-docs/web/components/ContentCard.txt +101 -102
- package/mcp-docs/web/components/ContentCardBody.txt +23 -24
- package/mcp-docs/web/components/ContentCardFooter.txt +19 -20
- package/mcp-docs/web/components/ContentCardHeader.txt +33 -34
- package/mcp-docs/web/components/ContentCell.txt +85 -86
- package/mcp-docs/web/components/ControlGroup.txt +108 -109
- package/mcp-docs/web/components/DatePicker.txt +59 -60
- package/mcp-docs/web/components/Divider.txt +31 -32
- package/mcp-docs/web/components/DotCount.txt +17 -18
- package/mcp-docs/web/components/DotStatusColor.txt +12 -13
- package/mcp-docs/web/components/DotSymbol.txt +24 -25
- package/mcp-docs/web/components/Dropdown.txt +31 -32
- package/mcp-docs/web/components/Fallback.txt +49 -50
- package/mcp-docs/web/components/FloatingAssetCard.txt +108 -109
- package/mcp-docs/web/components/FullscreenAlert.txt +20 -21
- package/mcp-docs/web/components/FullscreenModal.txt +28 -29
- package/mcp-docs/web/components/FullscreenModalLayout.txt +19 -20
- package/mcp-docs/web/components/Grid.txt +106 -107
- package/mcp-docs/web/components/GridColumn.txt +96 -97
- package/mcp-docs/web/components/HStack.txt +101 -102
- package/mcp-docs/web/components/HeroSquare.txt +12 -13
- package/mcp-docs/web/components/Icon.txt +27 -28
- package/mcp-docs/web/components/IconButton.txt +117 -118
- package/mcp-docs/web/components/InputChip.txt +62 -63
- package/mcp-docs/web/components/Interactable.txt +75 -76
- package/mcp-docs/web/components/LineChart.txt +366 -367
- package/mcp-docs/web/components/Link.txt +114 -115
- package/mcp-docs/web/components/ListCell.txt +157 -136
- package/mcp-docs/web/components/LogoMark.txt +8 -9
- package/mcp-docs/web/components/LogoWordMark.txt +7 -8
- package/mcp-docs/web/components/Lottie.txt +44 -45
- package/mcp-docs/web/components/LottieStatusAnimation.txt +11 -12
- package/mcp-docs/web/components/MediaQueryProvider.txt +7 -8
- package/mcp-docs/web/components/Modal.txt +69 -66
- package/mcp-docs/web/components/ModalBody.txt +5 -6
- package/mcp-docs/web/components/ModalFooter.txt +5 -6
- package/mcp-docs/web/components/ModalHeader.txt +5 -6
- package/mcp-docs/web/components/MultiContentModule.txt +109 -110
- package/mcp-docs/web/components/NavigationBar.txt +18 -19
- package/mcp-docs/web/components/NavigationTitle.txt +7 -8
- package/mcp-docs/web/components/NavigationTitleSelect.txt +9 -10
- package/mcp-docs/web/components/NudgeCard.txt +61 -62
- package/mcp-docs/web/components/Overlay.txt +57 -58
- package/mcp-docs/web/components/PageFooter.txt +77 -78
- package/mcp-docs/web/components/PageHeader.txt +107 -108
- package/mcp-docs/web/components/Pagination.txt +115 -116
- package/mcp-docs/web/components/PeriodSelector.txt +158 -159
- package/mcp-docs/web/components/Pictogram.txt +13 -14
- package/mcp-docs/web/components/Point.txt +169 -170
- package/mcp-docs/web/components/PortalProvider.txt +6 -7
- package/mcp-docs/web/components/Pressable.txt +73 -74
- package/mcp-docs/web/components/ProgressBar.txt +20 -21
- package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +15 -16
- package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +15 -16
- package/mcp-docs/web/components/ProgressCircle.txt +24 -25
- package/mcp-docs/web/components/Radio.txt +22 -23
- package/mcp-docs/web/components/RadioCell.txt +83 -84
- package/mcp-docs/web/components/RadioGroup.txt +22 -23
- package/mcp-docs/web/components/ReferenceLine.txt +22 -23
- package/mcp-docs/web/components/RemoteImage.txt +49 -50
- package/mcp-docs/web/components/RemoteImageGroup.txt +11 -12
- package/mcp-docs/web/components/RollingNumber.txt +131 -132
- package/mcp-docs/web/components/Scrubber.txt +22 -23
- package/mcp-docs/web/components/SearchInput.txt +29 -30
- package/mcp-docs/web/components/SectionHeader.txt +98 -99
- package/mcp-docs/web/components/SegmentedTabs.txt +109 -110
- package/mcp-docs/web/components/Select.txt +22 -23
- package/mcp-docs/web/components/SelectChip.txt +134 -135
- package/mcp-docs/web/components/SelectOption.txt +31 -32
- package/mcp-docs/web/components/Sidebar.txt +109 -110
- package/mcp-docs/web/components/SidebarItem.txt +6 -7
- package/mcp-docs/web/components/SidebarMoreMenu.txt +5 -6
- package/mcp-docs/web/components/Spacer.txt +57 -58
- package/mcp-docs/web/components/Sparkline.txt +18 -19
- package/mcp-docs/web/components/SparklineGradient.txt +18 -19
- package/mcp-docs/web/components/SparklineInteractive.txt +34 -35
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +12 -13
- package/mcp-docs/web/components/Spinner.txt +15 -16
- package/mcp-docs/web/components/SpotIcon.txt +12 -13
- package/mcp-docs/web/components/SpotRectangle.txt +12 -13
- package/mcp-docs/web/components/SpotSquare.txt +12 -13
- package/mcp-docs/web/components/Stepper.txt +119 -120
- package/mcp-docs/web/components/SubBrandLogoMark.txt +8 -9
- package/mcp-docs/web/components/SubBrandLogoWordMark.txt +8 -9
- package/mcp-docs/web/components/Switch.txt +23 -24
- package/mcp-docs/web/components/TabIndicator.txt +12 -13
- package/mcp-docs/web/components/TabLabel.txt +28 -29
- package/mcp-docs/web/components/TabNavigation.txt +41 -42
- package/mcp-docs/web/components/TabbedChips.txt +38 -39
- package/mcp-docs/web/components/Table.txt +17 -18
- package/mcp-docs/web/components/TableBody.txt +9 -10
- package/mcp-docs/web/components/TableCaption.txt +13 -14
- package/mcp-docs/web/components/TableCell.txt +21 -22
- package/mcp-docs/web/components/TableCellFallback.txt +16 -17
- package/mcp-docs/web/components/TableFooter.txt +9 -10
- package/mcp-docs/web/components/TableHeader.txt +10 -11
- package/mcp-docs/web/components/TableRow.txt +13 -14
- package/mcp-docs/web/components/Tabs.txt +94 -95
- package/mcp-docs/web/components/Tag.txt +106 -107
- package/mcp-docs/web/components/Text.txt +110 -111
- package/mcp-docs/web/components/TextInput.txt +32 -33
- package/mcp-docs/web/components/ThemeProvider.txt +27 -28
- package/mcp-docs/web/components/TileButton.txt +37 -38
- package/mcp-docs/web/components/Toast.txt +82 -83
- package/mcp-docs/web/components/Tooltip.txt +22 -23
- package/mcp-docs/web/components/Tour.txt +21 -22
- package/mcp-docs/web/components/Tray.txt +23 -24
- package/mcp-docs/web/components/UpsellCard.txt +16 -17
- package/mcp-docs/web/components/VStack.txt +101 -102
- package/mcp-docs/web/components/XAxis.txt +25 -26
- package/mcp-docs/web/components/YAxis.txt +26 -27
- package/mcp-docs/web/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
- package/mcp-docs/web/getting-started/installation.txt +103 -0
- package/mcp-docs/web/getting-started/introduction.txt +3 -0
- package/mcp-docs/web/getting-started/playground.txt +3 -0
- package/mcp-docs/web/getting-started/styling.txt +161 -0
- package/mcp-docs/web/getting-started/templates.txt +121 -0
- package/mcp-docs/web/getting-started/theming.txt +426 -0
- package/mcp-docs/web/hooks/useBreakpoints.txt +30 -2
- package/mcp-docs/web/hooks/useDimensions.txt +61 -2
- package/mcp-docs/web/hooks/useEventHandler.txt +120 -0
- package/mcp-docs/web/hooks/useHasMounted.txt +22 -2
- package/mcp-docs/web/hooks/useIsoEffect.txt +18 -2
- package/mcp-docs/web/hooks/useMediaQuery.txt +22 -2
- package/mcp-docs/web/hooks/useMergeRefs.txt +116 -0
- package/mcp-docs/web/hooks/useOverlayContentContext.txt +64 -2
- package/mcp-docs/web/hooks/usePreviousValue.txt +74 -0
- package/mcp-docs/web/hooks/useRefMap.txt +178 -0
- package/mcp-docs/web/hooks/useScrollBlocker.txt +21 -2
- package/mcp-docs/web/hooks/useTheme.txt +261 -2
- package/mcp-docs/web/routes.txt +9 -1
- package/package.json +1 -1
|
@@ -4,118 +4,10 @@ A card component for displaying and managing asset holdings.
|
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```tsx
|
|
8
8
|
import { FloatingAssetCard } from '@coinbase/cds-web/cards/FloatingAssetCard'
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
| Prop | Type | Required | Default | Description |
|
|
14
|
-
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Remote Image or other node with media content. |
|
|
16
|
-
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
|
|
17
|
-
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
18
|
-
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
19
|
-
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
20
|
-
| `as` | `div` | No | `-` | - |
|
|
21
|
-
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
22
|
-
| `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 | `-` | - |
|
|
23
|
-
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
24
|
-
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
25
|
-
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
26
|
-
| `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` | No | `-` | - |
|
|
27
|
-
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
28
|
-
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
29
|
-
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
30
|
-
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
31
|
-
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
32
|
-
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
33
|
-
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
34
|
-
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
35
|
-
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
36
|
-
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
37
|
-
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
|
|
38
|
-
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
39
|
-
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
40
|
-
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
41
|
-
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
42
|
-
| `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 | `-` | - |
|
|
43
|
-
| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
44
|
-
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
45
|
-
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
|
|
46
|
-
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
47
|
-
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
48
|
-
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
49
|
-
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
50
|
-
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
51
|
-
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
52
|
-
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
53
|
-
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
54
|
-
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
55
|
-
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
56
|
-
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
57
|
-
| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
58
|
-
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
59
|
-
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
60
|
-
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
61
|
-
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
|
|
62
|
-
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
63
|
-
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
64
|
-
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
65
|
-
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
66
|
-
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
67
|
-
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
68
|
-
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
69
|
-
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
70
|
-
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
71
|
-
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
72
|
-
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
73
|
-
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
74
|
-
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
75
|
-
| `key` | `Key \| null` | No | `-` | - |
|
|
76
|
-
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
77
|
-
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
78
|
-
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
79
|
-
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
80
|
-
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
81
|
-
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
82
|
-
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
83
|
-
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
84
|
-
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
85
|
-
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
|
|
86
|
-
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
|
|
87
|
-
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
88
|
-
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
89
|
-
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
|
|
90
|
-
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
91
|
-
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
92
|
-
| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
93
|
-
| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
94
|
-
| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
95
|
-
| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
96
|
-
| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
97
|
-
| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
98
|
-
| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
99
|
-
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
100
|
-
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
101
|
-
| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
|
|
102
|
-
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
103
|
-
| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
104
|
-
| `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
|
|
105
|
-
| `style` | `CSSProperties` | No | `-` | - |
|
|
106
|
-
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed above Title |
|
|
107
|
-
| `testID` | `string` | No | `floating-asset-card` | 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 |
|
|
108
|
-
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
109
|
-
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
110
|
-
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
111
|
-
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
112
|
-
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
113
|
-
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
114
|
-
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
115
|
-
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `size === 'l' ? floatingAssetCardLargeWidth : floatingAssetCardSmallDimension` | - |
|
|
116
|
-
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
117
|
-
|
|
118
|
-
|
|
119
11
|
## Examples
|
|
120
12
|
|
|
121
13
|
### Default
|
|
@@ -248,4 +140,111 @@ function Example() {
|
|
|
248
140
|
}
|
|
249
141
|
```
|
|
250
142
|
|
|
143
|
+
## Props
|
|
144
|
+
|
|
145
|
+
| Prop | Type | Required | Default | Description |
|
|
146
|
+
| --- | --- | --- | --- | --- |
|
|
147
|
+
| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Remote Image or other node with media content. |
|
|
148
|
+
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
|
|
149
|
+
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
150
|
+
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
151
|
+
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
152
|
+
| `as` | `div` | No | `-` | - |
|
|
153
|
+
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
154
|
+
| `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 | `-` | - |
|
|
155
|
+
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
156
|
+
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
157
|
+
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
158
|
+
| `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` | No | `-` | - |
|
|
159
|
+
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
160
|
+
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
161
|
+
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
162
|
+
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
163
|
+
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
164
|
+
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
165
|
+
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
166
|
+
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
167
|
+
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
168
|
+
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
169
|
+
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
|
|
170
|
+
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
171
|
+
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
172
|
+
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
173
|
+
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
174
|
+
| `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 | `-` | - |
|
|
175
|
+
| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
176
|
+
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
177
|
+
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
|
|
178
|
+
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
179
|
+
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
180
|
+
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
181
|
+
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
182
|
+
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
183
|
+
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
184
|
+
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
185
|
+
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
186
|
+
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
187
|
+
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
188
|
+
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
189
|
+
| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
190
|
+
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
191
|
+
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
192
|
+
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
193
|
+
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
|
|
194
|
+
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
195
|
+
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
196
|
+
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
197
|
+
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
198
|
+
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
199
|
+
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
200
|
+
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
201
|
+
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
202
|
+
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
203
|
+
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
204
|
+
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
205
|
+
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
206
|
+
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
207
|
+
| `key` | `Key \| null` | No | `-` | - |
|
|
208
|
+
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
209
|
+
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
210
|
+
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
211
|
+
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
212
|
+
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
213
|
+
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
214
|
+
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
215
|
+
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
216
|
+
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
217
|
+
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
|
|
218
|
+
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
|
|
219
|
+
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
220
|
+
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
221
|
+
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
|
|
222
|
+
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
223
|
+
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
224
|
+
| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
225
|
+
| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
226
|
+
| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
227
|
+
| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
228
|
+
| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
229
|
+
| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
230
|
+
| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
231
|
+
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
232
|
+
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
233
|
+
| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
|
|
234
|
+
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
235
|
+
| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
236
|
+
| `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
|
|
237
|
+
| `style` | `CSSProperties` | No | `-` | - |
|
|
238
|
+
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed above Title |
|
|
239
|
+
| `testID` | `string` | No | `floating-asset-card` | 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 |
|
|
240
|
+
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
241
|
+
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
242
|
+
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
243
|
+
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
244
|
+
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
245
|
+
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
246
|
+
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
247
|
+
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `size === 'l' ? floatingAssetCardLargeWidth : floatingAssetCardSmallDimension` | - |
|
|
248
|
+
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
249
|
+
|
|
251
250
|
|
|
@@ -4,30 +4,10 @@ A fullscreen alert component for displaying important messages that require user
|
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```tsx
|
|
8
8
|
import { FullscreenAlert } from '@coinbase/cds-web/overlays/alert/FullscreenAlert'
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
| Prop | Type | Required | Default | Description |
|
|
14
|
-
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `body` | `string` | Yes | `-` | Alert body/description |
|
|
16
|
-
| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
|
|
17
|
-
| `preferredActionLabel` | `string` | Yes | `-` | Label of the main call to action button |
|
|
18
|
-
| `title` | `string` | Yes | `-` | Alert title |
|
|
19
|
-
| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
|
|
20
|
-
| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
|
|
21
|
-
| `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
|
|
22
|
-
| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
|
|
23
|
-
| `dismissActionLabel` | `string` | No | `-` | Label of the dismiss button |
|
|
24
|
-
| `heroSquare` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoin \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | No | `-` | Name of the illustration that is rendered in the alert |
|
|
25
|
-
| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss button is pressed |
|
|
26
|
-
| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the main call to action button is pressed |
|
|
27
|
-
| `preferredActionVariant` | `primary \| negative` | No | `primary` | Variant of the main call to action button |
|
|
28
|
-
| `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 |
|
|
29
|
-
|
|
30
|
-
|
|
31
11
|
## Examples
|
|
32
12
|
|
|
33
13
|
`FullscreenAlert` is built on top of `FullscreenModal` with an API that is similar to `Alert`.
|
|
@@ -67,4 +47,23 @@ function DefaultAlert() {
|
|
|
67
47
|
}
|
|
68
48
|
```
|
|
69
49
|
|
|
50
|
+
## Props
|
|
51
|
+
|
|
52
|
+
| Prop | Type | Required | Default | Description |
|
|
53
|
+
| --- | --- | --- | --- | --- |
|
|
54
|
+
| `body` | `string` | Yes | `-` | Alert body/description |
|
|
55
|
+
| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
|
|
56
|
+
| `preferredActionLabel` | `string` | Yes | `-` | Label of the main call to action button |
|
|
57
|
+
| `title` | `string` | Yes | `-` | Alert title |
|
|
58
|
+
| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
|
|
59
|
+
| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
|
|
60
|
+
| `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
|
|
61
|
+
| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
|
|
62
|
+
| `dismissActionLabel` | `string` | No | `-` | Label of the dismiss button |
|
|
63
|
+
| `heroSquare` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoin \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | No | `-` | Name of the illustration that is rendered in the alert |
|
|
64
|
+
| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss button is pressed |
|
|
65
|
+
| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the main call to action button is pressed |
|
|
66
|
+
| `preferredActionVariant` | `primary \| negative` | No | `primary` | Variant of the main call to action button |
|
|
67
|
+
| `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 |
|
|
68
|
+
|
|
70
69
|
|
|
@@ -4,38 +4,10 @@ FullscreenModal is a component that displays content in a full-screen overlay, t
|
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```tsx
|
|
8
8
|
import { FullscreenModal } from '@coinbase/cds-web/overlays/modal/FullscreenModal'
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
| Prop | Type | Required | Default | Description |
|
|
14
|
-
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
|
|
16
|
-
| `primaryContent` | `ReactElement` | Yes | `-` | Primary content element. Primary content is where the core of the task or information should live. |
|
|
17
|
-
| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
|
|
18
|
-
| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
|
|
19
|
-
| `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
|
|
20
|
-
| `contentContainerClassName` | `string` | No | `-` | Class applied to the content container element |
|
|
21
|
-
| `contentStyle` | `CSSProperties` | No | `-` | Apply styles to content. |
|
|
22
|
-
| `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
|
|
23
|
-
| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
|
|
24
|
-
| `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
|
|
25
|
-
| `hideDivider` | `boolean` | No | `false` | Hide header bottom divider |
|
|
26
|
-
| `logo` | `ReactElement` | No | `-` | The logo to display |
|
|
27
|
-
| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
|
|
28
|
-
| `primaryContentClassName` | `string` | No | `-` | Class applied to the primary content element |
|
|
29
|
-
| `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
|
|
30
|
-
| `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
|
|
31
|
-
| `secondaryContent` | `ReactElement` | No | `-` | Secondary content element. Secondary content is supplemental information. |
|
|
32
|
-
| `secondaryContentClassName` | `string` | No | `-` | Class applied to the secondary content element |
|
|
33
|
-
| `shouldCloseOnEscPress` | `boolean` | No | `true` | If pressing the esc key should close the modal |
|
|
34
|
-
| `showSecondaryContentDivider` | `boolean` | No | `false` | Show divider between primary and secondary content |
|
|
35
|
-
| `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 |
|
|
36
|
-
| `title` | `string` | No | `-` | Title displayed in the Fullscreen Modal header. |
|
|
37
|
-
|
|
38
|
-
|
|
39
11
|
## Examples
|
|
40
12
|
|
|
41
13
|
Please refer to the [Modal](/components/overlay/Modal) docs for more info on setup and usage.
|
|
@@ -143,4 +115,31 @@ function DefaultModal() {
|
|
|
143
115
|
}
|
|
144
116
|
```
|
|
145
117
|
|
|
118
|
+
## Props
|
|
119
|
+
|
|
120
|
+
| Prop | Type | Required | Default | Description |
|
|
121
|
+
| --- | --- | --- | --- | --- |
|
|
122
|
+
| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
|
|
123
|
+
| `primaryContent` | `ReactElement` | Yes | `-` | Primary content element. Primary content is where the core of the task or information should live. |
|
|
124
|
+
| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
|
|
125
|
+
| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
|
|
126
|
+
| `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
|
|
127
|
+
| `contentContainerClassName` | `string` | No | `-` | Class applied to the content container element |
|
|
128
|
+
| `contentStyle` | `CSSProperties` | No | `-` | Apply styles to content. |
|
|
129
|
+
| `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
|
|
130
|
+
| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
|
|
131
|
+
| `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
|
|
132
|
+
| `hideDivider` | `boolean` | No | `false` | Hide header bottom divider |
|
|
133
|
+
| `logo` | `ReactElement` | No | `-` | The logo to display |
|
|
134
|
+
| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
|
|
135
|
+
| `primaryContentClassName` | `string` | No | `-` | Class applied to the primary content element |
|
|
136
|
+
| `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
|
|
137
|
+
| `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
|
|
138
|
+
| `secondaryContent` | `ReactElement` | No | `-` | Secondary content element. Secondary content is supplemental information. |
|
|
139
|
+
| `secondaryContentClassName` | `string` | No | `-` | Class applied to the secondary content element |
|
|
140
|
+
| `shouldCloseOnEscPress` | `boolean` | No | `true` | If pressing the esc key should close the modal |
|
|
141
|
+
| `showSecondaryContentDivider` | `boolean` | No | `false` | Show divider between primary and secondary content |
|
|
142
|
+
| `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 |
|
|
143
|
+
| `title` | `string` | No | `-` | Title displayed in the Fullscreen Modal header. |
|
|
144
|
+
|
|
146
145
|
|
|
@@ -4,29 +4,10 @@ Provides the layout structure, overlay, focus trapping, and animations for fulls
|
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```tsx
|
|
8
8
|
import { FullscreenModalLayout } from '@coinbase/cds-web/overlays/modal/FullscreenModalLayout'
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
| Prop | Type | Required | Default | Description |
|
|
14
|
-
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
|
|
16
|
-
| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
|
|
17
|
-
| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
|
|
18
|
-
| `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
|
|
19
|
-
| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
|
|
20
|
-
| `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
|
|
21
|
-
| `key` | `Key \| null` | No | `-` | - |
|
|
22
|
-
| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
|
|
23
|
-
| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
|
|
24
|
-
| `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
|
|
25
|
-
| `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
|
|
26
|
-
| `shouldCloseOnEscPress` | `boolean` | No | `true` | If pressing the esc key should close the modal |
|
|
27
|
-
| `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 |
|
|
28
|
-
|
|
29
|
-
|
|
30
11
|
## Examples
|
|
31
12
|
|
|
32
13
|
import {
|
|
@@ -185,4 +166,22 @@ function AllPanelsExample() {
|
|
|
185
166
|
}
|
|
186
167
|
```
|
|
187
168
|
|
|
169
|
+
## Props
|
|
170
|
+
|
|
171
|
+
| Prop | Type | Required | Default | Description |
|
|
172
|
+
| --- | --- | --- | --- | --- |
|
|
173
|
+
| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
|
|
174
|
+
| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
|
|
175
|
+
| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
|
|
176
|
+
| `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
|
|
177
|
+
| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
|
|
178
|
+
| `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
|
|
179
|
+
| `key` | `Key \| null` | No | `-` | - |
|
|
180
|
+
| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
|
|
181
|
+
| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
|
|
182
|
+
| `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
|
|
183
|
+
| `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
|
|
184
|
+
| `shouldCloseOnEscPress` | `boolean` | No | `true` | If pressing the esc key should close the modal |
|
|
185
|
+
| `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 |
|
|
186
|
+
|
|
188
187
|
|