@coinbase/cds-mcp-server 8.36.0 β 8.36.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/mcp-docs/mobile/components/ListCell.txt +59 -45
- package/mcp-docs/mobile/components/SelectOption.txt +1 -1
- package/mcp-docs/mobile/getting-started/installation.txt +1 -1
- package/mcp-docs/mobile/getting-started/introduction.txt +6 -10
- package/mcp-docs/web/components/ListCell.txt +59 -45
- package/mcp-docs/web/components/SelectOption.txt +2 -2
- package/mcp-docs/web/getting-started/introduction.txt +6 -10
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.36.2 ((1/7/2026, 10:19 AM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
15
|
+
## 8.36.1 ((1/6/2026, 01:32 PM PST))
|
|
16
|
+
|
|
17
|
+
This is an artificial version bump with no new change.
|
|
18
|
+
|
|
11
19
|
## 8.36.0 (1/6/2026 PST)
|
|
12
20
|
|
|
13
21
|
#### π Updates
|
|
@@ -567,62 +567,76 @@ function PriorityContent() {
|
|
|
567
567
|
Without helper text (top-only layout):
|
|
568
568
|
|
|
569
569
|
```text
|
|
570
|
-
|
|
571
|
-
β root (Box)
|
|
572
|
-
|
|
573
|
-
ββ pressable
|
|
574
|
-
|
|
575
|
-
βββ contentContainer & mainContent (HStack)
|
|
576
|
-
βββ βββββββ
|
|
577
|
-
βββ βmediaβ β
|
|
578
|
-
βββ β β β
|
|
579
|
-
βββ β β β β
|
|
580
|
-
βββ β β β
|
|
581
|
-
βββ β β β
|
|
582
|
-
βββ β β β β
|
|
583
|
-
βββ β β β
|
|
584
|
-
βββ
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
570
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
571
|
+
β root (Box) β
|
|
572
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
573
|
+
ββ pressable ββ
|
|
574
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
575
|
+
βββ contentContainer & mainContent (HStack) βββ
|
|
576
|
+
βββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ βββ
|
|
577
|
+
βββ βmediaβ β titleStackContainer (Box) β βintermediaryβ β end β βaccessoryβ βββ
|
|
578
|
+
βββ β β β ββββββββββββββββββββββββββββ β β β β (detail β β β βββ
|
|
579
|
+
βββ β β β β titleStack (VStack) β β β β β or β β β βββ
|
|
580
|
+
βββ β β β β ββββββββββββ β β β β β action) β β β βββ
|
|
581
|
+
βββ β β β β β title β β β β β β β β β βββ
|
|
582
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
583
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
584
|
+
βββ β β β β β subtitle β β β β β β β β β βββ
|
|
585
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
586
|
+
βββ β β β β ββββββββββββββ β β β β β β β β βββ
|
|
587
|
+
βββ β β β β β descriptionβ β β β β β β β β βββ
|
|
588
|
+
βββ β β β β ββββββββββββββ β β β β β β β β βββ
|
|
589
|
+
βββ β β β ββββββββββββββββββββββββββββ β β β β β β β βββ
|
|
590
|
+
βββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ βββ
|
|
591
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
592
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
593
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
588
594
|
```
|
|
589
595
|
|
|
590
596
|
With helper text (top + bottom layout):
|
|
591
597
|
|
|
592
598
|
```text
|
|
593
|
-
|
|
594
|
-
β root (Box)
|
|
595
|
-
|
|
596
|
-
ββ pressable
|
|
597
|
-
|
|
598
|
-
βββ contentContainer (VStack)
|
|
599
|
-
|
|
600
|
-
ββββ mainContent (HStack)
|
|
601
|
-
ββββ βββββββ
|
|
602
|
-
ββββ βmediaβ β
|
|
603
|
-
ββββ β β β
|
|
604
|
-
ββββ β β β β
|
|
605
|
-
ββββ β β β
|
|
606
|
-
ββββ β β β
|
|
607
|
-
ββββ β β β β
|
|
608
|
-
ββββ β β β
|
|
609
|
-
ββββ
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
ββββ
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
599
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
600
|
+
β root (Box) β
|
|
601
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
602
|
+
ββ pressable ββ
|
|
603
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
604
|
+
βββ contentContainer (VStack) βββ
|
|
605
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
606
|
+
ββββ mainContent (HStack) ββββ
|
|
607
|
+
ββββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ ββββ
|
|
608
|
+
ββββ βmediaβ β titleStackContainer (Box) β βintermediaryβ β end β βaccessoryβ ββββ
|
|
609
|
+
ββββ β β β ββββββββββββββββββββββββββββ β β β β (detail β β β ββββ
|
|
610
|
+
ββββ β β β β titleStack (VStack) β β β β β or β β β ββββ
|
|
611
|
+
ββββ β β β β ββββββββββββ β β β β β action) β β β ββββ
|
|
612
|
+
ββββ β β β β β title β β β β β β β β β ββββ
|
|
613
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
614
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
615
|
+
ββββ β β β β β subtitle β β β β β β β β β ββββ
|
|
616
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
617
|
+
ββββ β β β β ββββββββββββββ β β β β β β β β ββββ
|
|
618
|
+
ββββ β β β β β descriptionβ β β β β β β β β ββββ
|
|
619
|
+
ββββ β β β β ββββββββββββββ β β β β β β β β ββββ
|
|
620
|
+
ββββ β β β ββββββββββββββββββββββββββββ β β β β β β β ββββ
|
|
621
|
+
ββββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ ββββ
|
|
622
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
623
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
624
|
+
ββββ helperText ββββ
|
|
625
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
626
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
627
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
628
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
617
629
|
```
|
|
618
630
|
|
|
619
|
-
Mapping to `styles`
|
|
631
|
+
Mapping to `styles` keys:
|
|
620
632
|
|
|
621
633
|
- root: outer `Box` wrapping the entire cell
|
|
622
634
|
- pressable: interactive overlay when `href` / `onPress` event handlers are present
|
|
623
635
|
- contentContainer: container around top and optional bottom content
|
|
624
636
|
- mainContent: inner horizontal layout that holds the main pieces
|
|
625
|
-
-
|
|
637
|
+
- titleStackContainer: wrapper around the title stack (controls flex behavior)
|
|
638
|
+
- titleStack: stacked text column (title/subtitle/description)
|
|
639
|
+
- title/subtitle/description: individual text nodes within `titleStack`
|
|
626
640
|
- media: leading media container
|
|
627
641
|
- intermediary: middle container between main and end
|
|
628
642
|
- end: container for `detail` / `subdetail` or `end` prop you pass in
|
|
@@ -741,7 +755,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
741
755
|
| `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
|
|
742
756
|
| `spacingVariant` | `compact \| normal \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
|
|
743
757
|
| `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 | `-` | - |
|
|
744
|
-
| `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
758
|
+
| `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; childrenContainer?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; titleStack?: StyleProp<ViewStyle>; titleStackContainer?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
745
759
|
| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subdetail providing more information. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subdetailNode. |
|
|
746
760
|
| `subdetailFont` | `inherit \| FontFamily` | No | `-` | Font to apply to the subdetail text. |
|
|
747
761
|
| `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
|
|
@@ -79,7 +79,7 @@ const SelectMobile = () => {
|
|
|
79
79
|
| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
|
|
80
80
|
| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
|
|
81
81
|
| `priority` | `end \| start \| middle \| (end \| start \| middle)[]` | No | `-` | Which piece of content has the highest priority in regards to text truncation, growing, and shrinking. |
|
|
82
|
-
| `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; }` | No | `-` | Styles for the components |
|
|
82
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; childrenContainer?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; }` | No | `-` | Styles for the components |
|
|
83
83
|
| `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 |
|
|
84
84
|
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use titleNode. |
|
|
85
85
|
|
|
@@ -26,7 +26,7 @@ For React Native projects, ensure you have set up your environment for React Nat
|
|
|
26
26
|
Render a ThemeProvider at the root of your application, and pass the `theme` and `activeColorScheme`.
|
|
27
27
|
|
|
28
28
|
```tsx
|
|
29
|
-
import { ThemeProvider } from '@coinbase/cds-mobile';
|
|
29
|
+
import { ThemeProvider } from '@coinbase/cds-mobile/system';
|
|
30
30
|
import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
|
|
31
31
|
import App from './App';
|
|
32
32
|
|
|
@@ -66,22 +66,18 @@ CDS is designed to make your development workflow as smooth as possible.
|
|
|
66
66
|
- **Extensive documentation** - Every component includes Storybook stories, interactive examples, detailed prop tables, and usage guidelines.
|
|
67
67
|
|
|
68
68
|
```jsx
|
|
69
|
-
import { ThemeProvider } from '@coinbase/cds-web';
|
|
69
|
+
import { ThemeProvider } from '@coinbase/cds-web/system';
|
|
70
70
|
import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
|
|
71
|
-
import {
|
|
71
|
+
import { VStack } from '@coinbase/cds-web/layout';
|
|
72
72
|
import { Text } from '@coinbase/cds-web/typography';
|
|
73
73
|
import { Button } from '@coinbase/cds-web/buttons';
|
|
74
74
|
|
|
75
75
|
const App = () => (
|
|
76
76
|
<ThemeProvider theme={defaultTheme} activeColorScheme="light">
|
|
77
|
-
<
|
|
78
|
-
<Text font="title1"
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<Button variant="positive" marginTop={2}>
|
|
82
|
-
Get started
|
|
83
|
-
</Button>
|
|
84
|
-
</Box>
|
|
77
|
+
<VStack gap={2} padding={4} background="bgSecondary" borderRadius={200}>
|
|
78
|
+
<Text font="title1">Welcome to CDS</Text>
|
|
79
|
+
<Button variant="positive">Get started</Button>
|
|
80
|
+
</VStack>
|
|
85
81
|
</ThemeProvider>
|
|
86
82
|
);
|
|
87
83
|
```
|
|
@@ -567,53 +567,65 @@ function PriorityContent() {
|
|
|
567
567
|
Without helper text (top-only layout):
|
|
568
568
|
|
|
569
569
|
```text
|
|
570
|
-
|
|
571
|
-
β root (Box)
|
|
572
|
-
|
|
573
|
-
ββ pressable
|
|
574
|
-
|
|
575
|
-
βββ contentContainer & mainContent (HStack)
|
|
576
|
-
βββ βββββββ
|
|
577
|
-
βββ βmediaβ β
|
|
578
|
-
βββ β β β
|
|
579
|
-
βββ β β β β
|
|
580
|
-
βββ β β β
|
|
581
|
-
βββ β β β
|
|
582
|
-
βββ β β β β
|
|
583
|
-
βββ β β β
|
|
584
|
-
βββ
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
570
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
571
|
+
β root (Box) β
|
|
572
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
573
|
+
ββ pressable ββ
|
|
574
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
575
|
+
βββ contentContainer & mainContent (HStack) βββ
|
|
576
|
+
βββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ βββ
|
|
577
|
+
βββ βmediaβ β titleStackContainer (Box) β βintermediaryβ β end β βaccessoryβ βββ
|
|
578
|
+
βββ β β β ββββββββββββββββββββββββββββ β β β β (detail β β β βββ
|
|
579
|
+
βββ β β β β titleStack (VStack) β β β β β or β β β βββ
|
|
580
|
+
βββ β β β β ββββββββββββ β β β β β action) β β β βββ
|
|
581
|
+
βββ β β β β β title β β β β β β β β β βββ
|
|
582
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
583
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
584
|
+
βββ β β β β β subtitle β β β β β β β β β βββ
|
|
585
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
586
|
+
βββ β β β β ββββββββββββββ β β β β β β β β βββ
|
|
587
|
+
βββ β β β β β descriptionβ β β β β β β β β βββ
|
|
588
|
+
βββ β β β β ββββββββββββββ β β β β β β β β βββ
|
|
589
|
+
βββ β β β ββββββββββββββββββββββββββββ β β β β β β β βββ
|
|
590
|
+
βββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ βββ
|
|
591
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
592
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
593
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
588
594
|
```
|
|
589
595
|
|
|
590
596
|
With helper text (top + bottom layout):
|
|
591
597
|
|
|
592
598
|
```text
|
|
593
|
-
|
|
594
|
-
β root (Box)
|
|
595
|
-
|
|
596
|
-
ββ pressable
|
|
597
|
-
|
|
598
|
-
βββ contentContainer (VStack)
|
|
599
|
-
|
|
600
|
-
ββββ mainContent (HStack)
|
|
601
|
-
ββββ βββββββ
|
|
602
|
-
ββββ βmediaβ β
|
|
603
|
-
ββββ β β β
|
|
604
|
-
ββββ β β β β
|
|
605
|
-
ββββ β β β
|
|
606
|
-
ββββ β β β
|
|
607
|
-
ββββ β β β β
|
|
608
|
-
ββββ β β β
|
|
609
|
-
ββββ
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
ββββ
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
599
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
600
|
+
β root (Box) β
|
|
601
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
602
|
+
ββ pressable ββ
|
|
603
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
604
|
+
βββ contentContainer (VStack) βββ
|
|
605
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
606
|
+
ββββ mainContent (HStack) ββββ
|
|
607
|
+
ββββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ ββββ
|
|
608
|
+
ββββ βmediaβ β titleStackContainer (Box) β βintermediaryβ β end β βaccessoryβ ββββ
|
|
609
|
+
ββββ β β β ββββββββββββββββββββββββββββ β β β β (detail β β β ββββ
|
|
610
|
+
ββββ β β β β titleStack (VStack) β β β β β or β β β ββββ
|
|
611
|
+
ββββ β β β β ββββββββββββ β β β β β action) β β β ββββ
|
|
612
|
+
ββββ β β β β β title β β β β β β β β β ββββ
|
|
613
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
614
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
615
|
+
ββββ β β β β β subtitle β β β β β β β β β ββββ
|
|
616
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
617
|
+
ββββ β β β β ββββββββββββββ β β β β β β β β ββββ
|
|
618
|
+
ββββ β β β β β descriptionβ β β β β β β β β ββββ
|
|
619
|
+
ββββ β β β β ββββββββββββββ β β β β β β β β ββββ
|
|
620
|
+
ββββ β β β ββββββββββββββββββββββββββββ β β β β β β β ββββ
|
|
621
|
+
ββββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ ββββ
|
|
622
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
623
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
624
|
+
ββββ helperText ββββ
|
|
625
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
626
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
627
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
628
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
617
629
|
```
|
|
618
630
|
|
|
619
631
|
Mapping to `styles` / `classNames` keys:
|
|
@@ -622,7 +634,9 @@ Mapping to `styles` / `classNames` keys:
|
|
|
622
634
|
- pressable: interactive overlay when `href` / `onClick` keyboard handlers are present
|
|
623
635
|
- contentContainer: container around top and optional bottom content
|
|
624
636
|
- mainContent: inner horizontal layout that holds the main pieces
|
|
625
|
-
-
|
|
637
|
+
- titleStackContainer: wrapper around the title stack (controls flex behavior)
|
|
638
|
+
- titleStack: stacked text column (title/subtitle/description)
|
|
639
|
+
- title/subtitle/description: individual text nodes within `titleStack`
|
|
626
640
|
- media: leading media container
|
|
627
641
|
- intermediary: middle container between main and end
|
|
628
642
|
- end: container for `detail` / `subdetail` or `end` prop you pass in
|
|
@@ -723,7 +737,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
723
737
|
| `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content |
|
|
724
738
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
|
|
725
739
|
| `className` | `string \| undefined` | No | `-` | - |
|
|
726
|
-
| `classNames` | `{ root?: string; media?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; contentContainer?: string \| undefined; pressable?: string \| undefined; mainContent?: string \| undefined; helperText?: string \| undefined; title?: string \| undefined; subtitle?: string \| undefined; description?: string \| undefined; } \| undefined` | No | `-` | Class names for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
740
|
+
| `classNames` | `{ root?: string; media?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; contentContainer?: string \| undefined; pressable?: string \| undefined; titleStack?: string \| undefined; titleStackContainer?: string \| undefined; mainContent?: string \| undefined; helperText?: string \| undefined; title?: string \| undefined; subtitle?: string \| undefined; description?: string \| undefined; } \| undefined` | No | `-` | Class names for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
727
741
|
| `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 | `-` | - |
|
|
728
742
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
729
743
|
| `compact` | `boolean` | No | `-` | - |
|
|
@@ -1000,7 +1014,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
1000
1014
|
| `spacingVariant` | `normal \| compact \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
|
|
1001
1015
|
| `spellCheck` | `Booleanish \| undefined` | No | `-` | - |
|
|
1002
1016
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
1003
|
-
| `styles` | `{ root?: CSSProperties; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; contentContainer?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; mainContent?: CSSProperties \| undefined; helperText?: CSSProperties \| undefined; title?: CSSProperties \| undefined; subtitle?: CSSProperties \| undefined; description?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
1017
|
+
| `styles` | `{ root?: CSSProperties; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; contentContainer?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; titleStack?: CSSProperties \| undefined; titleStackContainer?: CSSProperties \| undefined; mainContent?: CSSProperties \| undefined; helperText?: CSSProperties \| undefined; title?: CSSProperties \| undefined; subtitle?: CSSProperties \| undefined; description?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
1004
1018
|
| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subdetail providing more information. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subdetailNode. |
|
|
1005
1019
|
| `subdetailFont` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | Font to apply to the subdetail text. |
|
|
1006
1020
|
| `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
|
|
@@ -70,7 +70,7 @@ function DefaultSelect() {
|
|
|
70
70
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
71
71
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
72
72
|
| `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content |
|
|
73
|
-
| `classNames` | `{ root?: string; contentContainer?: string \| undefined; topContent?: string \| undefined; bottomContent?: string \| undefined; pressable?: string \| undefined; media?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; } \| undefined` | No | `-` | Class names for the components |
|
|
73
|
+
| `classNames` | `{ root?: string; contentContainer?: string \| undefined; topContent?: string \| undefined; bottomContent?: string \| undefined; pressable?: string \| undefined; media?: string \| undefined; childrenContainer?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; } \| undefined` | No | `-` | Class names for the components |
|
|
74
74
|
| `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 | `-` | - |
|
|
75
75
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
76
76
|
| `compact` | `boolean` | No | `-` | - |
|
|
@@ -149,7 +149,7 @@ function DefaultSelect() {
|
|
|
149
149
|
| `shouldOverflow` | `boolean` | No | `-` | - |
|
|
150
150
|
| `shouldTruncate` | `boolean` | No | `true` | Controls whether the main content should truncate with an ellipsis. Defaults to true (truncates) when not provided. |
|
|
151
151
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
152
|
-
| `styles` | `{ root?: CSSProperties; contentContainer?: CSSProperties \| undefined; topContent?: CSSProperties \| undefined; bottomContent?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for the components |
|
|
152
|
+
| `styles` | `{ root?: CSSProperties; contentContainer?: CSSProperties \| undefined; topContent?: CSSProperties \| undefined; bottomContent?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; media?: CSSProperties \| undefined; childrenContainer?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for the components |
|
|
153
153
|
| `tabIndex` | `number` | No | `-` | Necessary to control roving tabindex for accessibility https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex |
|
|
154
154
|
| `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 |
|
|
155
155
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
@@ -66,22 +66,18 @@ CDS is designed to make your development workflow as smooth as possible.
|
|
|
66
66
|
- **Extensive documentation** - Every component includes Storybook stories, interactive examples, detailed prop tables, and usage guidelines.
|
|
67
67
|
|
|
68
68
|
```jsx
|
|
69
|
-
import { ThemeProvider } from '@coinbase/cds-web';
|
|
69
|
+
import { ThemeProvider } from '@coinbase/cds-web/system';
|
|
70
70
|
import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
|
|
71
|
-
import {
|
|
71
|
+
import { VStack } from '@coinbase/cds-web/layout';
|
|
72
72
|
import { Text } from '@coinbase/cds-web/typography';
|
|
73
73
|
import { Button } from '@coinbase/cds-web/buttons';
|
|
74
74
|
|
|
75
75
|
const App = () => (
|
|
76
76
|
<ThemeProvider theme={defaultTheme} activeColorScheme="light">
|
|
77
|
-
<
|
|
78
|
-
<Text font="title1"
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<Button variant="positive" marginTop={2}>
|
|
82
|
-
Get started
|
|
83
|
-
</Button>
|
|
84
|
-
</Box>
|
|
77
|
+
<VStack gap={2} padding={4} background="bgSecondary" borderRadius={200}>
|
|
78
|
+
<Text font="title1">Welcome to CDS</Text>
|
|
79
|
+
<Button variant="positive">Get started</Button>
|
|
80
|
+
</VStack>
|
|
85
81
|
</ThemeProvider>
|
|
86
82
|
);
|
|
87
83
|
```
|