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

fix button text props (#17478)

Browse Source 
* fix button text props

* fix textProps size from being overriden

* Update ui/components/component-library/button-link/button-link.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Garrett Bear 2023-01-31 23:55:46 -08:00 committed by GitHub
parent 26222a9b27
commit db0492e042
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,7 +66,13 @@ import { ButtonLink, Text, TEXT } from '../../component-library';
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink> Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
</Text> </Text>
<Text variant={TEXT.BODY_XS}> <Text variant={TEXT.BODY_XS}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink> Inherits the font-size of the parent element and example with textProps override for a success color.
<ButtonLink
size={SIZES.INHERIT}
textProps={{ color: COLORS.SUCCESS_DEFAULT }}
>
Learn more
</ButtonLink>
</Text> </Text>
``` ```

7
ui/components/component-library/button-link/button-link.js
View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { ButtonBase } from '../button-base'; import { ButtonBase } from '../button-base';
import { Text } from '../text';
import { COLORS, TEXT, SIZES } from '../../../helpers/constants/design-system'; import { COLORS, TEXT, SIZES } from '../../../helpers/constants/design-system';
import { BUTTON_LINK_SIZES } from './button-link.constants'; import { BUTTON_LINK_SIZES } from './button-link.constants';
@ -10,6 +11,7 @@ export const ButtonLink = ({
className, className,
danger, danger,
size = SIZES.AUTO, size = SIZES.AUTO,
textProps,
...props ...props
}) => { }) => {
return ( return (
@ -28,6 +30,7 @@ export const ButtonLink = ({
textProps={{ textProps={{
variant: variant:
size === BUTTON_LINK_SIZES.INHERIT ? TEXT.INHERIT : TEXT.BODY_MD, size === BUTTON_LINK_SIZES.INHERIT ? TEXT.INHERIT : TEXT.BODY_MD,
...textProps,
}} }}
iconProps={{ iconProps={{
size: size === BUTTON_LINK_SIZES.INHERIT ? SIZES.INHERIT : SIZES.SM, size: size === BUTTON_LINK_SIZES.INHERIT ? SIZES.INHERIT : SIZES.SM,
@ -54,6 +57,10 @@ ButtonLink.propTypes = {
* Default value is 'SIZES.AUTO'. * Default value is 'SIZES.AUTO'.
*/ */
size: PropTypes.oneOf(Object.values(BUTTON_LINK_SIZES)), size: PropTypes.oneOf(Object.values(BUTTON_LINK_SIZES)),
/**
* textProps accepts all the props from Text component
*/
textProps: PropTypes.shape(Text.PropTypes),
/** /**
* ButtonLink accepts all the props from ButtonBase * ButtonLink accepts all the props from ButtonBase
*/ */

9
ui/components/component-library/button-link/button-link.stories.js
View File

@ -153,8 +153,13 @@ export const Size = (args) => (
</ButtonLink> </ButtonLink>
</Text> </Text>
<Text variant={TEXT.BODY_XS}> <Text variant={TEXT.BODY_XS}>
Inherits the font-size of the parent element.{' '} Inherits the font-size of the parent element and example with textProps
<ButtonLink {...args} size={SIZES.INHERIT}> override for a success color.{' '}
<ButtonLink
{...args}
size={SIZES.INHERIT}
textProps={{ color: COLORS.SUCCESS_DEFAULT }}
>
Learn more Learn more
</ButtonLink> </ButtonLink>
</Text> </Text>