We have updated the appearance ((they way the text looks) of all headings and also extended the appearance values with new ones.
Possible appearance values are now: H1, H2, H3, H4, H5, H6.
NOTICE: some appearance values have been moved, for instance H2 should now be H3. (See the following table) Check the storybook documentation to see the typography each appearance provide.
appearance prop values have changed. Old values have a mapping to new values, and 2 new values have been added (H2, H4).
The mapping is as follows:
| version 4 | version 5 |
|---|---|
| H1 | H1 |
| - | H2 (new) |
| H2 | H3 |
| - | H4 (new) |
| H3 | H5 |
| H4 | H6 |
Meaning that a <Heading appearance="H2"/> from version 4 should be transformed to <Heading appearance="H3"/> when using version 5.
Instead of having many appearance H.* indexes, we have a new component Heading which also uses the light prop which helps us define the desired typography.
We used to have a lot of options. All H0 - H4 values are now relevant only for the Heading component.
We used to have H0 - H4, which got mapped under the hood to html h1 - h5 respectively. Instead of doing it, we now support only H1 - H4 which will be mapped to h1 - h4.
<Text appearance="H0"> -> DEPRECATED
<Text appearance="H1"> -> <Heading appearance="H1">
<Text appearance="H1.1"> -> <Heading appearance="H1" light>
<Text appearance="H2"> -> <Heading appearance="H2">
<Text appearance="H2.1"> -> <Heading appearance="H2" light>
<Text appearance="H3"> -> <Heading appearance="H3">
<Text appearance="H4"> -> <Heading appearance="H4">