@coinbase/cds-mcp-server 8.44.0 → 8.44.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/Alert.txt +0 -1
- package/mcp-docs/mobile/components/AvatarButton.txt +0 -2
- package/mcp-docs/mobile/components/Button.txt +0 -2
- package/mcp-docs/mobile/components/Carousel.txt +23 -17
- package/mcp-docs/mobile/components/CheckboxCell.txt +5 -7
- package/mcp-docs/mobile/components/Chip.txt +3 -5
- package/mcp-docs/mobile/components/Collapsible.txt +0 -7
- package/mcp-docs/mobile/components/Combobox.txt +20 -20
- package/mcp-docs/mobile/components/ContentCell.txt +12 -12
- package/mcp-docs/mobile/components/DataCard.txt +5 -7
- package/mcp-docs/mobile/components/DotCount.txt +5 -5
- package/mcp-docs/mobile/components/Icon.txt +3 -10
- package/mcp-docs/mobile/components/IconButton.txt +0 -2
- package/mcp-docs/mobile/components/InputChip.txt +1 -3
- package/mcp-docs/mobile/components/ListCell.txt +18 -18
- package/mcp-docs/mobile/components/MediaCard.txt +6 -8
- package/mcp-docs/mobile/components/MediaChip.txt +1 -3
- package/mcp-docs/mobile/components/MessagingCard.txt +6 -8
- package/mcp-docs/mobile/components/Modal.txt +0 -1
- package/mcp-docs/mobile/components/NudgeCard.txt +0 -5
- package/mcp-docs/mobile/components/PageFooter.txt +0 -6
- package/mcp-docs/mobile/components/PageHeader.txt +5 -11
- package/mcp-docs/mobile/components/Pressable.txt +0 -2
- package/mcp-docs/mobile/components/ProgressBar.txt +4 -4
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +6 -6
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +5 -5
- package/mcp-docs/mobile/components/ProgressCircle.txt +8 -8
- package/mcp-docs/mobile/components/RadioCell.txt +5 -7
- package/mcp-docs/mobile/components/RollingNumber.txt +11 -11
- package/mcp-docs/mobile/components/SectionHeader.txt +0 -7
- package/mcp-docs/mobile/components/SelectAlpha.txt +20 -20
- package/mcp-docs/mobile/components/SelectChip.txt +1 -3
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +20 -20
- package/mcp-docs/mobile/components/SelectOption.txt +1 -1
- package/mcp-docs/mobile/components/SlideButton.txt +4 -6
- package/mcp-docs/mobile/components/Spacer.txt +0 -3
- package/mcp-docs/mobile/components/Stepper.txt +8 -8
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +2 -2
- package/mcp-docs/mobile/components/Tray.txt +15 -0
- package/mcp-docs/mobile/components/UpsellCard.txt +0 -1
- package/mcp-docs/web/components/Alert.txt +0 -1
- package/mcp-docs/web/components/AvatarButton.txt +0 -2
- package/mcp-docs/web/components/Banner.txt +22 -0
- package/mcp-docs/web/components/Button.txt +0 -2
- package/mcp-docs/web/components/Carousel.txt +36 -36
- package/mcp-docs/web/components/CheckboxCell.txt +5 -7
- package/mcp-docs/web/components/Chip.txt +4 -6
- package/mcp-docs/web/components/Collapsible.txt +0 -7
- package/mcp-docs/web/components/Combobox.txt +21 -21
- package/mcp-docs/web/components/ContentCell.txt +14 -14
- package/mcp-docs/web/components/DataCard.txt +5 -7
- package/mcp-docs/web/components/DotCount.txt +7 -7
- package/mcp-docs/web/components/FullscreenModal.txt +0 -1
- package/mcp-docs/web/components/FullscreenModalLayout.txt +0 -1
- package/mcp-docs/web/components/Icon.txt +4 -4
- package/mcp-docs/web/components/IconButton.txt +0 -2
- package/mcp-docs/web/components/InputChip.txt +2 -4
- package/mcp-docs/web/components/Link.txt +0 -2
- package/mcp-docs/web/components/ListCell.txt +16 -16
- package/mcp-docs/web/components/MediaCard.txt +6 -8
- package/mcp-docs/web/components/MediaChip.txt +2 -4
- package/mcp-docs/web/components/MessagingCard.txt +6 -8
- package/mcp-docs/web/components/Modal.txt +0 -1
- package/mcp-docs/web/components/PageFooter.txt +0 -6
- package/mcp-docs/web/components/PageHeader.txt +6 -12
- package/mcp-docs/web/components/Pressable.txt +0 -2
- package/mcp-docs/web/components/ProgressBar.txt +6 -6
- package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +8 -8
- package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +7 -7
- package/mcp-docs/web/components/ProgressCircle.txt +8 -8
- package/mcp-docs/web/components/RadioCell.txt +5 -7
- package/mcp-docs/web/components/ReferenceLine.txt +2 -2
- package/mcp-docs/web/components/RollingNumber.txt +12 -12
- package/mcp-docs/web/components/Scrubber.txt +6 -6
- package/mcp-docs/web/components/SelectAlpha.txt +21 -21
- package/mcp-docs/web/components/SelectChip.txt +2 -4
- package/mcp-docs/web/components/SelectChipAlpha.txt +21 -21
- package/mcp-docs/web/components/SelectOption.txt +2 -2
- package/mcp-docs/web/components/Sidebar.txt +6 -6
- package/mcp-docs/web/components/SidebarItem.txt +0 -2
- package/mcp-docs/web/components/Stepper.txt +9 -9
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +4 -4
- package/mcp-docs/web/components/TileButton.txt +0 -2
- package/mcp-docs/web/components/Tray.txt +17 -2
- package/mcp-docs/web/components/UpsellCard.txt +0 -1
- 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.44.2 ((2/10/2026, 08:38 AM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
15
|
+
## 8.44.1 ((2/10/2026, 12:05 PM PST))
|
|
16
|
+
|
|
17
|
+
This is an artificial version bump with no new change.
|
|
18
|
+
|
|
11
19
|
## 8.44.0 ((2/9/2026, 07:07 PM PST))
|
|
12
20
|
|
|
13
21
|
This is an artificial version bump with no new change.
|
|
@@ -153,6 +153,5 @@ function AlertOnModalExample() {
|
|
|
153
153
|
| `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
|
|
154
154
|
| `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | No | `-` | - |
|
|
155
155
|
| `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 |
|
|
156
|
-
| `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
|
|
157
156
|
|
|
158
157
|
|
|
@@ -127,7 +127,6 @@ AvatarButton can use fallback colors with names when no image source is provided
|
|
|
127
127
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
128
128
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
129
129
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
130
|
-
| `analyticsId` | `string` | No | `-` | - |
|
|
131
130
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
132
131
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
133
132
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -162,7 +161,6 @@ AvatarButton can use fallback colors with names when no image source is provided
|
|
|
162
161
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
|
|
163
162
|
| `display` | `flex \| none` | No | `-` | - |
|
|
164
163
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
165
|
-
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
166
164
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
167
165
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
168
166
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -233,7 +233,6 @@ A full-width primary action with a compact secondary option.
|
|
|
233
233
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
234
234
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
235
235
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
236
|
-
| `analyticsId` | `string` | No | `-` | - |
|
|
237
236
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
238
237
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
239
238
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -271,7 +270,6 @@ A full-width primary action with a compact secondary option.
|
|
|
271
270
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
|
|
272
271
|
| `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| menu \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the button. |
|
|
273
272
|
| `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
|
|
274
|
-
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
275
273
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
276
274
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
277
275
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -47,7 +47,7 @@ function MyCarousel() {
|
|
|
47
47
|
title="Explore Assets"
|
|
48
48
|
styles={{
|
|
49
49
|
root: { paddingHorizontal: theme.space[2] },
|
|
50
|
-
carousel: { gap: theme.space[
|
|
50
|
+
carousel: { gap: theme.space[2] },
|
|
51
51
|
}}
|
|
52
52
|
>
|
|
53
53
|
{Object.values(assets).map((asset) => (
|
|
@@ -76,10 +76,10 @@ Items can be given a width proportional to the carousel width.
|
|
|
76
76
|
:::tip Tip
|
|
77
77
|
|
|
78
78
|
If you have a gap between items or padding between the carousel and the edge of the screen,
|
|
79
|
-
you should account for that in the width. For example, if you have a gap of
|
|
79
|
+
you should account for that in the width. For example, if you have a gap of 16px,
|
|
80
80
|
and want to offset 16px from edge of screen, you could do
|
|
81
81
|
|
|
82
|
-
`<CarouselItem width={((screenWidth - (16 * 2)) -
|
|
82
|
+
`<CarouselItem width={((screenWidth - (16 * 2)) - 16) / 2} ... />`
|
|
83
83
|
|
|
84
84
|
:::
|
|
85
85
|
|
|
@@ -91,7 +91,7 @@ function DynamicSizingCarousel() {
|
|
|
91
91
|
const horizontalPadding = theme.space[2];
|
|
92
92
|
|
|
93
93
|
const carouselWidth = windowWidth - horizontalPadding * 2;
|
|
94
|
-
const horizontalGap = theme.space[
|
|
94
|
+
const horizontalGap = theme.space[2];
|
|
95
95
|
|
|
96
96
|
// 1 item per page - will rely on Carousel container's width
|
|
97
97
|
const oneItemWidth = '100%'; // Could alternatively use carouselWidth
|
|
@@ -166,7 +166,7 @@ function ResponsiveSizingCarousel() {
|
|
|
166
166
|
const horizontalPadding = theme.space[2];
|
|
167
167
|
|
|
168
168
|
const carouselWidth = windowWidth - horizontalPadding * 2;
|
|
169
|
-
const horizontalGap = theme.space[
|
|
169
|
+
const horizontalGap = theme.space[2];
|
|
170
170
|
|
|
171
171
|
// 1 item per page - will rely on Carousel container's width
|
|
172
172
|
const oneItemWidth = '100%'; // Could alternatively use carouselWidth
|
|
@@ -241,7 +241,7 @@ function VariedSizingCarousel() {
|
|
|
241
241
|
const horizontalPadding = theme.space[2];
|
|
242
242
|
|
|
243
243
|
const carouselWidth = windowWidth - horizontalPadding * 2;
|
|
244
|
-
const horizontalGap = theme.space[
|
|
244
|
+
const horizontalGap = theme.space[2];
|
|
245
245
|
|
|
246
246
|
// 1 item per page - will rely on Carousel container's width
|
|
247
247
|
const oneItemWidth = '100%'; // Could alternatively use carouselWidth
|
|
@@ -333,7 +333,7 @@ When set to `snap`, upon release the carousel will snap to either the nearest it
|
|
|
333
333
|
function DragCarousel() {
|
|
334
334
|
const theme = useTheme();
|
|
335
335
|
const horizontalPadding = theme.space[2];
|
|
336
|
-
const horizontalGap = theme.space[
|
|
336
|
+
const horizontalGap = theme.space[2];
|
|
337
337
|
|
|
338
338
|
return (
|
|
339
339
|
<Carousel
|
|
@@ -370,7 +370,7 @@ When set to `item`, the carousel will snap to the nearest item.
|
|
|
370
370
|
function SquareItemsCarousel() {
|
|
371
371
|
const theme = useTheme();
|
|
372
372
|
const horizontalPadding = theme.space[2];
|
|
373
|
-
const horizontalGap = theme.space[
|
|
373
|
+
const horizontalGap = theme.space[2];
|
|
374
374
|
|
|
375
375
|
return (
|
|
376
376
|
<Carousel
|
|
@@ -415,7 +415,7 @@ If you want to have the next item be shown at the edge of the screen, make sure
|
|
|
415
415
|
function OverflowCarousel() {
|
|
416
416
|
const theme = useTheme();
|
|
417
417
|
const horizontalPadding = theme.space[2];
|
|
418
|
-
const horizontalGap = theme.space[
|
|
418
|
+
const horizontalGap = theme.space[2];
|
|
419
419
|
|
|
420
420
|
return (
|
|
421
421
|
<Carousel
|
|
@@ -451,7 +451,7 @@ It is recommended to use pagination with autoplay so users know how many pages t
|
|
|
451
451
|
function AutoplayCarousel() {
|
|
452
452
|
const theme = useTheme();
|
|
453
453
|
const horizontalPadding = theme.space[2];
|
|
454
|
-
const horizontalGap = theme.space[
|
|
454
|
+
const horizontalGap = theme.space[2];
|
|
455
455
|
|
|
456
456
|
return (
|
|
457
457
|
<Carousel
|
|
@@ -482,7 +482,7 @@ function AutoplayCarousel() {
|
|
|
482
482
|
function CustomIntervalCarousel() {
|
|
483
483
|
const theme = useTheme();
|
|
484
484
|
const horizontalPadding = theme.space[2];
|
|
485
|
-
const horizontalGap = theme.space[
|
|
485
|
+
const horizontalGap = theme.space[2];
|
|
486
486
|
|
|
487
487
|
return (
|
|
488
488
|
<Carousel
|
|
@@ -518,7 +518,7 @@ Use `loop` to allow for infinite scrolling.
|
|
|
518
518
|
function LoopingCarousel() {
|
|
519
519
|
const theme = useTheme();
|
|
520
520
|
const horizontalPadding = theme.space[2];
|
|
521
|
-
const horizontalGap = theme.space[
|
|
521
|
+
const horizontalGap = theme.space[2];
|
|
522
522
|
|
|
523
523
|
return (
|
|
524
524
|
<Carousel
|
|
@@ -908,8 +908,14 @@ function ComposedAutoplayCarousel() {
|
|
|
908
908
|
const remainingTime = autoplay.getRemainingTime();
|
|
909
909
|
const progress = 1 - remainingTime / autoplay.totalTime;
|
|
910
910
|
const progressSpring = useSpring({
|
|
911
|
-
width:
|
|
912
|
-
|
|
911
|
+
width: showProgress
|
|
912
|
+
? autoplay.isPlaying
|
|
913
|
+
? theme.space[3]
|
|
914
|
+
: progress * theme.space[3]
|
|
915
|
+
: 0,
|
|
916
|
+
config:
|
|
917
|
+
showProgress && autoplay.isPlaying ? { duration: remainingTime } : { duration: 0 },
|
|
918
|
+
immediate: !showProgress,
|
|
913
919
|
});
|
|
914
920
|
|
|
915
921
|
return (
|
|
@@ -1065,7 +1071,7 @@ You can dynamically add and remove items from the carousel.
|
|
|
1065
1071
|
function DynamicContentCarousel() {
|
|
1066
1072
|
const theme = useTheme();
|
|
1067
1073
|
const horizontalPadding = theme.space[2];
|
|
1068
|
-
const horizontalGap = theme.space[
|
|
1074
|
+
const horizontalGap = theme.space[2];
|
|
1069
1075
|
const [items, setItems] = useState(Object.values(assets).slice(0, 3));
|
|
1070
1076
|
|
|
1071
1077
|
function addAsset() {
|
|
@@ -1117,7 +1123,7 @@ Note that this can prevent proper accessibility for the carousel, if carousel it
|
|
|
1117
1123
|
function HideNavigationAndPaginationCarousel() {
|
|
1118
1124
|
const theme = useTheme();
|
|
1119
1125
|
const horizontalPadding = theme.space[2];
|
|
1120
|
-
const horizontalGap = theme.space[
|
|
1126
|
+
const horizontalGap = theme.space[2];
|
|
1121
1127
|
|
|
1122
1128
|
return (
|
|
1123
1129
|
<Carousel
|
|
@@ -1241,7 +1247,7 @@ function ImperativeApiCarousel() {
|
|
|
1241
1247
|
snapMode="item"
|
|
1242
1248
|
styles={{
|
|
1243
1249
|
root: { paddingHorizontal: theme.space[3] },
|
|
1244
|
-
carousel: { gap: theme.space[
|
|
1250
|
+
carousel: { gap: theme.space[2] },
|
|
1245
1251
|
}}
|
|
1246
1252
|
title="Explore Assets"
|
|
1247
1253
|
>
|
|
@@ -88,7 +88,6 @@ function CustomCheckboxCellExample() {
|
|
|
88
88
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
89
89
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
90
90
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
91
|
-
| `analyticsId` | `string` | No | `-` | - |
|
|
92
91
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
93
92
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
94
93
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -124,7 +123,6 @@ function CustomCheckboxCellExample() {
|
|
|
124
123
|
| `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. |
|
|
125
124
|
| `display` | `flex \| none` | No | `-` | - |
|
|
126
125
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
127
|
-
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
128
126
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
129
127
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
130
128
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -205,10 +203,10 @@ function CustomCheckboxCellExample() {
|
|
|
205
203
|
|
|
206
204
|
| Selector | Static class name | Description |
|
|
207
205
|
| --- | --- | --- |
|
|
208
|
-
| `root` | `-` |
|
|
209
|
-
| `checkboxContainer` | `-` |
|
|
210
|
-
| `contentContainer` | `-` |
|
|
211
|
-
| `title` | `-` |
|
|
212
|
-
| `description` | `-` |
|
|
206
|
+
| `root` | `-` | Root element |
|
|
207
|
+
| `checkboxContainer` | `-` | Checkbox input container element |
|
|
208
|
+
| `contentContainer` | `-` | Content container element |
|
|
209
|
+
| `title` | `-` | Title text element |
|
|
210
|
+
| `description` | `-` | Description text element |
|
|
213
211
|
|
|
214
212
|
|
|
@@ -81,7 +81,6 @@ function Example() {
|
|
|
81
81
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
82
82
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
83
83
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
84
|
-
| `analyticsId` | `string` | No | `-` | - |
|
|
85
84
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
86
85
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
87
86
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -117,7 +116,6 @@ function Example() {
|
|
|
117
116
|
| `display` | `flex \| none` | No | `-` | - |
|
|
118
117
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
119
118
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
|
|
120
|
-
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
121
119
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
122
120
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
123
121
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -181,7 +179,7 @@ function Example() {
|
|
|
181
179
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
182
180
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed before the value |
|
|
183
181
|
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
184
|
-
| `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` |
|
|
182
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Chip component |
|
|
185
183
|
| `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 element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
186
184
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
187
185
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
@@ -201,7 +199,7 @@ function Example() {
|
|
|
201
199
|
|
|
202
200
|
| Selector | Static class name | Description |
|
|
203
201
|
| --- | --- | --- |
|
|
204
|
-
| `root` | `-` |
|
|
205
|
-
| `content` | `-` |
|
|
202
|
+
| `root` | `-` | Root element |
|
|
203
|
+
| `content` | `-` | Content element |
|
|
206
204
|
|
|
207
205
|
|
|
@@ -97,13 +97,6 @@ function Horizontal() {
|
|
|
97
97
|
| `key` | `Key \| null` | No | `-` | - |
|
|
98
98
|
| `maxHeight` | `number` | No | `-` | Max height of the content. Overflow content will be scrollable. |
|
|
99
99
|
| `maxWidth` | `number` | No | `-` | Max width of the content. Overflow content will be scrollable. |
|
|
100
|
-
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on all sides. |
|
|
101
|
-
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the bottom side. |
|
|
102
|
-
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the end side. |
|
|
103
|
-
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start side. |
|
|
104
|
-
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top side. |
|
|
105
|
-
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start and end sides. |
|
|
106
|
-
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top and bottom sides. |
|
|
107
100
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
108
101
|
| `scrollViewProps` | `ScrollViewProps` | No | `-` | RN ScrollView props. Use with caution as it might break default settings. |
|
|
109
102
|
| `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 |
|
|
@@ -276,7 +276,7 @@ function BorderlessExample() {
|
|
|
276
276
|
| `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
|
|
277
277
|
| `startNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
|
|
278
278
|
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Inline styles for the root element |
|
|
279
|
-
| `styles` | `{ root?: StyleProp<ViewStyle>; control?: StyleProp<ViewStyle>; controlStartNode?: StyleProp<ViewStyle>; controlInputNode?: StyleProp<ViewStyle>; controlValueNode?: StyleProp<ViewStyle>; controlLabelNode?: StyleProp<ViewStyle>; controlHelperTextNode?: StyleProp<ViewStyle>; controlEndNode?: StyleProp<ViewStyle>; controlBlendStyles?: InteractableBlendStyles; dropdown?: StyleProp<ViewStyle>; option?: StyleProp<ViewStyle>; optionCell?: StyleProp<ViewStyle>; optionContent?: StyleProp<ViewStyle>; optionLabel?: StyleProp<ViewStyle>; optionDescription?: StyleProp<ViewStyle>; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: StyleProp<ViewStyle>; emptyContentsContainer?: StyleProp<ViewStyle>; emptyContentsText?: StyleProp<ViewStyle>; optionGroup?: StyleProp<ViewStyle>; } \| undefined` | No | `-` | Custom styles for
|
|
279
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; control?: StyleProp<ViewStyle>; controlStartNode?: StyleProp<ViewStyle>; controlInputNode?: StyleProp<ViewStyle>; controlValueNode?: StyleProp<ViewStyle>; controlLabelNode?: StyleProp<ViewStyle>; controlHelperTextNode?: StyleProp<ViewStyle>; controlEndNode?: StyleProp<ViewStyle>; controlBlendStyles?: InteractableBlendStyles; dropdown?: StyleProp<ViewStyle>; option?: StyleProp<ViewStyle>; optionCell?: StyleProp<ViewStyle>; optionContent?: StyleProp<ViewStyle>; optionLabel?: StyleProp<ViewStyle>; optionDescription?: StyleProp<ViewStyle>; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: StyleProp<ViewStyle>; emptyContentsContainer?: StyleProp<ViewStyle>; emptyContentsText?: StyleProp<ViewStyle>; optionGroup?: StyleProp<ViewStyle>; } \| undefined` | No | `-` | Custom styles for individual elements of the Select component |
|
|
280
280
|
| `testID` | `string` | No | `-` | Test ID for the root element |
|
|
281
281
|
| `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
|
|
282
282
|
| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
|
|
@@ -286,25 +286,25 @@ function BorderlessExample() {
|
|
|
286
286
|
|
|
287
287
|
| Selector | Static class name | Description |
|
|
288
288
|
| --- | --- | --- |
|
|
289
|
-
| `root` | `-` |
|
|
290
|
-
| `control` | `-` |
|
|
291
|
-
| `controlStartNode` | `-` |
|
|
292
|
-
| `controlInputNode` | `-` |
|
|
293
|
-
| `controlValueNode` | `-` |
|
|
294
|
-
| `controlLabelNode` | `-` |
|
|
295
|
-
| `controlHelperTextNode` | `-` |
|
|
296
|
-
| `controlEndNode` | `-` |
|
|
289
|
+
| `root` | `-` | Root element |
|
|
290
|
+
| `control` | `-` | Control element |
|
|
291
|
+
| `controlStartNode` | `-` | Start node element |
|
|
292
|
+
| `controlInputNode` | `-` | Input node element |
|
|
293
|
+
| `controlValueNode` | `-` | Value node element |
|
|
294
|
+
| `controlLabelNode` | `-` | Label node element |
|
|
295
|
+
| `controlHelperTextNode` | `-` | Helper text node element |
|
|
296
|
+
| `controlEndNode` | `-` | End node element |
|
|
297
297
|
| `controlBlendStyles` | `-` | Blend styles for control interactivity |
|
|
298
|
-
| `dropdown` | `-` |
|
|
299
|
-
| `option` | `-` |
|
|
300
|
-
| `optionCell` | `-` |
|
|
301
|
-
| `optionContent` | `-` |
|
|
302
|
-
| `optionLabel` | `-` |
|
|
303
|
-
| `optionDescription` | `-` |
|
|
304
|
-
| `optionBlendStyles` | `-` |
|
|
305
|
-
| `selectAllDivider` | `-` |
|
|
306
|
-
| `emptyContentsContainer` | `-` |
|
|
307
|
-
| `emptyContentsText` | `-` |
|
|
308
|
-
| `optionGroup` | `-` |
|
|
298
|
+
| `dropdown` | `-` | Dropdown container element |
|
|
299
|
+
| `option` | `-` | Option element |
|
|
300
|
+
| `optionCell` | `-` | Option cell element |
|
|
301
|
+
| `optionContent` | `-` | Option content wrapper |
|
|
302
|
+
| `optionLabel` | `-` | Option label element |
|
|
303
|
+
| `optionDescription` | `-` | Option description element |
|
|
304
|
+
| `optionBlendStyles` | `-` | Option blend styles for interactivity |
|
|
305
|
+
| `selectAllDivider` | `-` | Select all divider element |
|
|
306
|
+
| `emptyContentsContainer` | `-` | Empty contents container element |
|
|
307
|
+
| `emptyContentsText` | `-` | Empty contents text element |
|
|
308
|
+
| `optionGroup` | `-` | Option group element |
|
|
309
309
|
|
|
310
310
|
|
|
@@ -267,7 +267,7 @@ The `ContentCellFallback` component provides loading state representations of `C
|
|
|
267
267
|
| `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
|
|
268
268
|
| `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) 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 var(--borderRadius-0) 4. subtitle uses label1 5. title wraps to 2 lines regardless of description content |
|
|
269
269
|
| `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 | `-` | - |
|
|
270
|
-
| `styles` | `{ root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; metaContainer?: StyleProp<ViewStyle>; meta?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | Styles for
|
|
270
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; metaContainer?: StyleProp<ViewStyle>; meta?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | Styles for subcomponents, ignored when the corresponding xxNode prop is used |
|
|
271
271
|
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subtitle of content. Max 1 line, otherwise will truncate. |
|
|
272
272
|
| `subtitleNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subtitle. Takes precedence over subtitle. When provided, styles.subtitle is not applied. |
|
|
273
273
|
| `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. 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 |
|
|
@@ -288,16 +288,16 @@ The `ContentCellFallback` component provides loading state representations of `C
|
|
|
288
288
|
|
|
289
289
|
| Selector | Static class name | Description |
|
|
290
290
|
| --- | --- | --- |
|
|
291
|
-
| `root` | `-` |
|
|
292
|
-
| `media` | `-` |
|
|
293
|
-
| `accessory` | `-` |
|
|
294
|
-
| `contentContainer` | `-` |
|
|
295
|
-
| `pressable` | `-` |
|
|
296
|
-
| `mainContent` | `-` |
|
|
297
|
-
| `title` | `-` |
|
|
298
|
-
| `subtitle` | `-` |
|
|
299
|
-
| `metaContainer` | `-` |
|
|
300
|
-
| `meta` | `-` |
|
|
301
|
-
| `description` | `-` |
|
|
291
|
+
| `root` | `-` | Root element |
|
|
292
|
+
| `media` | `-` | Media element |
|
|
293
|
+
| `accessory` | `-` | Accessory element |
|
|
294
|
+
| `contentContainer` | `-` | Content container element |
|
|
295
|
+
| `pressable` | `-` | Pressable wrapper element |
|
|
296
|
+
| `mainContent` | `-` | Main content element |
|
|
297
|
+
| `title` | `-` | Title text element |
|
|
298
|
+
| `subtitle` | `-` | Subtitle text element |
|
|
299
|
+
| `metaContainer` | `-` | Meta container element |
|
|
300
|
+
| `meta` | `-` | Meta text element |
|
|
301
|
+
| `description` | `-` | Description text element |
|
|
302
302
|
|
|
303
303
|
|
|
@@ -609,7 +609,6 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
609
609
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
610
610
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
611
611
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
612
|
-
| `analyticsId` | `string` | No | `-` | - |
|
|
613
612
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
614
613
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
615
614
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -643,7 +642,6 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
643
642
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
|
|
644
643
|
| `display` | `flex \| none` | No | `-` | - |
|
|
645
644
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
646
|
-
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
647
645
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
648
646
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
649
647
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -727,10 +725,10 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
727
725
|
|
|
728
726
|
| Selector | Static class name | Description |
|
|
729
727
|
| --- | --- | --- |
|
|
730
|
-
| `layoutContainer` | `-` |
|
|
731
|
-
| `headerContainer` | `-` |
|
|
732
|
-
| `textContainer` | `-` |
|
|
733
|
-
| `titleContainer` | `-` |
|
|
734
|
-
| `root` | `-` |
|
|
728
|
+
| `layoutContainer` | `-` | Layout container element |
|
|
729
|
+
| `headerContainer` | `-` | Header container element |
|
|
730
|
+
| `textContainer` | `-` | Text container element |
|
|
731
|
+
| `titleContainer` | `-` | Title container element |
|
|
732
|
+
| `root` | `-` | Root element |
|
|
735
733
|
|
|
736
734
|
|
|
@@ -137,8 +137,8 @@ function CustomizeStyle() {
|
|
|
137
137
|
| `max` | `number` | No | `99` | If a badge count is greater than max, it will truncate the numbers so its max+ |
|
|
138
138
|
| `overlap` | `circular` | No | `-` | Indicates what shape Dot is overlapping |
|
|
139
139
|
| `pin` | `top-end` | No | `-` | Position of dot relative to its parent |
|
|
140
|
-
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` |
|
|
141
|
-
| `styles` | `{ root?: StyleProp<ViewStyle>; container?: StyleProp<ViewStyle>; text?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the component
|
|
140
|
+
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
141
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; container?: StyleProp<ViewStyle>; text?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the DotCount component |
|
|
142
142
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
143
143
|
| `variant` | `negative` | No | `negative` | Background color of dot |
|
|
144
144
|
|
|
@@ -147,8 +147,8 @@ function CustomizeStyle() {
|
|
|
147
147
|
|
|
148
148
|
| Selector | Static class name | Description |
|
|
149
149
|
| --- | --- | --- |
|
|
150
|
-
| `root` | `-` |
|
|
151
|
-
| `container` | `-` |
|
|
152
|
-
| `text` | `-` |
|
|
150
|
+
| `root` | `-` | Root element |
|
|
151
|
+
| `container` | `-` | Container element |
|
|
152
|
+
| `text` | `-` | Text element |
|
|
153
153
|
|
|
154
154
|
|
|
@@ -49,16 +49,9 @@ Mobile apps cache font files in the native build, so you must rebuild your app a
|
|
|
49
49
|
| `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 | `primary` | Color of the icon when used as a foreground. |
|
|
50
50
|
| `dangerouslySetColor` | `string \| AnimatedInterpolation<string>` | No | `-` | - |
|
|
51
51
|
| `fallback` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `null` | Fallback element to render if unable to find an icon with matching name |
|
|
52
|
-
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on all sides. |
|
|
53
|
-
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the bottom side. |
|
|
54
|
-
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the end side. |
|
|
55
|
-
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start side. |
|
|
56
|
-
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top side. |
|
|
57
|
-
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start and end sides. |
|
|
58
|
-
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top and bottom sides. |
|
|
59
52
|
| `size` | `s \| l \| xs \| m` | No | `m` | Size for a given icon. |
|
|
60
53
|
| `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
|
|
61
|
-
| `styles` | `{ root?: StyleProp<ViewStyle>; icon?: StyleProp<TextStyle>; }` | No | `-` |
|
|
54
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; icon?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the Icon component |
|
|
62
55
|
| `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 |
|
|
63
56
|
|
|
64
57
|
|
|
@@ -66,7 +59,7 @@ Mobile apps cache font files in the native build, so you must rebuild your app a
|
|
|
66
59
|
|
|
67
60
|
| Selector | Static class name | Description |
|
|
68
61
|
| --- | --- | --- |
|
|
69
|
-
| `root` | `-` |
|
|
70
|
-
| `icon` | `-` |
|
|
62
|
+
| `root` | `-` | Outer Box wrapper element |
|
|
63
|
+
| `icon` | `-` | Inner icon glyph Text element |
|
|
71
64
|
|
|
72
65
|
|
|
@@ -246,7 +246,6 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
|
|
|
246
246
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
247
247
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
248
248
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
249
|
-
| `analyticsId` | `string` | No | `-` | - |
|
|
250
249
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
251
250
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
252
251
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -280,7 +279,6 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
|
|
|
280
279
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Mark the button as disabled. |
|
|
281
280
|
| `display` | `flex \| none` | No | `-` | - |
|
|
282
281
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
283
|
-
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
284
282
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
285
283
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
286
284
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -76,7 +76,6 @@ function Example() {
|
|
|
76
76
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
77
77
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
78
78
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
79
|
-
| `analyticsId` | `string` | No | `-` | - |
|
|
80
79
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
81
80
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
82
81
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -112,7 +111,6 @@ function Example() {
|
|
|
112
111
|
| `display` | `flex \| none` | No | `-` | - |
|
|
113
112
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
114
113
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
|
|
115
|
-
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
116
114
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
117
115
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
118
116
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -176,7 +174,7 @@ function Example() {
|
|
|
176
174
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
177
175
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed before the value |
|
|
178
176
|
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
179
|
-
| `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` |
|
|
177
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Chip component |
|
|
180
178
|
| `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 element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
181
179
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
182
180
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
@@ -755,7 +755,7 @@ Mapping to `styles` keys:
|
|
|
755
755
|
| `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
|
|
756
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 |
|
|
757
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 | `-` | - |
|
|
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 | `-` |
|
|
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 | `-` | Custom styles for individual elements of the Cell component Styles for subcomponents, ignored when the corresponding xxNode prop is used |
|
|
759
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. |
|
|
760
760
|
| `subdetailFont` | `inherit \| FontFamily` | No | `-` | Font to apply to the subdetail text. |
|
|
761
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. |
|
|
@@ -780,22 +780,22 @@ Mapping to `styles` keys:
|
|
|
780
780
|
|
|
781
781
|
| Selector | Static class name | Description |
|
|
782
782
|
| --- | --- | --- |
|
|
783
|
-
| `root` | `-` |
|
|
784
|
-
| `contentContainer` | `-` |
|
|
785
|
-
| `topContent` | `-` |
|
|
786
|
-
| `bottomContent` | `-` |
|
|
787
|
-
| `pressable` | `-` |
|
|
788
|
-
| `media` | `-` |
|
|
789
|
-
| `childrenContainer` | `-` |
|
|
790
|
-
| `intermediary` | `-` |
|
|
791
|
-
| `end` | `-` |
|
|
792
|
-
| `accessory` | `-` |
|
|
793
|
-
| `mainContent` | `-` |
|
|
794
|
-
| `titleStack` | `-` |
|
|
795
|
-
| `titleStackContainer` | `-` |
|
|
796
|
-
| `helperText` | `-` |
|
|
797
|
-
| `title` | `-` |
|
|
798
|
-
| `subtitle` | `-` |
|
|
799
|
-
| `description` | `-` |
|
|
783
|
+
| `root` | `-` | Root element |
|
|
784
|
+
| `contentContainer` | `-` | Content container element |
|
|
785
|
+
| `topContent` | `-` | Top content element |
|
|
786
|
+
| `bottomContent` | `-` | Bottom content element |
|
|
787
|
+
| `pressable` | `-` | Pressable wrapper element |
|
|
788
|
+
| `media` | `-` | Media element |
|
|
789
|
+
| `childrenContainer` | `-` | Children container wrapper, controls flex behavior |
|
|
790
|
+
| `intermediary` | `-` | Intermediary element |
|
|
791
|
+
| `end` | `-` | End element (detail or action container) End element |
|
|
792
|
+
| `accessory` | `-` | Accessory element |
|
|
793
|
+
| `mainContent` | `-` | Main content element |
|
|
794
|
+
| `titleStack` | `-` | Title stack element (title/subtitle/description VStack) |
|
|
795
|
+
| `titleStackContainer` | `-` | Title stack container wrapper, controls flex behavior |
|
|
796
|
+
| `helperText` | `-` | Helper text element |
|
|
797
|
+
| `title` | `-` | Title text element |
|
|
798
|
+
| `subtitle` | `-` | Subtitle text element |
|
|
799
|
+
| `description` | `-` | Description text element |
|
|
800
800
|
|
|
801
801
|
|