mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
button secondary housekeeping (#16495)
* button secondary housekeeping * add snapshot * add export constants
This commit is contained in:
parent
f9ed4a560b
commit
d4bf8adaf8
@ -1 +1,2 @@
|
||||
export { ButtonPrimary } from './button-primary';
|
||||
export { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
|
||||
|
@ -43,7 +43,7 @@ import { ButtonSecondary } from '../ui/component-library/button/button-secondary
|
||||
|
||||
### Danger
|
||||
|
||||
Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
|
||||
Use the `danger` boolean prop to change the `ButtonSecondary` to danger color.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--danger" />
|
||||
|
@ -0,0 +1,16 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ButtonSecondary should render button element correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-button mm-button--size-md mm-button-secondary 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-secondary"
|
||||
>
|
||||
<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 Secondary
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
@ -32,7 +32,7 @@ ButtonSecondary.propTypes = {
|
||||
*/
|
||||
danger: PropTypes.bool,
|
||||
/**
|
||||
* The possible size values for ButtonSecondary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
|
||||
* Possible size values: 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
|
||||
* Default value is 'SIZES.MD'.
|
||||
*/
|
||||
size: PropTypes.oneOf(Object.values(BUTTON_SECONDARY_SIZES)),
|
||||
|
@ -1,5 +1,9 @@
|
||||
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 { ICON_NAMES } from '../icon';
|
||||
import { ButtonSecondary } from './button-secondary';
|
||||
@ -110,13 +114,13 @@ DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Size = (args) => (
|
||||
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
|
||||
<ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.SM}>
|
||||
<ButtonSecondary {...args} size={SIZES.SM}>
|
||||
Small Button
|
||||
</ButtonSecondary>
|
||||
<ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.MD}>
|
||||
<ButtonSecondary {...args} size={SIZES.MD}>
|
||||
Medium (Default) Button
|
||||
</ButtonSecondary>
|
||||
<ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.LG}>
|
||||
<ButtonSecondary {...args} size={SIZES.LG}>
|
||||
Large Button
|
||||
</ButtonSecondary>
|
||||
</Box>
|
||||
|
@ -14,6 +14,7 @@ describe('ButtonSecondary', () => {
|
||||
expect(getByText('Button Secondary')).toBeDefined();
|
||||
expect(container.querySelector('button')).toBeDefined();
|
||||
expect(getByTestId('button-secondary')).toHaveClass('mm-button');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render anchor element correctly', () => {
|
||||
|
@ -1 +1,2 @@
|
||||
export { ButtonSecondary } from './button-secondary';
|
||||
export { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
|
||||
|
Loading…
Reference in New Issue
Block a user