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

Strong tag support in Text component (#18816)

Browse Source 
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
Garrett Bear 2023-04-26 12:46:03 -07:00 committed by GitHub
parent 1f0c0d041c
commit 70ee78757b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/component-library/text/README.mdx
View File

@ -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.

4
ui/components/component-library/text/text.scss
View File

@ -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

11
ui/components/component-library/text/text.stories.tsx
View File

@ -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>
</>
);