@coinbase/cds-mcp-server 8.43.2 → 8.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/mcp-docs/mobile/components/Alert.txt +1 -0
- package/mcp-docs/mobile/components/AvatarButton.txt +2 -0
- package/mcp-docs/mobile/components/Button.txt +2 -0
- package/mcp-docs/mobile/components/CheckboxCell.txt +2 -0
- package/mcp-docs/mobile/components/Chip.txt +2 -0
- package/mcp-docs/mobile/components/Collapsible.txt +7 -0
- package/mcp-docs/mobile/components/DataCard.txt +2 -0
- package/mcp-docs/mobile/components/Icon.txt +7 -0
- package/mcp-docs/mobile/components/IconButton.txt +2 -0
- package/mcp-docs/mobile/components/InputChip.txt +2 -0
- package/mcp-docs/mobile/components/MediaCard.txt +2 -0
- package/mcp-docs/mobile/components/MediaChip.txt +2 -0
- package/mcp-docs/mobile/components/MessagingCard.txt +2 -0
- package/mcp-docs/mobile/components/Modal.txt +1 -0
- package/mcp-docs/mobile/components/NudgeCard.txt +5 -0
- package/mcp-docs/mobile/components/PageFooter.txt +6 -0
- package/mcp-docs/mobile/components/PageHeader.txt +6 -0
- package/mcp-docs/mobile/components/Pressable.txt +2 -0
- package/mcp-docs/mobile/components/RadioCell.txt +2 -0
- package/mcp-docs/mobile/components/SectionHeader.txt +7 -0
- package/mcp-docs/mobile/components/SelectChip.txt +9 -5
- package/mcp-docs/mobile/components/SlideButton.txt +2 -0
- package/mcp-docs/mobile/components/Spacer.txt +3 -0
- package/mcp-docs/mobile/components/Tray.txt +717 -133
- package/mcp-docs/mobile/components/UpsellCard.txt +1 -0
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/Alert.txt +1 -0
- package/mcp-docs/web/components/AvatarButton.txt +9 -7
- package/mcp-docs/web/components/Box.txt +6 -6
- package/mcp-docs/web/components/Button.txt +9 -7
- package/mcp-docs/web/components/CheckboxCell.txt +2 -0
- package/mcp-docs/web/components/Chip.txt +2 -0
- package/mcp-docs/web/components/Collapsible.txt +7 -0
- package/mcp-docs/web/components/ContentCard.txt +6 -6
- package/mcp-docs/web/components/ContentCardBody.txt +6 -6
- package/mcp-docs/web/components/ContentCardFooter.txt +6 -6
- package/mcp-docs/web/components/ContentCardHeader.txt +6 -6
- package/mcp-docs/web/components/ContentCell.txt +6 -6
- package/mcp-docs/web/components/DataCard.txt +2 -0
- package/mcp-docs/web/components/Fallback.txt +6 -6
- package/mcp-docs/web/components/FullscreenModal.txt +1 -0
- package/mcp-docs/web/components/FullscreenModalLayout.txt +1 -0
- package/mcp-docs/web/components/Grid.txt +6 -6
- package/mcp-docs/web/components/GridColumn.txt +6 -6
- package/mcp-docs/web/components/HStack.txt +6 -6
- package/mcp-docs/web/components/IconButton.txt +9 -7
- package/mcp-docs/web/components/InputChip.txt +2 -0
- package/mcp-docs/web/components/Interactable.txt +7 -7
- package/mcp-docs/web/components/Link.txt +8 -6
- package/mcp-docs/web/components/ListCell.txt +6 -6
- package/mcp-docs/web/components/MediaCard.txt +2 -0
- package/mcp-docs/web/components/MediaChip.txt +2 -0
- package/mcp-docs/web/components/MessagingCard.txt +2 -0
- package/mcp-docs/web/components/Modal.txt +1 -0
- package/mcp-docs/web/components/MultiContentModule.txt +6 -6
- package/mcp-docs/web/components/PageFooter.txt +6 -0
- package/mcp-docs/web/components/PageHeader.txt +6 -0
- package/mcp-docs/web/components/Pressable.txt +9 -7
- package/mcp-docs/web/components/RadioCell.txt +2 -0
- package/mcp-docs/web/components/RollingNumber.txt +6 -6
- package/mcp-docs/web/components/SelectChip.txt +2 -0
- package/mcp-docs/web/components/SidebarItem.txt +2 -0
- package/mcp-docs/web/components/Spacer.txt +6 -6
- package/mcp-docs/web/components/Text.txt +6 -6
- package/mcp-docs/web/components/TileButton.txt +9 -7
- package/mcp-docs/web/components/Tray.txt +1032 -155
- package/mcp-docs/web/components/UpsellCard.txt +1 -0
- package/mcp-docs/web/components/VStack.txt +6 -6
- package/mcp-docs/web/routes.txt +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.44.0 ((2/9/2026, 07:07 PM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
11
15
|
## 8.43.2 ((2/9/2026, 09:05 AM PST))
|
|
12
16
|
|
|
13
17
|
This is an artificial version bump with no new change.
|
|
@@ -153,5 +153,6 @@ 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. |
|
|
156
157
|
|
|
157
158
|
|
|
@@ -127,6 +127,7 @@ 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 | `-` | - |
|
|
130
131
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
131
132
|
| `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). |
|
|
132
133
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -161,6 +162,7 @@ AvatarButton can use fallback colors with names when no image source is provided
|
|
|
161
162
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
|
|
162
163
|
| `display` | `flex \| none` | No | `-` | - |
|
|
163
164
|
| `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 | `-` | - |
|
|
164
166
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
165
167
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
166
168
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -233,6 +233,7 @@ 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 | `-` | - |
|
|
236
237
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
237
238
|
| `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). |
|
|
238
239
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -270,6 +271,7 @@ A full-width primary action with a compact secondary option.
|
|
|
270
271
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
|
|
271
272
|
| `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. |
|
|
272
273
|
| `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
|
|
274
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
273
275
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
274
276
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
275
277
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -88,6 +88,7 @@ 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 | `-` | - |
|
|
91
92
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
92
93
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
93
94
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -123,6 +124,7 @@ function CustomCheckboxCellExample() {
|
|
|
123
124
|
| `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. |
|
|
124
125
|
| `display` | `flex \| none` | No | `-` | - |
|
|
125
126
|
| `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 | `-` | - |
|
|
126
128
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
127
129
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
128
130
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -81,6 +81,7 @@ 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 | `-` | - |
|
|
84
85
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
85
86
|
| `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). |
|
|
86
87
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -116,6 +117,7 @@ function Example() {
|
|
|
116
117
|
| `display` | `flex \| none` | No | `-` | - |
|
|
117
118
|
| `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. |
|
|
118
119
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
|
|
120
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
119
121
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
120
122
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
121
123
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -97,6 +97,13 @@ 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. |
|
|
100
107
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
101
108
|
| `scrollViewProps` | `ScrollViewProps` | No | `-` | RN ScrollView props. Use with caution as it might break default settings. |
|
|
102
109
|
| `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 |
|
|
@@ -609,6 +609,7 @@ 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 | `-` | - |
|
|
612
613
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
613
614
|
| `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). |
|
|
614
615
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -642,6 +643,7 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
642
643
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
|
|
643
644
|
| `display` | `flex \| none` | No | `-` | - |
|
|
644
645
|
| `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 | `-` | - |
|
|
645
647
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
646
648
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
647
649
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -49,6 +49,13 @@ 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. |
|
|
52
59
|
| `size` | `s \| l \| xs \| m` | No | `m` | Size for a given icon. |
|
|
53
60
|
| `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 | `-` | - |
|
|
54
61
|
| `styles` | `{ root?: StyleProp<ViewStyle>; icon?: StyleProp<TextStyle>; }` | No | `-` | - |
|
|
@@ -246,6 +246,7 @@ 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 | `-` | - |
|
|
249
250
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
250
251
|
| `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). |
|
|
251
252
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -279,6 +280,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
|
|
|
279
280
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Mark the button as disabled. |
|
|
280
281
|
| `display` | `flex \| none` | No | `-` | - |
|
|
281
282
|
| `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 | `-` | - |
|
|
282
284
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
283
285
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
284
286
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -76,6 +76,7 @@ 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 | `-` | - |
|
|
79
80
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
80
81
|
| `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). |
|
|
81
82
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -111,6 +112,7 @@ function Example() {
|
|
|
111
112
|
| `display` | `flex \| none` | No | `-` | - |
|
|
112
113
|
| `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. |
|
|
113
114
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
|
|
115
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
114
116
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
115
117
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
116
118
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -411,6 +411,7 @@ Replace `FloatingAssetCard` with `MediaCard`. Note that the floating variation (
|
|
|
411
411
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
412
412
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
413
413
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
414
|
+
| `analyticsId` | `string` | No | `-` | - |
|
|
414
415
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
415
416
|
| `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). |
|
|
416
417
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -444,6 +445,7 @@ Replace `FloatingAssetCard` with `MediaCard`. Note that the floating variation (
|
|
|
444
445
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
|
|
445
446
|
| `display` | `flex \| none` | No | `-` | - |
|
|
446
447
|
| `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. |
|
|
448
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
447
449
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
448
450
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
449
451
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -157,6 +157,7 @@ You can override the automatic spacing with custom values if needed.
|
|
|
157
157
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
158
158
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
159
159
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
160
|
+
| `analyticsId` | `string` | No | `-` | - |
|
|
160
161
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
161
162
|
| `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). |
|
|
162
163
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -192,6 +193,7 @@ You can override the automatic spacing with custom values if needed.
|
|
|
192
193
|
| `display` | `flex \| none` | No | `-` | - |
|
|
193
194
|
| `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. |
|
|
194
195
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
|
|
196
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
195
197
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
196
198
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
197
199
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -907,6 +907,7 @@ Replace `UpsellCard` with `MessagingCard` using `type="upsell"`.
|
|
|
907
907
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
908
908
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
909
909
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
910
|
+
| `analyticsId` | `string` | No | `-` | - |
|
|
910
911
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
911
912
|
| `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). |
|
|
912
913
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -942,6 +943,7 @@ Replace `UpsellCard` with `MessagingCard` using `type="upsell"`.
|
|
|
942
943
|
| `dismissButtonAccessibilityLabel` | `string` | No | `'Dismiss {title}' when title is a string, otherwise 'Dismiss card'` | Accessibility label for the dismiss button. |
|
|
943
944
|
| `display` | `flex \| none` | No | `-` | - |
|
|
944
945
|
| `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. |
|
|
946
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
945
947
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
946
948
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
947
949
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -79,5 +79,6 @@ function Example() {
|
|
|
79
79
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this view in end-to-end tests. |
|
|
80
80
|
| `transparent` | `boolean` | No | `-` | The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background. |
|
|
81
81
|
| `width` | `number` | No | `-` | - |
|
|
82
|
+
| `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
|
|
82
83
|
|
|
83
84
|
|
|
@@ -72,11 +72,16 @@ function Example() {
|
|
|
72
72
|
| Prop | Type | Required | Default | Description |
|
|
73
73
|
| --- | --- | --- | --- | --- |
|
|
74
74
|
| `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to display as the call to action |
|
|
75
|
+
| `aspectRatio` | `auto \| inherit \| string & {} \| -moz-initial \| initial \| revert \| revert-layer \| unset \| number & {}` | No | `-` | The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an elements box |
|
|
75
76
|
| `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 | `bgAlternate` | Background color for the card. |
|
|
76
77
|
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed below the title in a TextBody |
|
|
78
|
+
| `height` | `string \| number` | No | `-` | Set a fixed height. |
|
|
79
|
+
| `maxHeight` | `string \| number` | No | `-` | Set a maximum height. |
|
|
80
|
+
| `maxWidth` | `string \| number` | No | `-` | Set a maximum width. |
|
|
77
81
|
| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Pass any node to be rendered to the right of the text content |
|
|
78
82
|
| `mediaPosition` | `left \| right` | No | `right` | Set the media position for the pictogram or media. |
|
|
79
83
|
| `minHeight` | `string \| number` | No | `160` | - |
|
|
84
|
+
| `minWidth` | `string \| number` | No | `-` | Set a minimum width. |
|
|
80
85
|
| `numberOfLines` | `number` | No | `3` | Maximum number of lines shown for the title and description text. Text that exceeds will be truncated. |
|
|
81
86
|
| `onActionPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | - |
|
|
82
87
|
| `onDismissPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | - |
|
|
@@ -93,6 +93,7 @@ function StyledFooter() {
|
|
|
93
93
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
94
94
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
95
95
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
96
|
+
| `bottom` | `string \| number` | No | `-` | Position the box to the bottom edge. |
|
|
96
97
|
| `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 | `-` | - |
|
|
97
98
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
98
99
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
@@ -111,6 +112,7 @@ function StyledFooter() {
|
|
|
111
112
|
| `height` | `string \| number` | No | `-` | - |
|
|
112
113
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
113
114
|
| `key` | `Key \| null` | No | `-` | - |
|
|
115
|
+
| `left` | `string \| number` | No | `-` | Position the box to the left edge. |
|
|
114
116
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
115
117
|
| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
116
118
|
| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
@@ -145,7 +147,9 @@ function StyledFooter() {
|
|
|
145
147
|
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
146
148
|
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
147
149
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
150
|
+
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | How to position the box within its parent. |
|
|
148
151
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
152
|
+
| `right` | `string \| number` | No | `-` | Position the box to the right edge. |
|
|
149
153
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
150
154
|
| `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 | `-` | - |
|
|
151
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 Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
@@ -153,8 +157,10 @@ function StyledFooter() {
|
|
|
153
157
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
154
158
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
155
159
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
160
|
+
| `top` | `string \| number` | No | `-` | Position the box to the top edge. |
|
|
156
161
|
| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
157
162
|
| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
|
|
158
163
|
| `width` | `string \| number` | No | `-` | - |
|
|
164
|
+
| `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
|
|
159
165
|
|
|
160
166
|
|
|
@@ -116,6 +116,7 @@ function Example() {
|
|
|
116
116
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
117
117
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
118
118
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
119
|
+
| `bottom` | `string \| number` | No | `-` | Position the box to the bottom edge. |
|
|
119
120
|
| `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 | `-` | - |
|
|
120
121
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
121
122
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
@@ -135,6 +136,7 @@ function Example() {
|
|
|
135
136
|
| `height` | `string \| number` | No | `-` | - |
|
|
136
137
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
137
138
|
| `key` | `Key \| null` | No | `-` | - |
|
|
139
|
+
| `left` | `string \| number` | No | `-` | Position the box to the left edge. |
|
|
138
140
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
139
141
|
| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
140
142
|
| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
|
|
@@ -169,7 +171,9 @@ function Example() {
|
|
|
169
171
|
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
170
172
|
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
171
173
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
174
|
+
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | How to position the box within its parent. |
|
|
172
175
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
176
|
+
| `right` | `string \| number` | No | `-` | Position the box to the right edge. |
|
|
173
177
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
174
178
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional. Accepts a ReactNode. Used for placing primary content on the left side of the page header, such as a header title, logo, or icon button. |
|
|
175
179
|
| `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 | `-` | - |
|
|
@@ -180,9 +184,11 @@ function Example() {
|
|
|
180
184
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
181
185
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
182
186
|
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional. Accepts a ReactNode. Intended for main title within the Page Header or for secondary content in the center of the header, like a navigation stepper or search bar. |
|
|
187
|
+
| `top` | `string \| number` | No | `-` | Position the box to the top edge. |
|
|
183
188
|
| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
184
189
|
| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
|
|
185
190
|
| `width` | `string \| number` | No | `-` | - |
|
|
191
|
+
| `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
|
|
186
192
|
|
|
187
193
|
|
|
188
194
|
## Styles
|
|
@@ -85,6 +85,7 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
|
|
|
85
85
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
86
86
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
87
87
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
88
|
+
| `analyticsId` | `string` | No | `-` | - |
|
|
88
89
|
| `android_disableSound` | `boolean \| null` | No | `-` | If true, doesnt play system sound on touch. |
|
|
89
90
|
| `android_ripple` | `PressableAndroidRippleConfig \| null` | No | `-` | Enables the Android ripple effect and configures its color. |
|
|
90
91
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
@@ -124,6 +125,7 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
|
|
|
124
125
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
|
|
125
126
|
| `display` | `flex \| none` | No | `-` | - |
|
|
126
127
|
| `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. |
|
|
128
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
127
129
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
128
130
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
129
131
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -88,6 +88,7 @@ function CustomRadioCellExample() {
|
|
|
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 | `-` | - |
|
|
91
92
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
92
93
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
93
94
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -123,6 +124,7 @@ function CustomRadioCellExample() {
|
|
|
123
124
|
| `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. Whether the press behavior is disabled. |
|
|
124
125
|
| `display` | `flex \| none` | No | `-` | - |
|
|
125
126
|
| `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 | `-` | - |
|
|
126
128
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
127
129
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
128
130
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -197,6 +197,13 @@ Note: The mobile version of SectionHeader is optimized for touch interactions an
|
|
|
197
197
|
| `icon` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null` | No | `-` | - |
|
|
198
198
|
| `iconActive` | `boolean` | No | `-` | Whether the icon is active |
|
|
199
199
|
| `key` | `Key \| null` | No | `-` | - |
|
|
200
|
+
| `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. |
|
|
201
|
+
| `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. |
|
|
202
|
+
| `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. |
|
|
203
|
+
| `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. |
|
|
204
|
+
| `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. |
|
|
205
|
+
| `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. |
|
|
206
|
+
| `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. |
|
|
200
207
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
201
208
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
|
|
202
209
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
@@ -186,6 +186,7 @@ function SelectChipExample() {
|
|
|
186
186
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
187
187
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
188
188
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
189
|
+
| `analyticsId` | `string` | No | `-` | - |
|
|
189
190
|
| `animated` | `boolean` | No | `-` | - |
|
|
190
191
|
| `animationType` | `none \| slide \| fade` | No | `-` | The animationType prop controls how the modal animates. - slide slides in from the bottom - fade fades into view - none appears without an animation |
|
|
191
192
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
@@ -223,6 +224,7 @@ function SelectChipExample() {
|
|
|
223
224
|
| `display` | `flex \| none` | No | `-` | - |
|
|
224
225
|
| `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. |
|
|
225
226
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
|
|
227
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
226
228
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
227
229
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
228
230
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -233,13 +235,15 @@ function SelectChipExample() {
|
|
|
233
235
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
234
236
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
235
237
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
236
|
-
| `footer` | `
|
|
238
|
+
| `footer` | `ReactNode \| TrayRenderChildren` | No | `-` | Component to render as the Tray footer |
|
|
237
239
|
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
238
240
|
| `handleBarAccessibilityLabel` | `string` | No | `-` | Accessibility label for handlebar |
|
|
241
|
+
| `handleBarVariant` | `inside \| outside` | No | `'outside'` | The HandleBar can be rendered inside or outside the drawer, when pinned to bottom. |
|
|
239
242
|
| `hardwareAccelerated` | `boolean` | No | `-` | Controls whether to force hardware acceleration for the underlying window. |
|
|
240
|
-
| `header` | `
|
|
243
|
+
| `header` | `ReactNode \| TrayRenderChildren` | No | `-` | Component to render as the Tray header |
|
|
244
|
+
| `headerElevation` | `0 \| 1 \| 2` | No | `-` | Elevation level for the header area (includes title and header content). Use this to add a drop shadow below the header when content is scrolled. |
|
|
241
245
|
| `height` | `string \| number` | No | `-` | - |
|
|
242
|
-
| `hideHandleBar` | `boolean` | No |
|
|
246
|
+
| `hideHandleBar` | `boolean` | No | `-` | The HandleBar by default only is used for a bottom pinned drawer. This removes it. |
|
|
243
247
|
| `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
244
248
|
| `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
245
249
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
@@ -294,8 +298,8 @@ function SelectChipExample() {
|
|
|
294
298
|
| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
|
|
295
299
|
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
296
300
|
| `presentationStyle` | `fullScreen \| pageSheet \| formSheet \| overFullScreen` | No | `-` | The presentationStyle determines the style of modal to show |
|
|
297
|
-
| `preventDismissGestures` | `boolean` | No |
|
|
298
|
-
| `preventHardwareBackBehaviorAndroid` | `boolean` | No |
|
|
301
|
+
| `preventDismissGestures` | `boolean` | No | `-` | Prevents a user from dismissing the drawer by pressing the overlay or swiping |
|
|
302
|
+
| `preventHardwareBackBehaviorAndroid` | `boolean` | No | `-` | Prevents a user from dismissing the drawer by pressing hardware back button on Android |
|
|
299
303
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
300
304
|
| `right` | `string \| number` | No | `-` | - |
|
|
301
305
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
@@ -231,6 +231,7 @@ function Example() {
|
|
|
231
231
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
232
232
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
233
233
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
234
|
+
| `analyticsId` | `string` | No | `-` | - |
|
|
234
235
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
235
236
|
| `autoCompleteSlideOnThresholdMet` | `boolean` | No | `-` | If true, the slide button will automatically complete the slide when the threshold is met. If false, the user must release to complete the action. |
|
|
236
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). |
|
|
@@ -269,6 +270,7 @@ function Example() {
|
|
|
269
270
|
| `display` | `flex \| none` | No | `-` | - |
|
|
270
271
|
| `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. |
|
|
271
272
|
| `endCheckedNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom end node to render for the checked state of the handle, to replace the default loading indicator. |
|
|
273
|
+
| `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
|
|
272
274
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
273
275
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
274
276
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
@@ -59,6 +59,9 @@ import { Spacer } from '@coinbase/cds-mobile/layout/Spacer'
|
|
|
59
59
|
| Prop | Type | Required | Default | Description |
|
|
60
60
|
| --- | --- | --- | --- | --- |
|
|
61
61
|
| `animated` | `boolean` | No | `-` | - |
|
|
62
|
+
| `flexBasis` | `string \| number` | No | `-` | Sets the initial main flex size. |
|
|
63
|
+
| `flexGrow` | `number` | No | `-` | Set the grow factor of this flex item. |
|
|
64
|
+
| `flexShrink` | `number` | No | `-` | Set the shrink factor of this flex item. |
|
|
62
65
|
| `horizontal` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Padding in the horizontal direction |
|
|
63
66
|
| `maxHorizontal` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Max padding in the horizontal direction |
|
|
64
67
|
| `maxVertical` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Max padding in the vertical direction |
|