m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Removing TEXT_VARIANTS in favour of TextVariant (#17674)

Browse Source
This commit is contained in:
George Marshall 2023-02-09 16:09:33 -08:00 committed by GitHub
parent 3948e86fee
commit e269790ff4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 8 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/design-system.md
View File

@ -2,4 +2,4 @@
A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.
Design System [Figma File](https://www.figma.com/file/aWgwMrzdAuv9VuPdtst64uuw/Style-Guide?node-id=211%3A0) Design System [Figma File](https://www.figma.com/file/HKpPKij9V3TpsyMV1TpV7C/DS-Components?node-id=401%3A2122&t=oqaI3NKZ059Vo67h-1)

2
ui/components/component-library/index.js
View File

@ -26,7 +26,7 @@ export { Label } from './label';
export { PickerNetwork } from './picker-network'; export { PickerNetwork } from './picker-network';
export { Tag } from './tag'; export { Tag } from './tag';
export { TagUrl } from './tag-url'; export { TagUrl } from './tag-url';
export { Text, TEXT_VARIANTS, TEXT_DIRECTIONS } from './text'; export { Text, TEXT_DIRECTIONS } from './text';
export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field'; export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
export { export {
TextFieldBase, TextFieldBase,

8
ui/components/component-library/text/README.mdx
View File

@ -20,9 +20,7 @@ The `Text` accepts all props below as well as all [Box](/docs/components-ui-box-
### Variant ### Variant
Use the `variant` prop and the `TEXT` object from `./ui/helpers/constants/design-system.js` to change the font size of the component. Use the `variant` prop and the `TextVariant` enum from `./ui/helpers/constants/design-system.js` to change the font size of the component.
Optional: `TEXT_VARIANTS` from ./text object can also be used.
<Canvas> <Canvas>
<Story id="components-componentlibrary-text--variant" /> <Story id="components-componentlibrary-text--variant" />
@ -47,10 +45,10 @@ import { TextVariant } from '../../../helpers/constants/design-system';
### Color ### Color
Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the color of the `Text` component. Use the `color` prop and the `TextColor` object from `./ui/helpers/constants/design-system.js` to change the color of the `Text` component.
<Canvas> <Canvas>
<Story id="components-componentlibrary-text--color" /> <Story id="components-componentlibrary-text--color-story" />
</Canvas> </Canvas>
```jsx ```jsx

2
ui/components/component-library/text/index.js
View File

@ -1,2 +1,2 @@
export { Text } from './text'; export { Text } from './text';
export { TEXT_VARIANTS, TEXT_DIRECTIONS } from './text.constants'; export { TEXT_DIRECTIONS } from './text.constants';

16
ui/components/component-library/text/text.constants.js
View File

@ -1,19 +1,3 @@
import { TextVariant } from '../../../helpers/constants/design-system';
export const TEXT_VARIANTS = {
DISPLAY_MD: TextVariant.displayMd,
HEADING_LG: TextVariant.headingLg,
HEADING_MD: TextVariant.headingMd,
HEADING_SM: TextVariant.headingSm,
BODY_LG_MEDIUM: TextVariant.bodyLgMedium,
BODY_MD: TextVariant.bodyMd,
BODY_MD_BOLD: TextVariant.bodyMdBold,
BODY_SM: TextVariant.bodySm,
BODY_SM_BOLD: TextVariant.bodySmBold,
BODY_XS: TextVariant.bodyXs,
INHERIT: TextVariant.inherit,
};
export const TEXT_DIRECTIONS = { export const TEXT_DIRECTIONS = {
LEFT_TO_RIGHT: 'ltr', LEFT_TO_RIGHT: 'ltr',
RIGHT_TO_LEFT: 'rtl', RIGHT_TO_LEFT: 'rtl',

4
ui/components/component-library/text/text.js
View File

@ -11,7 +11,7 @@ import {
OVERFLOW_WRAP, OVERFLOW_WRAP,
TextColor, TextColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { TEXT_VARIANTS, TEXT_DIRECTIONS } from './text.constants'; import { TEXT_DIRECTIONS } from './text.constants';
export const ValidTags = [ export const ValidTags = [
'dd', 'dd',
@ -115,7 +115,7 @@ Text.propTypes = {
* `BODY_XS` large screen: 12px / small screen: 10px, * `BODY_XS` large screen: 12px / small screen: 10px,
* `INHERIT` * `INHERIT`
*/ */
variant: PropTypes.oneOf(Object.values(TEXT_VARIANTS)), variant: PropTypes.oneOf(Object.values(TextVariant)),
/** /**
* The color of the Text component Should use the COLOR object from * The color of the Text component Should use the COLOR object from
* ./ui/helpers/constants/design-system.js * ./ui/helpers/constants/design-system.js