From 4a0f47d74eca08ed354735b880d2c0c06c9e798c Mon Sep 17 00:00:00 2001 From: Hassan Malik <41640681+hmalik88@users.noreply.github.com> Date: Thu, 16 Mar 2023 10:39:25 -0400 Subject: [PATCH 1/5] [FLASK] Add hardcoded derivation paths (#18176) * added allowlisted protocol snap's derivation paths * added missing path --- shared/constants/snaps.ts | 92 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 91 insertions(+), 1 deletion(-) diff --git a/shared/constants/snaps.ts b/shared/constants/snaps.ts index 7d6d0ea530fc..6a272cbb8ed0 100644 --- a/shared/constants/snaps.ts +++ b/shared/constants/snaps.ts @@ -52,13 +52,103 @@ type SnapsDerivationPath = { export const SNAPS_DERIVATION_PATHS: SnapsDerivationPath[] = [ { path: ['m', `44'`, `0'`], + curve: 'ed25519', + name: 'Test BIP-32 Path (ed25519)', + }, + { + path: ['m', `44'`, `1'`], curve: 'secp256k1', name: 'Test BIP-32 Path (secp256k1)', }, { path: ['m', `44'`, `0'`], + curve: 'secp256k1', + name: 'Bitcoin Legacy', + }, + { + path: ['m', `49'`, `0'`], + curve: 'secp256k1', + name: 'Bitcoin Nested SegWit', + }, + { + path: ['m', `49'`, `1'`], + curve: 'secp256k1', + name: 'Bitcoin Testnet Nested SegWit', + }, + { + path: ['m', `84'`, `0'`], + curve: 'secp256k1', + name: 'Bitcoin Native SegWit', + }, + { + path: ['m', `84'`, `1'`], + curve: 'secp256k1', + name: 'Bitcoin Testnet Native SegWit', + }, + { + path: ['m', `44'`, `501'`], + curve: 'secp256k1', + name: 'Solana', + }, + { + path: ['m', `44'`, `2'`], + curve: 'secp256k1', + name: 'Litecoin', + }, + { + path: ['m', `44'`, `3'`], + curve: 'secp256k1', + name: 'Dogecoin', + }, + { + path: ['m', `44'`, `60'`], + curve: 'secp256k1', + name: 'Ethereum', + }, + { + path: ['m', `44'`, `118'`], + curve: 'secp256k1', + name: 'Atom', + }, + { + path: ['m', `44'`, `145'`], + curve: 'secp256k1', + name: 'Bitcoin Cash', + }, + { + path: ['m', `44'`, `714'`], + curve: 'secp256k1', + name: 'Binance (BNB)', + }, + { + path: ['m', `44'`, `931'`], + curve: 'secp256k1', + name: 'THORChain (RUNE)', + }, + { + path: ['m', `44'`, `330'`], + curve: 'secp256k1', + name: 'Terra (LUNA)', + }, + { + path: ['m', `44'`, `459'`], + curve: 'secp256k1', + name: 'Kava', + }, + { + path: ['m', `44'`, `529'`], + curve: 'secp256k1', + name: 'Secret Network', + }, + { + path: ['m', `44'`, `397'`], curve: 'ed25519', - name: 'Test BIP-32 Path (ed25519)', + name: 'NEAR Protocol', + }, + { + path: ['m', `44'`, `1'`, `0'`], + curve: 'ed25519', + name: 'NEAR Protocol Testnet', }, ]; ///: END:ONLY_INCLUDE_IN From 2ccc51516b4425e0af7e2d426150d23212c32508 Mon Sep 17 00:00:00 2001 From: mirjanaKukic <94608179+mirjanaKukic@users.noreply.github.com> Date: Thu, 16 Mar 2023 16:03:03 +0100 Subject: [PATCH 2/5] add e2e test for onboarding flow (#15122) * add e2e test for onboarding flow * Add method to test if we create a new wallet * fix code * editng code * Add test if import wrong SRP * fix test * add test where we chack if user select diffrent type of SRP * update test for checking if user select different SRP * update code * add test for if user enter wrong password in confirm password field * add two test to verify if user is on correct page after import wallet * update cod * lint fix * fix code to test pass * fix code * improve code * change completeCreateNewWalletOnboardingFlow function parameters and update code * delete unnecessary wait --------- Co-authored-by: dzfjz <120640011+dzfjz@users.noreply.github.com> Co-authored-by: dzfjz --- test/e2e/helpers.js | 89 +++++++++++++ test/e2e/tests/onboarding.spec.js | 215 ++++++++++++++++++++++++++++++ 2 files changed, 304 insertions(+) diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js index 4efd0ba1b0cf..231fa0b57c99 100644 --- a/test/e2e/helpers.js +++ b/test/e2e/helpers.js @@ -1,3 +1,4 @@ +const { strict: assert } = require('assert'); const path = require('path'); const { promises: fs } = require('fs'); const BigNumber = require('bignumber.js'); @@ -289,6 +290,91 @@ const completeImportSRPOnboardingFlowWordByWord = async ( await driver.clickElement('[data-testid="pin-extension-done"]'); }; +const completeCreateNewWalletOnboardingFlow = async (driver, password) => { + // welcome + await driver.clickElement('[data-testid="onboarding-create-wallet"]'); + + // metrics + await driver.clickElement('[data-testid="metametrics-no-thanks"]'); + + // create password + await driver.fill('[data-testid="create-password-new"]', password); + await driver.fill('[data-testid="create-password-confirm"]', password); + await driver.clickElement('[data-testid="create-password-terms"]'); + await driver.clickElement('[data-testid="create-password-wallet"]'); + + // secure my wallet + await driver.clickElement('[data-testid="secure-wallet-recommended"]'); + + // reveal SRP + await driver.clickElement('[data-testid="recovery-phrase-reveal"]'); + + const revealedSeedPhrase = await driver.findElement( + '[data-testid="recovery-phrase-chips"]', + ); + + const recoveryPhrase = await revealedSeedPhrase.getText(); + + await driver.clickElement('[data-testid="recovery-phrase-next"]'); + + // confirm SRP + const words = recoveryPhrase.split(/\s*(?:[0-9)]+|\n|\.|^$|$)\s*/u); + const finalWords = words.filter((str) => str !== ''); + assert.equal(finalWords.length, 12); + + await driver.fill('[data-testid="recovery-phrase-input-2"]', finalWords[2]); + await driver.fill('[data-testid="recovery-phrase-input-3"]', finalWords[3]); + await driver.fill('[data-testid="recovery-phrase-input-7"]', finalWords[7]); + + await driver.clickElement('[data-testid="confirm-recovery-phrase"]'); + + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // complete + await driver.findElement({ text: 'Wallet creation successful', tag: 'h2' }); + await driver.clickElement('[data-testid="onboarding-complete-done"]'); + + // pin extension + await driver.clickElement('[data-testid="pin-extension-next"]'); + await driver.clickElement('[data-testid="pin-extension-done"]'); +}; + +const importWrongSRPOnboardingFlow = async (driver, seedPhrase) => { + // welcome + await driver.clickElement('[data-testid="onboarding-import-wallet"]'); + + // metrics + await driver.clickElement('[data-testid="metametrics-no-thanks"]'); + + // import with recovery phrase + await driver.pasteIntoField( + '[data-testid="import-srp__srp-word-0"]', + seedPhrase, + ); + + const warningText = 'Invalid Secret Recovery Phrase'; + const warnings = await driver.findElements('.actionable-message__message'); + const warning = warnings[1]; + + assert.equal(await warning.getText(), warningText); +}; + +const selectDropdownByNum = async (elements, index) => { + await elements[index].click(); +}; + +const testSRPDropdownIterations = async (options, driver, iterations) => { + for (let i = 0; i < iterations; i++) { + await selectDropdownByNum(options, i); + await new Promise((resolve) => setTimeout(resolve, 1000)); + + const formFields = await driver.findElements('.import-srp__srp-word-label'); + const expectedNumFields = 12 + i * 3; + const actualNumFields = formFields.length; + assert.equal(actualNumFields, expectedNumFields); + } +}; + module.exports = { getWindowHandles, convertToHexValue, @@ -300,5 +386,8 @@ module.exports = { importSRPOnboardingFlow, completeImportSRPOnboardingFlow, completeImportSRPOnboardingFlowWordByWord, + completeCreateNewWalletOnboardingFlow, createDownloadFolder, + importWrongSRPOnboardingFlow, + testSRPDropdownIterations, }; diff --git a/test/e2e/tests/onboarding.spec.js b/test/e2e/tests/onboarding.spec.js index 3430c3efc723..2c4b8e6bbe69 100644 --- a/test/e2e/tests/onboarding.spec.js +++ b/test/e2e/tests/onboarding.spec.js @@ -1,8 +1,13 @@ const { strict: assert } = require('assert'); +const { By } = require('selenium-webdriver'); const { convertToHexValue, withFixtures, + completeCreateNewWalletOnboardingFlow, + completeImportSRPOnboardingFlow, importSRPOnboardingFlow, + importWrongSRPOnboardingFlow, + testSRPDropdownIterations, } = require('../helpers'); const FixtureBuilder = require('../fixture-builder'); @@ -10,6 +15,10 @@ describe('MetaMask onboarding', function () { const testSeedPhrase = 'forum vessel pink push lonely enact gentle tail admit parrot grunt dress'; const testPassword = 'correct horse battery staple'; + const wrongSeedPhrase = + 'test test test test test test test test test test test test'; + const wrongTestPassword = 'test test test test'; + const ganacheOptions = { accounts: [ { @@ -19,6 +28,212 @@ describe('MetaMask onboarding', function () { }, ], }; + + it('Clicks create a new wallet, accepts a secure password, reveals the Secret Recovery Phrase, confirm SRP', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions, + title: this.test.title, + failOnConsoleError: false, + }, + async ({ driver }) => { + await driver.navigate(); + + await completeCreateNewWalletOnboardingFlow(driver, testPassword); + + const homePage = await driver.findElement('.home__main-view'); + const homePageDisplayed = await homePage.isDisplayed(); + + assert.equal(homePageDisplayed, true); + }, + ); + }); + + it('Clicks import a new wallet, accepts a secure password, reveals the Secret Recovery Phrase, confirm SRP', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions, + title: this.test.title, + failOnConsoleError: false, + }, + async ({ driver }) => { + await driver.navigate(); + + await completeImportSRPOnboardingFlow( + driver, + testSeedPhrase, + testPassword, + ); + + const homePage = await driver.findElement('.home__main-view'); + const homePageDisplayed = await homePage.isDisplayed(); + + assert.equal(homePageDisplayed, true); + }, + ); + }); + + it('User import wrong Secret Recovery Phrase', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions, + title: this.test.title, + failOnConsoleError: false, + }, + async ({ driver }) => { + await driver.navigate(); + + await importWrongSRPOnboardingFlow(driver, wrongSeedPhrase); + + const confirmSeedPhrase = await driver.findElement( + '[data-testid="import-srp-confirm"]', + ); + + assert.equal(await confirmSeedPhrase.isEnabled(), false); + }, + ); + }); + + it('Check if user select different type of secret recovery phrase', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions, + title: this.test.title, + failOnConsoleError: false, + }, + async ({ driver }) => { + await driver.navigate(); + + // welcome + await driver.clickElement('[data-testid="onboarding-import-wallet"]'); + + await driver.clickElement('[data-testid="metametrics-no-thanks"]'); + + const dropdowns = await driver.findElements('select'); + const dropdownElement = dropdowns[1]; + await dropdownElement.click(); + const options = await dropdownElement.findElements( + By.tagName('option'), + ); + + const iterations = options.length; + + await testSRPDropdownIterations(options, driver, iterations); + + const finalFormFields = await driver.findElements( + '.import-srp__srp-word-label', + ); + const expectedFinalNumFields = 24; // The last iteration will have 24 fields + const actualFinalNumFields = finalFormFields.length; + assert.equal(actualFinalNumFields, expectedFinalNumFields); + }, + ); + }); + + it('User enters the wrong password during password creation', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions, + title: this.test.title, + failOnConsoleError: false, + }, + async ({ driver }) => { + await driver.navigate(); + + await driver.clickElement('[data-testid="onboarding-create-wallet"]'); + + // metrics + await driver.clickElement('[data-testid="metametrics-no-thanks"]'); + + // Fill in confirm password field with incorrect password + await driver.fill('[data-testid="create-password-new"]', testPassword); + await driver.fill( + '[data-testid="create-password-confirm"]', + wrongTestPassword, + ); + + // Check that the error message is displayed for the password fields + await driver.isElementPresent( + // eslint-disable-next-line prettier/prettier + { text: 'Passwords don\'t match', tag: 'h6' }, + true, + ); + + // Check that the "Confirm Password" button is disabled + const confirmPasswordButton = await driver.findElement( + '[data-testid="create-password-wallet"]', + ); + assert.equal(await confirmPasswordButton.isEnabled(), false); + }, + ); + }); + + it('Verify that the user has been redirected to the correct page after importing their wallet', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions, + title: this.test.title, + failOnConsoleError: false, + }, + async ({ driver }) => { + await driver.navigate(); + + await importSRPOnboardingFlow(driver, testSeedPhrase, testPassword); + // Verify site + assert.equal( + await driver.isElementPresent({ + text: 'Wallet creation successful', + tag: 'h2', + }), + true, + ); + }, + ); + }); + + it('Verify that the user has been redirected to the correct page after creating a password for their new wallet', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions, + title: this.test.title, + failOnConsoleError: false, + }, + async ({ driver }) => { + await driver.navigate(); + + await driver.clickElement('[data-testid="onboarding-create-wallet"]'); + + // metrics + await driver.clickElement('[data-testid="metametrics-no-thanks"]'); + + // Fill in confirm password field with correct password + await driver.fill('[data-testid="create-password-new"]', testPassword); + await driver.fill( + '[data-testid="create-password-confirm"]', + testPassword, + ); + await driver.clickElement('[data-testid="create-password-terms"]'); + await driver.clickElement('[data-testid="create-password-wallet"]'); + + // Verify site + assert.equal( + await driver.isElementPresent({ + text: 'Secure your wallet', + tag: 'h2', + }), + true, + ); + }, + ); + }); + const ganacheOptions2 = { accounts: [ { From 8ee6ece28cb977c74b07c5023b1797ee5d4ef335 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Thu, 16 Mar 2023 10:34:57 -0700 Subject: [PATCH 3/5] Expanding storybook controls with proptype descriptions (#18159) --- .storybook/preview.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.storybook/preview.js b/.storybook/preview.js index 4a74eb33db6f..fb15f8569ed5 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -38,6 +38,9 @@ addParameters({ ], }, }, + controls: { + expanded: true, + }, }); export const globalTypes = { From d7f7d9c7066a0761bffcc9ccc82c9282e0a7fb8a Mon Sep 17 00:00:00 2001 From: George Marshall Date: Thu, 16 Mar 2023 13:18:00 -0700 Subject: [PATCH 4/5] Box types update (#18160) --- .../avatar-base/avatar-base.js | 6 +- .../avatar-favicon/avatar-favicon.js | 2 +- .../avatar-icon/avatar-icon.js | 4 +- .../avatar-network/avatar-network.js | 6 +- .../avatar-token/avatar-token.js | 6 +- .../badge-wrapper/badge-wrapper.stories.tsx | 33 +- .../badge-wrapper/badge-wrapper.types.ts | 6 +- ui/components/ui/box/README.mdx | 75 ++-- ui/components/ui/box/box.d.ts | 357 ++++++++++++++---- .../box/{box.stories.js => box.stories.tsx} | 251 +++++------- .../ui/box/{box.test.js => box.test.tsx} | 0 ui/components/ui/card/README.mdx | 8 +- ui/components/ui/card/card.js | 42 +-- ui/components/ui/card/card.stories.js | 11 - ui/helpers/constants/design-system.ts | 1 + 15 files changed, 463 insertions(+), 345 deletions(-) rename ui/components/ui/box/{box.stories.js => box.stories.tsx} (80%) rename ui/components/ui/box/{box.test.js => box.test.tsx} (100%) diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.js index cbaf77792cd1..8b6da1f0ed6f 100644 --- a/ui/components/component-library/avatar-base/avatar-base.js +++ b/ui/components/component-library/avatar-base/avatar-base.js @@ -46,17 +46,17 @@ AvatarBase.propTypes = { * The background color of the AvatarBase * Defaults to Color.backgroundAlternative */ - backgroundColor: Box.propTypes.backgroundColor, + backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)), /** * The background color of the AvatarBase * Defaults to Color.borderDefault */ - borderColor: Box.propTypes.borderColor, + borderColor: PropTypes.oneOf(Object.values(BorderColor)), /** * The color of the text inside the AvatarBase * Defaults to TextColor.textDefault */ - color: Box.propTypes.color, + color: PropTypes.oneOf(Object.values(TextColor)), /** * Additional classNames to be added to the AvatarToken */ diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js index c06b7220fd61..8400d0dfe051 100644 --- a/ui/components/component-library/avatar-favicon/avatar-favicon.js +++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js @@ -76,7 +76,7 @@ AvatarFavicon.propTypes = { * The border color of the AvatarFavicon * Defaults to Color.transparent */ - borderColor: Box.propTypes.borderColor, + borderColor: PropTypes.oneOf(Object.values(BorderColor)), /** * Additional classNames to be added to the AvatarFavicon */ diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js index cdb235f3f38f..415cd1bfa165 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.js @@ -70,12 +70,12 @@ AvatarIcon.propTypes = { * The background color of the AvatarIcon * Defaults to BackgroundColor.primaryMuted */ - backgroundColor: Box.propTypes.backgroundColor, + backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)), /** * The color of the text inside the AvatarIcon * Defaults to TextColor.primaryDefault */ - color: Box.propTypes.color, + color: PropTypes.oneOf(Object.values(TextColor)), /** * Additional classNames to be added to the AvatarIcon */ diff --git a/ui/components/component-library/avatar-network/avatar-network.js b/ui/components/component-library/avatar-network/avatar-network.js index 90dbc5d9a2d4..f32001c52b18 100644 --- a/ui/components/component-library/avatar-network/avatar-network.js +++ b/ui/components/component-library/avatar-network/avatar-network.js @@ -102,17 +102,17 @@ AvatarNetwork.propTypes = { * The background color of the AvatarNetwork * Defaults to BackgroundColor.backgroundAlternative */ - backgroundColor: Box.propTypes.backgroundColor, + backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)), /** * The background color of the AvatarNetwork * Defaults to BorderColor.borderDefault */ - borderColor: Box.propTypes.borderColor, + borderColor: PropTypes.oneOf(Object.values(BorderColor)), /** * The color of the text inside the AvatarNetwork * Defaults to TextColor.textDefault */ - color: Box.propTypes.color, + color: PropTypes.oneOf(Object.values(TextColor)), /** * Additional classNames to be added to the AvatarNetwork */ diff --git a/ui/components/component-library/avatar-token/avatar-token.js b/ui/components/component-library/avatar-token/avatar-token.js index ef970c2f5cef..cd0f47ad42fc 100644 --- a/ui/components/component-library/avatar-token/avatar-token.js +++ b/ui/components/component-library/avatar-token/avatar-token.js @@ -102,17 +102,17 @@ AvatarToken.propTypes = { * The background color of the AvatarToken * Defaults to Color.backgroundAlternative */ - backgroundColor: Box.propTypes.backgroundColor, + backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)), /** * The background color of the AvatarToken * Defaults to Color.borderDefault */ - borderColor: Box.propTypes.borderColor, + borderColor: PropTypes.oneOf(Object.values(BorderColor)), /** * The color of the text inside the AvatarToken * Defaults to Color.textDefault */ - color: Box.propTypes.color, + color: PropTypes.oneOf(Object.values(TextColor)), /** * Additional classNames to be added to the AvatarToken */ diff --git a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx index 6ae9c9dce3d6..e2cf48034e73 100644 --- a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx +++ b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx @@ -3,9 +3,10 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; import { AlignItems, + TextColor, BorderColor, BorderRadius, - Color, + BackgroundColor, DISPLAY, IconColor, Size, @@ -155,7 +156,7 @@ export const Badge = () => ( ( paddingBottom={1} paddingRight={1} paddingLeft={1} - backgroundColor={Color.backgroundAlternative} + backgroundColor={BackgroundColor.backgroundAlternative} borderRadius={BorderRadius.SM} style={{ alignSelf: 'flex-start' }} > @@ -182,8 +183,8 @@ export const Badge = () => ( badge={ } @@ -196,7 +197,7 @@ export const Badge = () => ( paddingLeft={8} borderRadius={BorderRadius.SM} borderColor={BorderColor.borderDefault} - backgroundColor={Color.backgroundDefault} + backgroundColor={BackgroundColor.backgroundDefault} > NFTs @@ -284,14 +285,14 @@ export const AnchorElementShape = () => ( } > @@ -299,14 +300,14 @@ export const AnchorElementShape = () => ( } > @@ -315,14 +316,14 @@ export const AnchorElementShape = () => ( anchorElementShape={BadgeWrapperAnchorElementShape.rectangular} badge={ } > @@ -330,14 +331,14 @@ export const AnchorElementShape = () => ( anchorElementShape={BadgeWrapperAnchorElementShape.rectangular} badge={ } > @@ -345,14 +346,14 @@ export const AnchorElementShape = () => ( anchorElementShape={BadgeWrapperAnchorElementShape.rectangular} badge={ } > diff --git a/ui/components/component-library/badge-wrapper/badge-wrapper.types.ts b/ui/components/component-library/badge-wrapper/badge-wrapper.types.ts index 223fb3561d78..3ff416c02ef1 100644 --- a/ui/components/component-library/badge-wrapper/badge-wrapper.types.ts +++ b/ui/components/component-library/badge-wrapper/badge-wrapper.types.ts @@ -1,5 +1,3 @@ -import PropTypes from 'prop-types'; -import Box from '../../ui/box'; import type { BoxProps } from '../../ui/box/box.d'; export enum BadgeWrapperPosition { @@ -14,9 +12,7 @@ export enum BadgeWrapperAnchorElementShape { circular = 'circular', } -export interface BadgeWrapperProps - extends PropTypes.InferProps, - React.HTMLAttributes { +export interface BadgeWrapperProps extends BoxProps { /** * The element to be wrapped by the BadgeWrapper and for the badge to be positioned on top of */ diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx index c4a0a2ef6e1c..aa0a4e65f255 100644 --- a/ui/components/ui/box/README.mdx +++ b/ui/components/ui/box/README.mdx @@ -1,4 +1,4 @@ -import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import { Story, Canvas } from '@storybook/addon-docs'; import ActionableMessage from '../actionable-message'; @@ -14,43 +14,42 @@ Box is a utility component that can be used for layout or as a base for other UI ## Props -| Name | Description | Default | -| ------------------ | ------------------------------------------------------------------------------------------------------------------------- | ------- | -| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - | -| className | Additional className of the Box component | - | -| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - | -| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | -| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | -| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | -| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | -| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | -| marginInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | -| marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | -| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | - -| display | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| flexDirection | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FLEX_DIRECTION.ROW | -| flexWrap | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| width | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| height | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | -| borderRadius | BorderRadius values or array of BorderRadius values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | -| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' | +| Name | Description | Default | +| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | +| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - | +| className | Additional className of the Box component | - | +| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - | +| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | +| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | +| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | +| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | +| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | +| marginInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | +| marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | +| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| display | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| flexDirection | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FLEX_DIRECTION.ROW | +| flexWrap | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| width | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| height | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | +| borderRadius | BorderRadius values or array of BorderRadius values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | +| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' | ## Usage diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts index 4c91a50e508e..4b40d37c9a80 100644 --- a/ui/components/ui/box/box.d.ts +++ b/ui/components/ui/box/box.d.ts @@ -18,53 +18,45 @@ import { export type BoxChildren = React.ReactNode | ((...args: any[]) => any); -export type BoxFlexDirection = typeof FLEX_DIRECTION; +export type BoxFlexDirection = + | typeof FLEX_DIRECTION[keyof typeof FLEX_DIRECTION] + | null; export type BoxFlexDirectionArray = [ - BoxFlexDirection[keyof BoxFlexDirection], - BoxFlexDirection[keyof BoxFlexDirection]?, - BoxFlexDirection[keyof BoxFlexDirection]?, - BoxFlexDirection[keyof BoxFlexDirection]?, + BoxFlexDirection, + BoxFlexDirection?, + BoxFlexDirection?, + BoxFlexDirection?, ]; -export type BoxFlexWrap = typeof FLEX_WRAP; +export type BoxFlexWrap = typeof FLEX_WRAP[keyof typeof FLEX_WRAP] | null; export type BoxFlexWrapArray = [ - BoxFlexWrap[keyof BoxFlexWrap], - BoxFlexWrap[keyof BoxFlexWrap]?, - BoxFlexWrap[keyof BoxFlexWrap]?, - BoxFlexWrap[keyof BoxFlexWrap]?, + BoxFlexWrap, + BoxFlexWrap?, + BoxFlexWrap?, + BoxFlexWrap?, ]; -export type BoxTextAlign = typeof TEXT_ALIGN; +export type BoxTextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN] | null; export type BoxTextAlignArray = [ - BoxTextAlign[keyof BoxTextAlign], - BoxTextAlign[keyof BoxTextAlign]?, - BoxTextAlign[keyof BoxTextAlign]?, - BoxTextAlign[keyof BoxTextAlign]?, + BoxTextAlign, + BoxTextAlign?, + BoxTextAlign?, + BoxTextAlign?, ]; -export type BoxDisplay = typeof DISPLAY; +export type BoxDisplay = typeof DISPLAY[keyof typeof DISPLAY] | null; export type BoxDisplayArray = [ - BoxDisplay[keyof BoxDisplay], - BoxDisplay[keyof BoxDisplay]?, - BoxDisplay[keyof BoxDisplay]?, - BoxDisplay[keyof BoxDisplay]?, + BoxDisplay, + BoxDisplay?, + BoxDisplay?, + BoxDisplay?, ]; -export type BoxWidth = typeof BLOCK_SIZES; -export type BoxWidthArray = [ - BoxWidth[keyof BoxWidth], - BoxWidth[keyof BoxWidth]?, - BoxWidth[keyof BoxWidth]?, - BoxWidth[keyof BoxWidth]?, -]; +export type BoxWidth = typeof BLOCK_SIZES[keyof typeof BLOCK_SIZES] | null; +export type BoxWidthArray = [BoxWidth, BoxWidth?, BoxWidth?, BoxWidth?]; -export type BoxHeight = typeof BLOCK_SIZES; -export type BoxHeightArray = [ - BoxHeight[keyof BoxHeight], - BoxHeight[keyof BoxHeight]?, - BoxHeight[keyof BoxHeight]?, - BoxHeight[keyof BoxHeight]?, -]; +export type BoxHeight = typeof BLOCK_SIZES[keyof typeof BLOCK_SIZES] | null; +export type BoxHeightArray = [BoxHeight, BoxHeight?, BoxHeight?, BoxHeight?]; export type SizeNumber = | 0 @@ -80,51 +72,272 @@ export type SizeNumber = | 10 | 11 | 12 - | null - | undefined; + | null; + +export type SizeNumberArray = [ + SizeNumber, + SizeNumber?, + SizeNumber?, + SizeNumber?, +]; + +export type SizeNumberAndAuto = SizeNumber | 'auto'; +export type SizeNumberAndAutoArray = [ + SizeNumberAndAuto, + SizeNumberAndAuto?, + SizeNumberAndAuto?, + SizeNumberAndAuto?, +]; + +export type BorderColorArray = [ + BorderColor, + BorderColor?, + BorderColor?, + BorderColor?, +]; + +export type BorderRadiusArray = [ + BorderRadius, + BorderRadius?, + BorderRadius?, + BorderRadius?, +]; -export type Size = - | SizeNumber - | [SizeNumber, SizeNumber?, SizeNumber?, SizeNumber?]; +export type BorderStyleArray = [ + BorderStyle, + BorderStyle?, + BorderStyle?, + BorderStyle?, +]; + +export type AlignItemsArray = [ + AlignItems, + AlignItems?, + AlignItems?, + AlignItems?, +]; + +export type JustifyContentArray = [ + JustifyContent, + JustifyContent?, + JustifyContent?, + JustifyContent?, +]; + +export type BackgroundColorArray = [ + BackgroundColor, + BackgroundColor?, + BackgroundColor?, + BackgroundColor?, +]; -export interface BoxProps { +export interface BoxProps extends React.HTMLAttributes { + /** + * The content of the Box component. + */ children?: React.ReactNode; - flexDirection?: - | BoxFlexDirection[keyof BoxFlexDirection] - | BoxFlexDirectionArray; - flexWrap?: BoxFlexWrap[keyof BoxFlexWrap] | BoxFlexWrapArray; - gap?: Size; - margin?: Size; - marginTop?: Size; - marginBottom?: Size; - marginRight?: Size; - marginLeft?: Size; - marginInline?: Size; - marginInlineStart?: Size; - marginInlineEnd?: Size; - padding?: Size; - paddingTop?: Size; - paddingBottom?: Size; - paddingRight?: Size; - paddingLeft?: Size; - paddingInline?: Size; - paddingInlineStart?: Size; - paddingInlineEnd?: Size; - borderColor?: BorderColor; - borderWidth?: Size; - borderRadius?: BorderRadius; - borderStyle?: BorderStyle; - alignItems?: AlignItems; - justifyContent?: JustifyContent; - textAlign?: BoxTextAlign[keyof BoxTextAlign] | BoxTextAlignArray; - display?: BoxDisplay[keyof BoxDisplay] | BoxDisplayArray; - width?: BoxWidth[keyof BoxWidth] | BoxWidthArray; - height?: BoxHeight[keyof BoxHeight] | BoxHeightArray; - backgroundColor?: BackgroundColor; + /** + * The flex direction of the Box component. + * Use the FLEX_DIRECTION object from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + flexDirection?: BoxFlexDirection | BoxFlexDirectionArray; + /** + * The flex wrap of the Box component. + * Use the FLEX_WRAP object from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + flexWrap?: BoxFlexWrap | BoxFlexWrapArray; + /** + * The gap between the Box component's children. + * Use 1-12 for a gap of 4px-48px. + * Accepts responsive props in the form of an array. + */ + gap?: SizeNumber | SizeNumberArray | undefined; + /** + * The margin of the Box component. + * Use 1-12 for 4px-48px or 'auto'. + * Accepts responsive props in the form of an array. + */ + margin?: SizeNumberAndAuto | SizeNumberAndAutoArray; + /** + * The margin-top of the Box component. + * Use 1-12 for 4px-48px or 'auto'. + * Accepts responsive props in the form of an array. + */ + marginTop?: SizeNumberAndAuto | SizeNumberAndAutoArray; + /** + * The margin-bottom of the Box component. + * Use 1-12 for 4px-48px or 'auto'. + * Accepts responsive props in the form of an array. + */ + marginBottom?: SizeNumberAndAuto | SizeNumberAndAutoArray; + /** + * The margin-right of the Box component. + * Use 1-12 for 4px-48px or 'auto'. + * Accepts responsive props in the form of an array. + */ + marginRight?: SizeNumberAndAuto | SizeNumberAndAutoArray; + /** + * The margin-left of the Box component. + * Use 1-12 for 4px-48px or 'auto'. + * Accepts responsive props in the form of an array. + */ + marginLeft?: SizeNumberAndAuto | SizeNumberAndAutoArray; + /** + * The margin-inline of the Box component. + * Use 1-12 for 4px-48px or 'auto'. + * Accepts responsive props in the form of an array. + */ + marginInline?: SizeNumberAndAuto | SizeNumberAndAutoArray; + /** + * The margin-inline-start of the Box component. + * Use 1-12 for 4px-48px or 'auto'. + * Accepts responsive props in the form of an array. + */ + marginInlineStart?: SizeNumberAndAuto | SizeNumberAndAutoArray; + /** + * The margin-inline-end of the Box component. + * Use 1-12 for 4px-48px or 'auto'. + * Accepts responsive props in the form of an array. + */ + marginInlineEnd?: SizeNumberAndAuto | SizeNumberAndAutoArray; + /** + * The padding of the Box component. + * Use 1-12 for 4px-48px. + * Accepts responsive props in the form of an array. + */ + padding?: SizeNumber | SizeNumberArray; + /** + * The padding-top of the Box component. + * Use 1-12 for 4px-48px. + * Accepts responsive props in the form of an array. + */ + paddingTop?: SizeNumber | SizeNumberArray; + /** + * The padding-bottom of the Box component. + * Use 1-12 for 4px-48px. + * Accepts responsive props in the form of an array. + */ + paddingBottom?: SizeNumber | SizeNumberArray; + /** + * The padding-right of the Box component. + * Use 1-12 for 4px-48px. + * Accepts responsive props in the form of an array. + */ + paddingRight?: SizeNumber | SizeNumberArray; + /** + * The padding-left of the Box component. + * Use 1-12 for 4px-48px. + * Accepts responsive props in the form of an array. + */ + paddingLeft?: SizeNumber | SizeNumberArray; + /** + * The padding-inline of the Box component. + * Use 1-12 for 4px-48px. + * Accepts responsive props in the form of an array. + */ + paddingInline?: SizeNumber | SizeNumberArray; + /** + * The padding-inline-start of the Box component. + * Use 1-12 for 4px-48px. + * Accepts responsive props in the form of an array. + */ + paddingInlineStart?: SizeNumber | SizeNumberArray; + /** + * The padding-inline-end of the Box component. + * Use 1-12 for 4px-48px. + * Accepts responsive props in the form of an array. + */ + paddingInlineEnd?: SizeNumber | SizeNumberArray; + /** + * The border-color of the Box component. + * Use BorderColor enum from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + borderColor?: BorderColor | BorderColorArray; + /** + * The border-width of the Box component. + * Use 1-12 for 1px-12px. + * Accepts responsive props in the form of an array. + */ + borderWidth?: SizeNumber | SizeNumberArray; + /** + * The border-radius of the Box component. + * Use BorderRadius enum from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + borderRadius?: BorderRadius | BorderRadiusArray; + /** + * The border-style of the Box component. + * Use BorderStyle enum from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + borderStyle?: BorderStyle | BorderStyleArray; + /** + * The align-items of the Box component. + * Use AlignItems enum from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + alignItems?: AlignItems | AlignItemsArray; + /** + * The justify-content of the Box component. + * Use JustifyContent enum from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + justifyContent?: JustifyContent | JustifyContentArray; + /** + * The text-align of the Box component. + * Use TEXT_ALIGN const from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + textAlign?: BoxTextAlign | BoxTextAlignArray; + /** + * The display of the Box component. + * Use DISPLAY const from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + display?: BoxDisplay | BoxDisplayArray; + /** + * The width of the Box component. + * Use BLOCK_SIZES const from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + width?: BoxWidth | BoxWidthArray; + /** + * The height of the Box component. + * Use BLOCK_SIZES const from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + height?: BoxHeight | BoxHeightArray; + /** + * The background-color of the Box component. + * Use BackgroundColor enum from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + backgroundColor?: BackgroundColor | BackgroundColorArray; + /** + * Use the className prop to add an additional custom class to the Box component. + */ className?: string; + /** + * Use the style prop to add an additional custom style to the Box component. + */ style?: React.CSSProperties; + /** + * Use the as prop to change the underlying HTML element of the Box component. + */ as?: keyof HTMLElementTagNameMap; + /** + * The text-color of the Box component. + * Use TextColor enum from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ color?: TextColor | IconColor | string; // TODO: remove string when someone smarter figures out the issue with the color prop + /** + * The ref of the Box component. + */ + ref?: React.RefObject; } declare const Box: React.FC; diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.tsx similarity index 80% rename from ui/components/ui/box/box.stories.js rename to ui/components/ui/box/box.stories.tsx index 3fb8dfc313a4..7dff8d94ae36 100644 --- a/ui/components/ui/box/box.stories.js +++ b/ui/components/ui/box/box.stories.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; + import { BLOCK_SIZES, BorderStyle, @@ -12,10 +14,9 @@ import { TEXT_ALIGN, FLEX_DIRECTION, FLEX_WRAP, - Color, } from '../../../helpers/constants/design-system'; -import Typography from '../typography'; +import { Text } from '../../component-library'; import Box from './box'; @@ -41,7 +42,6 @@ const marginSizeControlOptions = [...sizeControlOptions, 'auto']; export default { title: 'Components/UI/Box', - component: Box, parameters: { docs: { @@ -52,14 +52,6 @@ export default { children: { table: { category: 'children' }, }, - size: { - control: { type: 'range', min: 50, max: 500, step: 10 }, - table: { category: 'children' }, - }, - items: { - control: 'number', - table: { category: 'children' }, - }, display: { options: Object.values(DISPLAY), control: 'select', @@ -223,45 +215,26 @@ export default { table: { category: 'as (root html element)' }, }, }, - args: { - size: 100, - items: 1, - display: DISPLAY.BLOCK, - width: BLOCK_SIZES.HALF, - height: BLOCK_SIZES.HALF, - borderStyle: BorderStyle.dashed, - borderColor: BorderColor.borderDefault, - justifyContent: JustifyContent.flexStart, - alignItems: AlignItems.flexStart, - textAlign: TEXT_ALIGN.LEFT, - }, -}; +} as ComponentMeta; -export const DefaultStory = (args) => { - const { items, size, ...rest } = args; - const children = []; - for (let $i = 0; $i < items; $i++) { - children.push( - , - ); - } - return ( - - {children} - - ); +export const DefaultStory: ComponentStory = (args) => ( + +); + +DefaultStory.args = { + children: 'Box component', + display: DISPLAY.FLEX, + justifyContent: JustifyContent.center, + alignItems: AlignItems.center, + width: BLOCK_SIZES.HALF, + height: BLOCK_SIZES.HALF, + borderColor: BorderColor.borderDefault, + padding: 4, }; DefaultStory.storyName = 'Default'; -export const Margin = (args) => { +export const Margin: ComponentStory = (args) => { return ( { ); }; -export const Padding = (args) => { +export const Padding: ComponentStory = (args) => { return ( { ); }; -export const ColorStory = (args) => { +export const ColorStory: ComponentStory = (args) => { return ( <> - - Color.textDefault + + TextColor.textDefault - - Color.textAlternative + + TextColor.textAlternative - - Color.textMuted + + TextColor.textMuted - - Color.primaryDefault + + TextColor.primaryDefault - Color.primaryInverse + TextColor.primaryInverse - - Color.errorDefault + + TextColor.errorDefault - Color.errorInverse + TextColor.errorInverse - - Color.successDefault + + TextColor.successDefault - Color.successInverse + TextColor.successInverse - - Color.warningDefault + + TextColor.warningDefault - Color.warningInverse + TextColor.warningInverse - - Color.infoDefault + + TextColor.infoDefault - Color.infoInverse + TextColor.infoInverse - - Color.inherit + + TextColor.inherit - Color.sepoliaInverse + TextColor.sepoliaInverse - Color.goerliInverse + TextColor.goerliInverse ); @@ -404,69 +377,55 @@ export const BackgroundColorStory = () => { return ( <> - + BackgroundColor.backgroundDefault - + - + BackgroundColor.backgroundAlternative - + - + BackgroundColor.overlayDefault - + - + BackgroundColor.primaryDefault - + - - BackgroundColor.primaryMuted - + BackgroundColor.primaryMuted - - BackgroundColor.errorDefault - + BackgroundColor.errorDefault - - BackgroundColor.errorMuted - + BackgroundColor.errorMuted - + BackgroundColor.successDefault - + - - BackgroundColor.successMuted - + BackgroundColor.successMuted - + BackgroundColor.warningDefault - + - - BackgroundColor.warningMuted - + BackgroundColor.warningMuted - - BackgroundColor.sepolia - + BackgroundColor.sepolia - - BackgroundColor.goerli - + BackgroundColor.goerli ); @@ -483,9 +442,7 @@ export const BorderColorStory = () => { borderWidth={2} marginBottom={1} > - - BorderColor.borderDefault - + BorderColor.borderDefault { borderWidth={2} marginBottom={1} > - - BorderColor.borderMuted - + BorderColor.borderMuted { marginBottom={1} backgroundColor={BackgroundColor.primaryMuted} > - - BorderColor.primaryDefault - + BorderColor.primaryDefault { borderWidth={2} marginBottom={1} > - - BorderColor.errorDefault - + BorderColor.errorDefault { borderWidth={2} marginBottom={1} > - - BorderColor.successDefault - + BorderColor.successDefault { borderColor={BorderColor.warningDefault} borderWidth={2} > - - BorderColor.warningDefault - + BorderColor.warningDefault ); @@ -639,11 +586,11 @@ BorderRadiusStory.storyName = 'BorderRadius'; export const ResponsiveProps = () => { return ( <> - + Responsive props example. Stacks vertically on small screens and aligns horizontally on large screens. Padding is also adjusted between small and large screens - + { padding={[4, 8]} borderRadius={[ BorderRadius.XL, - BorderRadius.PILL, + BorderRadius.pill, BorderRadius.none, BorderRadius.full, ]} @@ -709,13 +656,13 @@ export const ResponsiveProps = () => { ); }; -export const As = (args) => { +export const As: ComponentStory = (args) => { return ( <> - + You can change the root element of the Box component using the as prop. Inspect the below elements to see the underlying HTML elements - + div(default) ul li @@ -725,9 +672,9 @@ export const As = (args) => { ); }; -export const Width = (args) => { - const getColumns = () => { - const content = []; +export const Width: ComponentStory = () => { + const getColumns = (): JSX.Element[] => { + const content: JSX.Element[] = []; for (let i = 0; i < 12; i++) { content.push( { return ( <> -

- Working demo -

- - - {args.width.map((item, i) => { - return `${item} ${args.width.length === i + 1 ? '' : ', '}`; - })} - -

Static widths

{

{getColumns()} diff --git a/ui/components/ui/box/box.test.js b/ui/components/ui/box/box.test.tsx similarity index 100% rename from ui/components/ui/box/box.test.js rename to ui/components/ui/box/box.test.tsx diff --git a/ui/components/ui/card/README.mdx b/ui/components/ui/card/README.mdx index abb651155426..a18a4066d002 100644 --- a/ui/components/ui/card/README.mdx +++ b/ui/components/ui/card/README.mdx @@ -27,16 +27,20 @@ The Card component has a set of default props that should meet most card use cas That being said all props can be overwritten if necessary. ```jsx -import { Color } from '../../../helpers/constants/design-system'; +import { BackgroundColor, BorderColor, BorderRadius, BorderStyle } from '../../../helpers/constants/design-system'; // To remove the border // All border related props of the Box component will work + + + // To remove or change padding // All padding related props of the Box component will work + // To change the background color - + ``` diff --git a/ui/components/ui/card/card.js b/ui/components/ui/card/card.js index cbff9dcc2580..cf0eb64d2e6b 100644 --- a/ui/components/ui/card/card.js +++ b/ui/components/ui/card/card.js @@ -5,36 +5,27 @@ import Box from '../box'; import { BackgroundColor, BorderColor, + BorderRadius, BorderStyle, - Size, } from '../../../helpers/constants/design-system'; const Card = ({ border = true, - padding = 4, backgroundColor = BackgroundColor.backgroundDefault, children, ...props -}) => { - const defaultBorderProps = { - borderColor: border && BorderColor.borderMuted, - borderRadius: border && Size.MD, - borderStyle: border && BorderStyle.solid, - }; - - return ( - - {children} - - ); -}; +}) => ( + + {children} + +); Card.propTypes = { /** @@ -42,16 +33,11 @@ Card.propTypes = { * Defaults to true */ border: PropTypes.bool, - /** - * Padding of the Card component accepts number or an array of 2 numbers. - * Defaults to 4 (16px) - */ - padding: Box.propTypes.padding, /** * The background color of the card * Defaults to Color.backgroundDefault */ - backgroundColor: Box.propTypes.backgroundColor, + backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)), /** * The Card component accepts all Box component props */ diff --git a/ui/components/ui/card/card.stories.js b/ui/components/ui/card/card.stories.js index 9c5cef1c060c..0be9c02a22fc 100644 --- a/ui/components/ui/card/card.stories.js +++ b/ui/components/ui/card/card.stories.js @@ -17,7 +17,6 @@ const sizeOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; export default { title: 'Components/UI/Card', - component: Card, parameters: { docs: { @@ -158,13 +157,3 @@ export default { export const DefaultStory = (args) => {args.children}; DefaultStory.storyName = 'Default'; - -DefaultStory.args = { - padding: 4, - border: true, - borderWidth: 1, - borderColor: BorderColor.borderDefault, - borderStyle: BorderStyle.solid, - backgroundColor: BackgroundColor.backgroundDefault, - display: DISPLAY.BLOCK, -}; diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts index a73831274881..3ac409fef065 100644 --- a/ui/helpers/constants/design-system.ts +++ b/ui/helpers/constants/design-system.ts @@ -108,6 +108,7 @@ export enum TextColor { textDefault = 'text-default', textAlternative = 'text-alternative', textMuted = 'text-muted', + overlayInverse = 'overlay-inverse', primaryDefault = 'primary-default', primaryInverse = 'primary-inverse', errorDefault = 'error-default', From d45c4ed4973b3f6876007d618e4ced0a5a201ac4 Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Thu, 16 Mar 2023 15:53:29 -0500 Subject: [PATCH 5/5] make network-controller methods overwrite rather than merge provider state (#18127) * make network-controller methods overwrite rather than merge provider state --- app/scripts/controllers/network/network-controller.js | 10 +++++----- .../controllers/network/network-controller.test.js | 9 +++------ 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/app/scripts/controllers/network/network-controller.js b/app/scripts/controllers/network/network-controller.js index 6f0e08cbe43c..20869f227e55 100644 --- a/app/scripts/controllers/network/network-controller.js +++ b/app/scripts/controllers/network/network-controller.js @@ -289,7 +289,7 @@ export default class NetworkController extends EventEmitter { rollbackToPreviousProvider() { const config = this.previousProviderStore.getState(); - this.providerStore.updateState(config); + this.providerStore.putState(config); this._switchNetwork(config); } @@ -347,7 +347,7 @@ export default class NetworkController extends EventEmitter { * @param {boolean} isSupported - True if the EIP is supported */ _setNetworkEIPSupport(EIPNumber, isSupported) { - this.networkDetails.updateState({ + this.networkDetails.putState({ EIPS: { [EIPNumber]: isSupported, }, @@ -367,8 +367,8 @@ export default class NetworkController extends EventEmitter { * @param config */ _setProviderConfig(config) { - this.previousProviderStore.updateState(this.providerStore.getState()); - this.providerStore.updateState(config); + this.previousProviderStore.putState(this.providerStore.getState()); + this.providerStore.putState(config); this._switchNetwork(config); } @@ -550,7 +550,7 @@ export default class NetworkController extends EventEmitter { )?.id; const newNetworkConfigurationId = oldNetworkConfigurationId || random(); - this.networkConfigurationsStore.updateState({ + this.networkConfigurationsStore.putState({ ...networkConfigurations, [newNetworkConfigurationId]: { ...newNetworkConfiguration, diff --git a/app/scripts/controllers/network/network-controller.test.js b/app/scripts/controllers/network/network-controller.test.js index 8c887cb56b43..a3743ae56819 100644 --- a/app/scripts/controllers/network/network-controller.test.js +++ b/app/scripts/controllers/network/network-controller.test.js @@ -3218,7 +3218,6 @@ describe('NetworkController', () => { blockExplorerUrl: BUILT_IN_NETWORKS[networkType].blockExplorerUrl, }, - id: 'testNetworkConfigurationId2', }); }, ); @@ -4213,7 +4212,7 @@ describe('NetworkController', () => { networkVersion, } of INFURA_NETWORKS) { describe(`if the previous provider configuration had a type of "${networkType}"`, () => { - it('merges the previous configuration into the current provider configuration', async () => { + it('overwrites the the current provider configuration with the previous provider configuration', async () => { await withController( { state: { @@ -4295,7 +4294,6 @@ describe('NetworkController', () => { chainId: BUILT_IN_NETWORKS[networkType].chainId, ticker: BUILT_IN_NETWORKS[networkType].ticker, nickname: '', - id: 'testNetworkConfigurationId1', rpcPrefs: { blockExplorerUrl: BUILT_IN_NETWORKS[networkType].blockExplorerUrl, @@ -4871,7 +4869,7 @@ describe('NetworkController', () => { } describe(`if the previous provider configuration had a type of "rpc"`, () => { - it('merges the previous configuration into the current provider configuration', async () => { + it('overwrites the the current provider configuration with the previous provider configuration', async () => { await withController( { state: { @@ -4940,7 +4938,6 @@ describe('NetworkController', () => { rpcPrefs: { blockExplorerUrl: 'https://goerli.etherscan.io', }, - id: 'testNetworkConfigurationId2', }); await waitForLookupNetworkToComplete({ @@ -4953,8 +4950,8 @@ describe('NetworkController', () => { type: 'rpc', rpcUrl: 'https://mock-rpc-url-2', chainId: '0x1337', - ticker: 'TEST2', nickname: 'test-chain-2', + ticker: 'TEST2', rpcPrefs: { blockExplorerUrl: 'test-block-explorer-2.com', },