@coinbase/cds-mcp-server 8.66.2 → 9.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/mcp-docs/mobile/components/AccordionItem.txt +4 -4
- package/mcp-docs/mobile/components/Alert.txt +3 -2
- package/mcp-docs/mobile/components/AreaChart.txt +42 -42
- package/mcp-docs/mobile/components/Avatar.txt +35 -35
- package/mcp-docs/mobile/components/AvatarButton.txt +37 -37
- package/mcp-docs/mobile/components/Banner.txt +57 -42
- package/mcp-docs/mobile/components/BarChart.txt +42 -42
- package/mcp-docs/mobile/components/Box.txt +36 -36
- package/mcp-docs/mobile/components/BrowserBar.txt +37 -37
- package/mcp-docs/mobile/components/Button.txt +54 -44
- package/mcp-docs/mobile/components/Calendar.txt +36 -36
- package/mcp-docs/mobile/components/Carousel.txt +50 -60
- package/mcp-docs/mobile/components/CartesianChart.txt +42 -42
- package/mcp-docs/mobile/components/CellMedia.txt +2 -2
- package/mcp-docs/mobile/components/Checkbox.txt +3 -3
- package/mcp-docs/mobile/components/CheckboxCell.txt +39 -39
- package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
- package/mcp-docs/mobile/components/Chip.txt +41 -41
- package/mcp-docs/mobile/components/Coachmark.txt +41 -41
- 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 +39 -39
- package/mcp-docs/mobile/components/ContentCardBody.txt +44 -44
- package/mcp-docs/mobile/components/ContentCardFooter.txt +36 -36
- package/mcp-docs/mobile/components/ContentCardHeader.txt +43 -43
- package/mcp-docs/mobile/components/ContentCell.txt +51 -51
- package/mcp-docs/mobile/components/ControlGroup.txt +38 -38
- package/mcp-docs/mobile/components/DataCard.txt +49 -49
- package/mcp-docs/mobile/components/DateInput.txt +27 -24
- package/mcp-docs/mobile/components/DatePicker.txt +27 -24
- package/mcp-docs/mobile/components/Divider.txt +35 -35
- 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 +34 -34
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
- package/mcp-docs/mobile/components/HStack.txt +36 -36
- package/mcp-docs/mobile/components/HeroSquare.txt +2 -2
- package/mcp-docs/mobile/components/Icon.txt +3 -3
- package/mcp-docs/mobile/components/IconButton.txt +40 -60
- package/mcp-docs/mobile/components/InputChip.txt +41 -41
- package/mcp-docs/mobile/components/Interactable.txt +36 -36
- package/mcp-docs/mobile/components/Legend.txt +45 -43
- package/mcp-docs/mobile/components/LineChart.txt +42 -42
- package/mcp-docs/mobile/components/Link.txt +44 -41
- package/mcp-docs/mobile/components/ListCell.txt +54 -54
- package/mcp-docs/mobile/components/Lottie.txt +36 -36
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +43 -43
- package/mcp-docs/mobile/components/MediaChip.txt +41 -41
- package/mcp-docs/mobile/components/MessagingCard.txt +44 -44
- 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 +35 -35
- package/mcp-docs/mobile/components/ModalHeader.txt +36 -36
- package/mcp-docs/mobile/components/MultiContentModule.txt +42 -42
- package/mcp-docs/mobile/components/NavigationTitle.txt +41 -39
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +41 -39
- package/mcp-docs/mobile/components/NudgeCard.txt +7 -7
- package/mcp-docs/mobile/components/Numpad.txt +39 -39
- package/mcp-docs/mobile/components/Overlay.txt +35 -35
- package/mcp-docs/mobile/components/PageFooter.txt +38 -32
- package/mcp-docs/mobile/components/PageHeader.txt +40 -34
- package/mcp-docs/mobile/components/PercentageBarChart.txt +42 -42
- package/mcp-docs/mobile/components/PeriodSelector.txt +41 -41
- package/mcp-docs/mobile/components/Pictogram.txt +2 -2
- 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 +38 -38
- 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 +39 -39
- 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 +44 -42
- package/mcp-docs/mobile/components/Scrubber.txt +2 -2
- package/mcp-docs/mobile/components/SearchInput.txt +27 -24
- package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
- package/mcp-docs/mobile/components/SegmentedTabs.txt +36 -36
- 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 +44 -42
- 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 +42 -42
- 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 +2 -2
- 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 +39 -38
- 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 +42 -40
- package/mcp-docs/mobile/components/TabNavigation.txt +36 -36
- package/mcp-docs/mobile/components/TabbedChips.txt +36 -36
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +36 -36
- package/mcp-docs/mobile/components/Tabs.txt +36 -36
- package/mcp-docs/mobile/components/Tag.txt +43 -43
- package/mcp-docs/mobile/components/Text.txt +54 -61
- package/mcp-docs/mobile/components/TextInput.txt +27 -24
- package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
- package/mcp-docs/mobile/components/Toast.txt +36 -36
- 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 +36 -36
- 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 +4 -3
- 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 +2 -2
- 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 +2 -2
- 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 +54 -54
- 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 +2 -2
- 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 +2 -2
- 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/TableCellFallback.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 +49 -319
- 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
|
@@ -7,7 +7,7 @@ A bar chart component for comparing share or mix across categories as percentage
|
|
|
7
7
|
## Import
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
import { PercentageBarChart } from '@coinbase/cds-mobile
|
|
10
|
+
import { PercentageBarChart } from '@coinbase/cds-mobile/visualizations/chart'
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
@@ -700,7 +700,7 @@ function BuyVsSellExample() {
|
|
|
700
700
|
| --- | --- | --- | --- | --- |
|
|
701
701
|
| `BarComponent` | `BarComponent` | No | `-` | Component to render the bar. |
|
|
702
702
|
| `BarStackComponent` | `BarStackComponent` | No | `DefaultBarStack` | Custom component to render the stack container. Can be used to add clip paths, outlines, or other custom styling. |
|
|
703
|
-
| `alignContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly
|
|
703
|
+
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
704
704
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
705
705
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
706
706
|
| `allowOverflowGestures` | `boolean` | No | `-` | Allows continuous gestures on the chart to continue outside the bounds of the chart element. |
|
|
@@ -724,46 +724,46 @@ function BuyVsSellExample() {
|
|
|
724
724
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
725
725
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
726
726
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
727
|
-
| `bottom` | `
|
|
727
|
+
| `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
728
728
|
| `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 | `-` | - |
|
|
729
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
729
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
730
730
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
731
|
-
| `display` | `none \|
|
|
731
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
732
732
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
733
733
|
| `fillOpacity` | `number` | No | `-` | Fill opacity for the bar. |
|
|
734
|
-
| `flexBasis` | `
|
|
735
|
-
| `flexDirection` | `
|
|
734
|
+
| `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
735
|
+
| `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
|
|
736
736
|
| `flexGrow` | `number` | No | `-` | - |
|
|
737
737
|
| `flexShrink` | `number` | No | `-` | - |
|
|
738
738
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
739
739
|
| `font` | `inherit \| FontFamily` | No | `-` | - |
|
|
740
740
|
| `fontFamilies` | `string[]` | No | `-` | Default font families to use within ChartText. If not provided, will be the default for the system. |
|
|
741
741
|
| `fontProvider` | `SkTypefaceFontProvider` | No | `-` | Skia font provider to allow for custom fonts. If not provided, the only available fonts will be those defined by the system. |
|
|
742
|
-
| `fontSize` | `
|
|
742
|
+
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
743
743
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
744
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
744
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
745
745
|
| `getScrubberAccessibilityLabel` | `((dataIndex: number) => string)` | No | `-` | Function that returns the accessibility label for each scrubber point. Receives dataIndex for each scrubber point label. |
|
|
746
|
-
| `height` | `
|
|
746
|
+
| `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
747
747
|
| `inset` | `number \| Partial<ChartInset>` | No | `0` | Inset around the entire chart (outside the axes). |
|
|
748
748
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
749
749
|
| `key` | `Key \| null` | No | `-` | - |
|
|
750
750
|
| `layout` | `horizontal \| vertical` | No | `'horizontal'` | Chart layout - describes the direction bars/areas grow. - vertical: Bars grow vertically. X is category axis, Y is value axis. - horizontal (default): Bars grow horizontally. Y is category axis, X is value axis. |
|
|
751
|
-
| `left` | `
|
|
752
|
-
| `legend` | `null \| string \| number \| false \| true \| ReactElement<
|
|
751
|
+
| `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
752
|
+
| `legend` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
|
|
753
753
|
| `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
|
|
754
754
|
| `legendPosition` | `top \| bottom \| left \| right` | No | `'bottom'` | Position of the legend relative to the chart. |
|
|
755
755
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
756
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
757
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
758
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
759
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
760
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
761
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
762
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
763
|
-
| `maxHeight` | `
|
|
764
|
-
| `maxWidth` | `
|
|
765
|
-
| `minHeight` | `
|
|
766
|
-
| `minWidth` | `
|
|
756
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
757
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
758
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
759
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
760
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
761
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
762
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
763
|
+
| `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
764
|
+
| `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
765
|
+
| `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
766
|
+
| `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
767
767
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
768
768
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
769
769
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -778,19 +778,19 @@ function BuyVsSellExample() {
|
|
|
778
778
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
779
779
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
780
780
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
781
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
782
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
783
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
784
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
785
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
786
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
787
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
781
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
782
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
783
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
784
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
785
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
786
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
787
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
788
788
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
789
|
-
| `position` | `
|
|
790
|
-
| `ref` | `(
|
|
791
|
-
| `right` | `
|
|
789
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
790
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| 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). |
|
|
791
|
+
| `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
792
792
|
| `roundBaseline` | `boolean` | No | `true` | Whether to round the baseline of a bar (where the value is 0). |
|
|
793
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
793
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
794
794
|
| `scrubberAccessibilityLabelStep` | `number` | No | `-` | Number of data points to move between screen-reader samples. |
|
|
795
795
|
| `series` | `PercentageBarSeries[]` | No | `-` | Configuration objects that define how to visualize the data. Each series contains its own data. |
|
|
796
796
|
| `showXAxis` | `boolean` | No | `-` | Whether to show the X axis. |
|
|
@@ -799,19 +799,19 @@ function BuyVsSellExample() {
|
|
|
799
799
|
| `stackMinSize` | `number` | No | `-` | Minimum size for the entire stack. |
|
|
800
800
|
| `stroke` | `string` | No | `-` | Stroke color for the bar outline. |
|
|
801
801
|
| `strokeWidth` | `number` | No | `-` | Stroke width for the bar outline. |
|
|
802
|
-
| `style` | `((false \| RegisteredStyle<ViewStyle> \|
|
|
802
|
+
| `style` | `((false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]>) & ((false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]>) & ((false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]>) & (false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>)))) \| null` | No | `-` | Custom styles for the root element. |
|
|
803
803
|
| `styles` | `{ root?: StyleProp<ViewStyle>; chart?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for the component. |
|
|
804
|
-
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
804
|
+
| `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 Used to locate this view in end-to-end tests. |
|
|
805
805
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
806
806
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
807
|
-
| `textDecorationStyle` | `solid \|
|
|
807
|
+
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
808
808
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
809
|
-
| `top` | `
|
|
810
|
-
| `transform` | `string \| (({
|
|
811
|
-
| `transition` | `{ type: timing; } & TimingConfig & { delay?: number \| undefined; } \| { type: spring; } & {
|
|
809
|
+
| `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
810
|
+
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
811
|
+
| `transition` | `{ type: timing; } & TimingConfig & { delay?: number \| undefined; } \| { type: spring; } & { mass?: number \| undefined; overshootClamping?: boolean \| undefined; energyThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { stiffness?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } & { delay?: number \| undefined; } \| { type: spring; } & { mass?: number \| undefined; overshootClamping?: boolean \| undefined; energyThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { stiffness?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; } & { delay?: number \| undefined; }` | No | `-` | Transition for updates. |
|
|
812
812
|
| `transitions` | `{ enter?: BarTransition \| null; enterOpacity?: BarTransition \| null \| undefined; update?: BarTransition \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 }, enterOpacity: { type: 'timing', duration: 200 }, update: { type: 'spring', stiffness: 900, damping: 120 } }}` | Transition configuration for enter and update animations. |
|
|
813
|
-
| `userSelect` | `
|
|
814
|
-
| `width` | `
|
|
813
|
+
| `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
|
|
814
|
+
| `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
815
815
|
| `xAxis` | `(Partial<CartesianAxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
|
|
816
816
|
| `yAxis` | `(Partial<CartesianAxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
|
|
817
817
|
| `zIndex` | `number` | No | `-` | - |
|
|
@@ -7,7 +7,7 @@ A selector component for choosing time periods in charts.
|
|
|
7
7
|
## Import
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
import { PeriodSelector } from '@coinbase/cds-mobile
|
|
10
|
+
import { PeriodSelector } from '@coinbase/cds-mobile/visualizations/chart'
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
@@ -178,7 +178,7 @@ function Example() {
|
|
|
178
178
|
|
|
179
179
|
const wrappedLabel =
|
|
180
180
|
typeof label === 'string' ? (
|
|
181
|
-
<Text font="label1"
|
|
181
|
+
<Text font="label1" style={{ color: isActive ? btcColor : theme.color.fg }}>
|
|
182
182
|
{label}
|
|
183
183
|
</Text>
|
|
184
184
|
) : (
|
|
@@ -221,7 +221,7 @@ function Example() {
|
|
|
221
221
|
| `TabComponent` | `TabComponent<string, TabValue<string>>` | No | `-` | The default Component to render each tab. |
|
|
222
222
|
| `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | The default Component to render the tabs active indicator. |
|
|
223
223
|
| `activeBackground` | `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 passed to the TabsActiveIndicatorComponent. |
|
|
224
|
-
| `alignContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly
|
|
224
|
+
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
225
225
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
226
226
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
227
227
|
| `animated` | `boolean` | No | `-` | - |
|
|
@@ -245,39 +245,39 @@ function Example() {
|
|
|
245
245
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
246
246
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
247
247
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
248
|
-
| `bottom` | `
|
|
248
|
+
| `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
249
249
|
| `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 | `-` | - |
|
|
250
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
250
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
251
251
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
252
252
|
| `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
|
|
253
|
-
| `display` | `none \|
|
|
253
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
254
254
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
255
|
-
| `flexBasis` | `
|
|
256
|
-
| `flexDirection` | `
|
|
255
|
+
| `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
256
|
+
| `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
|
|
257
257
|
| `flexGrow` | `number` | No | `-` | - |
|
|
258
258
|
| `flexShrink` | `number` | No | `-` | - |
|
|
259
259
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
260
260
|
| `font` | `inherit \| FontFamily` | No | `-` | - |
|
|
261
261
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
262
|
-
| `fontSize` | `
|
|
262
|
+
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
263
263
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
264
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
265
|
-
| `height` | `
|
|
264
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
265
|
+
| `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
266
266
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
267
267
|
| `key` | `Key \| null` | No | `-` | - |
|
|
268
|
-
| `left` | `
|
|
268
|
+
| `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
269
269
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
270
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
271
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
272
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
273
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
274
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
275
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
276
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
277
|
-
| `maxHeight` | `
|
|
278
|
-
| `maxWidth` | `
|
|
279
|
-
| `minHeight` | `
|
|
280
|
-
| `minWidth` | `
|
|
270
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
271
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
272
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
273
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
274
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
275
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
276
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
277
|
+
| `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
278
|
+
| `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
279
|
+
| `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
280
|
+
| `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
281
281
|
| `onActiveTabElementChange` | `((element: View \| null) => void)` | No | `-` | Optional callback to receive the active tab element. |
|
|
282
282
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
283
283
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -293,29 +293,29 @@ function Example() {
|
|
|
293
293
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
294
294
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
295
295
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
296
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
297
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
298
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
299
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
300
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
301
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
302
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
296
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
297
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
298
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
299
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
300
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
301
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
302
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
303
303
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
304
|
-
| `position` | `
|
|
305
|
-
| `ref` | `(
|
|
306
|
-
| `right` | `
|
|
307
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
308
|
-
| `style` | `false \| RegisteredStyle<ViewStyle> \|
|
|
304
|
+
| `position` | `absolute \| relative \| static` | No | `absolute` | - |
|
|
305
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| 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). |
|
|
306
|
+
| `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
307
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
308
|
+
| `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
309
309
|
| `styles` | `{ root?: StyleProp<ViewStyle>; tab?: StyleProp<ViewStyle>; activeIndicator?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the SegmentedTabs component |
|
|
310
|
-
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
310
|
+
| `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 Used to locate this view in end-to-end tests. |
|
|
311
311
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
312
312
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
313
|
-
| `textDecorationStyle` | `solid \|
|
|
313
|
+
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
314
314
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
315
|
-
| `top` | `
|
|
316
|
-
| `transform` | `string \| (({
|
|
317
|
-
| `userSelect` | `
|
|
318
|
-
| `width` | `
|
|
315
|
+
| `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
316
|
+
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
317
|
+
| `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
|
|
318
|
+
| `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
319
319
|
| `zIndex` | `number` | No | `-` | - |
|
|
320
320
|
|
|
321
321
|
|
|
@@ -40,9 +40,9 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
40
40
|
|
|
41
41
|
| Prop | Type | Required | Default | Description |
|
|
42
42
|
| --- | --- | --- | --- | --- |
|
|
43
|
-
| `name` | `key \|
|
|
43
|
+
| `name` | `key \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| loop \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| done \| cardSuccess \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
44
|
| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
|
-
| `fallback` | `ReactElement<
|
|
45
|
+
| `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
46
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
47
47
|
| `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 |
|
|
48
48
|
|
|
@@ -7,7 +7,7 @@ Visual markers that highlight specific data values on a chart. Points can be cus
|
|
|
7
7
|
## Import
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
import { Point } from '@coinbase/cds-mobile
|
|
10
|
+
import { Point } from '@coinbase/cds-mobile/visualizations/chart'
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
@@ -305,7 +305,7 @@ function ScatterplotWithCustomLabels() {
|
|
|
305
305
|
| `radius` | `number` | No | `5` | Radius of the point. |
|
|
306
306
|
| `stroke` | `string` | No | `theme.color.bg` | Color of the outer stroke around the point. |
|
|
307
307
|
| `strokeWidth` | `number` | No | `2` | Outer stroke width of the point. Set to 0 to remove the stroke. |
|
|
308
|
-
| `transition` | `{ type: timing; } & TimingConfig & { delay?: number \| undefined; } \| { type: spring; } & {
|
|
308
|
+
| `transition` | `{ type: timing; } & TimingConfig & { delay?: number \| undefined; } \| { type: spring; } & { mass?: number \| undefined; overshootClamping?: boolean \| undefined; energyThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { stiffness?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } & { delay?: number \| undefined; } \| { type: spring; } & { mass?: number \| undefined; overshootClamping?: boolean \| undefined; energyThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { stiffness?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; } & { delay?: number \| undefined; }` | No | `-` | Transition for updates. |
|
|
309
309
|
| `transitions` | `{ enter?: Transition \| null; update?: Transition \| null \| undefined; } \| undefined` | No | `-` | Transition configuration for enter and update animations. |
|
|
310
310
|
| `xAxisId` | `string` | No | `first x-axis defined in chart props.` | Optional X-axis id to specify which axis to plot along. |
|
|
311
311
|
| `yAxisId` | `string` | No | `first y-axis defined in chart props.` | Optional Y-axis id to specify which axis to plot along. |
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
**📖 Live documentation:** https://cds.coinbase.com/components/overlay/PortalProvider/?platform=mobile
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A required root-level provider that manages the registry of active CDS overlay components (Modal, Toast, Alert, Tooltip, Tray).
|
|
6
6
|
|
|
7
7
|
## Import
|
|
8
8
|
|
|
@@ -14,7 +14,7 @@ import { PortalProvider } from '@coinbase/cds-mobile/overlays/PortalProvider'
|
|
|
14
14
|
|
|
15
15
|
### Basic usage
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
Render PortalProvider once near the root of your application, to manage overlay components:
|
|
18
18
|
|
|
19
19
|
```tsx
|
|
20
20
|
function App() {
|