Add display typography styles [OR-1205]
#1919
Conversation
- Ensure the default font family has low specificity with `:where` - Add storybook demos which point to the website. Otherwise we will just be repeating information and doubling work. We may want to revisit this.
A new PreviewPane component is responsible for the UI of the preview interface. This makes it more flexible. It can now be used for smaller previews, such as for utility classes which aren't a component and do not have JSX. The Preview component retains logic to render a JSX component, fetch its JSX from a given file path for a code snippet, and generates a HTML code snippet from there.
notlee
requested review from
ft-dependency-auto-merger and
a team
as code owners
|
|
||
|
|
||
| Object.entries(TypeUsecaseTokensByItem).map(([key, tokens]) => { | ||
| console.log(tokens); |
| border-radius: 50%; | ||
| } | ||
|
|
||
| /* LABEL ADDED BY BRIAN */ |
There was a problem hiding this comment.
I have no idea 🤔 This was authored by Ako so we'll never know 🎻
|
|
||
| Font weight can be used to express hierarchy or urgency of information. | ||
|
|
||
| We recommend using our standard [UI typography](#ui-typography) <BrandedContent currentBrand={props.brand} brands="core, professional, sustainable-views, whitelabel">or [Editorial typography](#editorial-typography)</BrandedContent> styles where possible. For custom typography, align to these standard styles where possible. For example when using Metric2 for UI use `semibold` over other bold weights. |
There was a problem hiding this comment.
For example when using Metric2 for UI use semibold over other bold weights. Why?
There was a problem hiding this comment.
👍 Let's save this kind of feedback for a review of type guidelines when we're done. I'm adding new usecases here but not removing any old stuff yet. We have another ticket to apply these usecases, which I think should include removing those that have been replaced.
| @@ -0,0 +1,16 @@ | |||
| import { Meta } from '@storybook/blocks'; | |||
There was a problem hiding this comment.
There is a typo in the directory path proffesional. Looks like an existing issue though.
There was a problem hiding this comment.
Good spot. Let's rename in another PR to keep the changelog down
|
|
||
| <Meta title="Core/Professional/o3-foundation/o3-typography/Usecases" /> | ||
|
|
||
| # Typography Usescases |
There was a problem hiding this comment.
These are nice additions to Storybook :) A note that in future we may run into increased maintenance where one update will need to be applied across multiple files.
It might be possible to extract the contend into a Markdown file and import in mdx
import { Description } from '@storybook/addon-docs/blocks';
import Readme from '.README.md';
<Meta title="Documentation|Readme" />
<Description>{Readme}</Description>There was a problem hiding this comment.
Yeah good shout, it's a real pain. I'm also wondering whether with the new tags/filtering feature we can tag stories with brands and avoid a whole load of repetition. I'm going to leave this pre migration though – unless by some miracle we find ourselves with some time
Add token attributes to the tooling export
The token export for tooling includes extra attributes to make it easier to identify groups of type tokens after the token tree has been flattened.
Add a utility class for display typography usecases
:wherejust be repeating information and doubling work. We may want to revisit
this.
Refactor the Preview component
A new PreviewPane component is responsible for the UI of the preview
interface. This makes it more flexible. It can now be used for smaller
previews, such as for utility classes which aren't a component and
do not have JSX.
The Preview component retains logic to render a JSX component,
fetch its JSX from a given file path for a code snippet, and
generates a HTML code snippet from there.
Add display type usecase docs to the website
This differs to the Figma view because: