mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Strong tag support in Text component (#18816)
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
parent
1f0c0d041c
commit
70ee78757b
@ -335,6 +335,25 @@ import { Text, TextDirection } from '../../component-library';
|
||||
</Text>
|
||||
```
|
||||
|
||||
### Strong
|
||||
|
||||
Using the `as` prop with the value of `strong` will render the `Text` component as a `strong` element and any `strong` emlements used within a `Text` component will be supported with bold styles.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-text--strong" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Text } from '../../component-library';
|
||||
|
||||
<Text as="strong">
|
||||
This is an as="strong" demo.
|
||||
</Text>
|
||||
<Text>
|
||||
This is a <strong>strong element</strong> demo.
|
||||
</Text>
|
||||
```
|
||||
|
||||
### Box Props
|
||||
|
||||
Use any valid box props [Box](/?path=/story/components-ui-box--default-story) component props to the Text component.
|
||||
|
@ -33,6 +33,10 @@ $text-variants: (
|
||||
color: var(--color-text-default);
|
||||
font-family: var(--font-family-sans);
|
||||
|
||||
> strong {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
@each $type, $size-options in $text-variants {
|
||||
&--#{$type} {
|
||||
// Sets a default
|
||||
|
@ -226,3 +226,14 @@ export const TextDirectionStory: ComponentStory<typeof Text> = (args) => (
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Strong: ComponentStory<typeof Text> = (args) => (
|
||||
<>
|
||||
<Text {...args} as="strong">
|
||||
This is an as="strong" demo.
|
||||
</Text>
|
||||
<Text {...args}>
|
||||
This is a <strong>strong element</strong> demo.
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user