m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

added color prop to Box component (#15507)

Browse Source 
* changed bordercolors, colors, backgroundcolors to use lodash object

* fixed merge conflicts

* fixed merge conflicts

* replaced colors with TextColors

* fixed readme and storybook for box props

* added text colors

* fixed readme conflicts

* added Inherit to the design system colors

* added bordercolor, background color, text color to design-system

* updated design system import in box component
This commit is contained in:
Nidhi Kumari 2022-08-12 00:52:06 +05:30 committed by GitHub
parent 2eb0fe6978
commit 23b882449f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 201 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/components/ui/box/README.mdx
View File

@ -120,8 +120,6 @@ or array of these values.
import { DISPLAY } from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box display={DISPLAY.BLOCK} />
<Box display={DISPLAY.FLEX} />
<Box display={DISPLAY.GRID} />
@ -131,6 +129,28 @@ import Box from '../ui/box';
<Box display={DISPLAY.NONE} />
```
### Color
The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas>
<Story id="ui-components-ui-box-box-stories-js--color" />
</Canvas>
Example of importing `COLORS` object with `Box` component
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box
backgroundColor={COLORS.BACKGROUND_DEFAULT}
color={COLORS.ERROR_DEFAULT}
>
Text goes here
</Box>;
```
### Background Color
Use the `backgroundColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props.
@ -172,6 +192,7 @@ import Box from '../ui/box';
</Box>;
```
### Responsive Props
The box component provides a responsive props api in the form of array props. Array props are inspired by [styled-systems array props](https://styled-system.com/guides/array-props). The responsive props follow a mobile first methodology with the first item in the array applying the style to the base level size e.g. `0px` and up. The second item overwrites the first items styles at the next breakpoint.

74
ui/components/ui/box/box.js
View File

@ -6,7 +6,9 @@ import {
ALIGN_ITEMS,
BLOCK_SIZES,
BORDER_STYLE,
COLORS,
BACKGROUND_COLORS,
BORDER_COLORS,
TEXT_COLORS,
DISPLAY,
JUSTIFY_CONTENT,
SIZES,
@ -18,64 +20,14 @@ import {
const BASE_CLASS_NAME = 'box';
const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
export const BackgroundColors = [
COLORS.BACKGROUND_DEFAULT,
COLORS.BACKGROUND_ALTERNATIVE,
COLORS.OVERLAY_DEFAULT,
COLORS.PRIMARY_DEFAULT,
COLORS.PRIMARY_ALTERNATIVE,
COLORS.PRIMARY_MUTED,
COLORS.ERROR_DEFAULT,
COLORS.ERROR_ALTERNATIVE,
COLORS.ERROR_MUTED,
COLORS.WARNING_DEFAULT,
COLORS.WARNING_ALTERNATIVE,
COLORS.WARNING_MUTED,
COLORS.SUCCESS_DEFAULT,
COLORS.SUCCESS_ALTERNATIVE,
COLORS.SUCCESS_MUTED,
COLORS.INFO_DEFAULT,
COLORS.INFO_ALTERNATIVE,
COLORS.INFO_MUTED,
COLORS.MAINNET,
COLORS.ROPSTEN,
COLORS.KOVAN,
COLORS.RINKEBY,
COLORS.GOERLI,
COLORS.TRANSPARENT,
COLORS.LOCALHOST,
];
export const BorderColors = [
COLORS.BORDER_DEFAULT,
COLORS.BORDER_MUTED,
COLORS.PRIMARY_DEFAULT,
COLORS.PRIMARY_ALTERNATIVE,
COLORS.PRIMARY_MUTED,
COLORS.ERROR_DEFAULT,
COLORS.ERROR_ALTERNATIVE,
COLORS.ERROR_MUTED,
COLORS.WARNING_DEFAULT,
COLORS.WARNING_ALTERNATIVE,
COLORS.WARNING_MUTED,
COLORS.SUCCESS_DEFAULT,
COLORS.SUCCESS_ALTERNATIVE,
COLORS.SUCCESS_MUTED,
COLORS.INFO_DEFAULT,
COLORS.INFO_ALTERNATIVE,
COLORS.INFO_MUTED,
COLORS.MAINNET,
COLORS.ROPSTEN,
COLORS.KOVAN,
COLORS.RINKEBY,
COLORS.GOERLI,
COLORS.TRANSPARENT,
COLORS.LOCALHOST,
];
const ValidSize = PropTypes.oneOf(Sizes);
const ValidSizeAndAuto = PropTypes.oneOf([...Sizes, 'auto']);
export const ValidBackgroundColors = PropTypes.oneOf(BackgroundColors);
export const ValidBorderColors = PropTypes.oneOf(BorderColors);
export const ValidBackgroundColors = PropTypes.oneOf(
Object.values(BACKGROUND_COLORS),
);
export const ValidBorderColors = PropTypes.oneOf(Object.values(BORDER_COLORS));
export const ValidTextColors = PropTypes.oneOf(Object.values(TEXT_COLORS));
const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
export const MultipleSizes = PropTypes.oneOfType([
@ -101,6 +53,12 @@ export const MultipleBackgroundColors = PropTypes.oneOfType([
ArrayOfValidBackgroundColors,
]);
const ArrayOfValidTextColors = PropTypes.arrayOf(ValidTextColors);
export const MultipleTextColors = PropTypes.oneOfType([
ValidTextColors,
ArrayOfValidTextColors,
]);
function isValidSize(type, value) {
// Only margin types allow 'auto'
return (
@ -228,6 +186,7 @@ export default function Box({
className,
backgroundColor,
as = 'div',
color,
...props
}) {
const boxClassName = classnames(
@ -259,6 +218,7 @@ export default function Box({
textAlign && generateClassNames('text-align', textAlign, isValidString),
width && generateClassNames('width', width, isValidString),
height && generateClassNames('height', height, isValidString),
color && generateClassNames('color', color, isValidString),
backgroundColor &&
generateClassNames('background-color', backgroundColor, isValidString),
borderRadius && generateClassNames('rounded', borderRadius, isValidString),
@ -267,6 +227,7 @@ export default function Box({
borderColor &&
generateClassNames('border-color', borderColor, isValidString),
borderWidth && generateClassNames('border-width', borderWidth, isValidSize),
{
// Auto applied classes
// ---Borders---
@ -352,6 +313,7 @@ Box.propTypes = {
PropTypes.arrayOf(PropTypes.oneOf(Object.values(BLOCK_SIZES))),
]),
backgroundColor: MultipleBackgroundColors,
color: MultipleTextColors,
className: PropTypes.string,
/**
* The polymorphic `as` prop allows you to change the root HTML element of the Box component

17
ui/components/ui/box/box.scss
View File

@ -416,4 +416,21 @@ $attributesToApplyExtraProperties: margin;
}
}
}
// color
@each $variant, $color in design-system.$color-map {
&--color-#{$variant} {
color: var($color);
}
}
// breakpoint classes
@each $breakpoint, $min-width in $screen-sizes-map {
@each $variant, $color in design-system.$color-map {
@media screen and (min-width: $min-width) {
&--#{$breakpoint}\color-#{$variant} {
color: var($color);
}
}
}
}
}

36
ui/components/ui/box/box.stories.js
View File

@ -4,6 +4,9 @@ import {
BLOCK_SIZES,
BORDER_STYLE,
COLORS,
TEXT_COLORS,
BORDER_COLORS,
BACKGROUND_COLORS,
DISPLAY,
JUSTIFY_CONTENT,
SIZES,
@ -14,7 +17,7 @@ import {
import Typography from '../typography';
import Box, { BackgroundColors, BorderColors } from './box';
import Box from './box';
import README from './README.mdx';
@ -60,12 +63,17 @@ export default {
table: { category: 'display' },
},
backgroundColor: {
options: BackgroundColors,
options: Object.values(BACKGROUND_COLORS),
control: 'select',
table: {
category: 'background',
},
},
color: {
options: Object.values(TEXT_COLORS),
control: 'select',
table: { category: 'color' },
},
borderStyle: {
options: Object.values(BORDER_STYLE),
control: 'select',
@ -78,7 +86,7 @@ export default {
table: { category: 'border' },
},
borderColor: {
options: BorderColors,
options: Object.values(BORDER_COLORS),
control: 'select',
defaultValue: COLORS.BORDER_DEFAULT,
table: { category: 'border' },
@ -426,3 +434,25 @@ export const As = (args) => {
</>
);
};
export const Color = () => {
return (
<>
<Box padding={3} color={COLORS.TEXT_DEFAULT}>
<Typography>COLORS.TEXT_DEFAULT</Typography>
</Box>
<Box padding={3} color={COLORS.PRIMARY_DEFAULT}>
COLORS.PRIMARY_DEFAULT
</Box>
<Box padding={3} color={COLORS.SECONDARY_DEFAULT}>
COLORS.SECONDARY_DEFAULT
</Box>
<Box padding={3} color={COLORS.ERROR_DEFAULT}>
COLORS.ERROR_DEFAULT
</Box>
<Box padding={3} color={COLORS.SUCCESS_DEFAULT}>
COLORS.SUCCESS_DEFAULT
</Box>
</>
);
};

35
ui/components/ui/box/box.test.js
View File

@ -659,6 +659,7 @@ describe('Box', () => {
);
});
});
describe('width, height', () => {
it('should render the Box with the width class', () => {
const { getByText } = render(
@ -747,4 +748,38 @@ describe('Box', () => {
);
});
});
describe('color', () => {
it('should render the Box with the color class', () => {
const { getByText } = render(
<Box color={COLORS.TEXT_DEFAULT}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass('box--color-text-default');
});
it('should render the Box with the responsive color classes', () => {
const { getByText } = render(
<Box
color={[
COLORS.PRIMARY_DEFAULT,
COLORS.SECONDARY_DEFAULT,
COLORS.ERROR_DEFAULT,
COLORS.SUCCESS_DEFAULT,
]}
>
Box content
</Box>,
);
expect(getByText('Box content')).toHaveClass(
'box--color-primary-default',
);
expect(getByText('Box content')).toHaveClass(
'box--sm:color-secondary-default',
);
expect(getByText('Box content')).toHaveClass(
'box--md:color-error-default',
);
expect(getByText('Box content')).toHaveClass(
'box--lg:color-success-default',
);
});
});
});

75
ui/helpers/constants/design-system.js
View File

@ -4,6 +4,9 @@
* should match the property. When detailing a collection of things, it should
* match the plural form of the thing. e.g. COLORS, TYPOGRAPHY
*/
import { pick } from 'lodash';
export const COLORS = {
BACKGROUND_DEFAULT: 'background-default',
BACKGROUND_ALTERNATIVE: 'background-alternative',
@ -54,8 +57,80 @@ export const COLORS = {
GOERLI: 'goerli',
TRANSPARENT: 'transparent',
LOCALHOST: 'localhost',
INHERIT: 'inherit',
};
export const BACKGROUND_COLORS = pick(COLORS, [
'BACKGROUND_DEFAULT',
'BACKGROUND_ALTERNATIVE',
'OVERLAY_DEFAULT',
'PRIMARY_DEFAULT',
'PRIMARY_ALTERNATIVE',
'PRIMARY_MUTED',
'ERROR_DEFAULT',
'ERROR_ALTERNATIVE',
'ERROR_MUTED',
'WARNING_DEFAULT',
'WARNING_ALTERNATIVE',
'WARNING_MUTED',
'SUCCESS_DEFAULT',
'SUCCESS_ALTERNATIVE',
'SUCCESS_MUTED',
'INFO_DEFAULT',
'INFO_ALTERNATIVE',
'INFO_MUTED',
'MAINNET',
'ROPSTEN',
'KOVAN',
'RINKEBY',
'GOERLI',
'TRANSPARENT',
'LOCALHOST',
]);
export const BORDER_COLORS = pick(COLORS, [
'BORDER_DEFAULT',
'BORDER_MUTED',
'PRIMARY_DEFAULT',
'PRIMARY_ALTERNATIVE',
'PRIMARY_MUTED',
'ERROR_DEFAULT',
'ERROR_ALTERNATIVE',
'ERROR_MUTED',
'WARNING_DEFAULT',
'WARNING_ALTERNATIVE',
'WARNING_MUTED',
'SUCCESS_DEFAULT',
'SUCCESS_ALTERNATIVE',
'SUCCESS_MUTED',
'INFO_DEFAULT',
'INFO_ALTERNATIVE',
'INFO_MUTED',
'MAINNET',
'ROPSTEN',
'KOVAN',
'RINKEBY',
'GOERLI',
'TRANSPARENT',
'LOCALHOST',
]);
export const TEXT_COLORS = pick(COLORS, [
'TEXT_DEFAULT',
'TEXT_ALTERNATIVE',
'TEXT_MUTED',
'OVERLAY_INVERSE',
'PRIMARY_DEFAULT',
'PRIMARY_INVERSE',
'SECONDARY_DEFAULT',
'SECONDARY_INVERSE',
'ERROR_DEFAULT',
'ERROR_INVERSE',
'SUCCESS_DEFAULT',
'SUCCESS_INVERSE',
'WARNING_INVERSE',
'INFO_DEFAULT',
'INFO_INVERSE',
]);
export const TYPOGRAPHY = {
H1: 'h1',
H2: 'h2',