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

Feat/16185/button primary housekeeping (#16457)

Browse Source 
* ButtonPrimary housekeeping

* use sizes

* update test and danger type
This commit is contained in:
Garrett Bear 2022-11-14 13:41:03 -08:00 committed by GitHub
parent 780728daa8
commit dcf79b0c99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap Normal file
View File

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ButtonPrimary should render button element correctly 1`] = `
<div>
<button
class="box mm-button mm-button--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
data-testid="button-primary"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button Primary
</span>
</button>
</div>
`;

2
ui/components/component-library/button-primary/button-primary.js
View File

@ -32,7 +32,7 @@ ButtonPrimary.propTypes = {
*/ */
danger: PropTypes.bool, danger: PropTypes.bool,
/** /**
* The possible size values for ButtonPrimary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', * Possible size values: 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
* Default value is 'SIZES.MD'. * Default value is 'SIZES.MD'.
*/ */
size: PropTypes.oneOf(Object.values(BUTTON_PRIMARY_SIZES)), size: PropTypes.oneOf(Object.values(BUTTON_PRIMARY_SIZES)),

12
ui/components/component-library/button-primary/button-primary.stories.js
View File

@ -1,5 +1,9 @@
import React from 'react'; import React from 'react';
import { ALIGN_ITEMS, DISPLAY } from '../../../helpers/constants/design-system'; import {
ALIGN_ITEMS,
DISPLAY,
SIZES,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon'; import { ICON_NAMES } from '../icon';
import { ButtonPrimary } from './button-primary'; import { ButtonPrimary } from './button-primary';
@ -110,13 +114,13 @@ DefaultStory.storyName = 'Default';
export const Size = (args) => ( export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}> <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.SM}> <ButtonPrimary {...args} size={SIZES.SM}>
Small Button Small Button
</ButtonPrimary> </ButtonPrimary>
<ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.MD}> <ButtonPrimary {...args} size={SIZES.MD}>
Medium (Default) Button Medium (Default) Button
</ButtonPrimary> </ButtonPrimary>
<ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.LG}> <ButtonPrimary {...args} size={SIZES.LG}>
Large Button Large Button
</ButtonPrimary> </ButtonPrimary>
</Box> </Box>

1
ui/components/component-library/button-primary/button-primary.test.js
View File

@ -14,6 +14,7 @@ describe('ButtonPrimary', () => {
expect(getByText('Button Primary')).toBeDefined(); expect(getByText('Button Primary')).toBeDefined();
expect(container.querySelector('button')).toBeDefined(); expect(container.querySelector('button')).toBeDefined();
expect(getByTestId('button-primary')).toHaveClass('mm-button'); expect(getByTestId('button-primary')).toHaveClass('mm-button');
expect(container).toMatchSnapshot();
}); });
it('should render anchor element correctly', () => { it('should render anchor element correctly', () => {