feat: Rename Text stack to align with Design library

CHANGELOG.md

@@ -4,6 +4,7 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduc
 
 ## v9.2.0-beta.10
 
+-   [Breaking] `Text` component now has its `size` attribute changed to accept `caption`, `copy`, `body`, and `subtitle`.
 -   [Fix] `Columns` component will now stretch within a flex container
 
 ## v9.2.0-beta.9

docs/iframe.html

@@ -245,4 +245,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.233fc521.iframe.bundle.js"></script><script src="vendors~main.7a1034ee.iframe.bundle.js"></script><script src="main.10470b2d.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.233fc521.iframe.bundle.js"></script><script src="vendors~main.7a1034ee.iframe.bundle.js"></script><script src="main.364064a5.iframe.bundle.js"></script></body></html>

package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <[email protected]> (http://doist.com)",
-    "version": "9.2.0-beta.9",
+    "version": "9.2.0-beta.10",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

src/new-components/base-field/base-field.module.css

@@ -1,7 +1,7 @@
 .container label {
     box-sizing: border-box;
     display: block;
-    font-size: var(--reactist-font-size-normal);
+    font-size: var(--reactist-font-size-body);
 }
 
 .primaryLabel {

src/new-components/base-field/base-field.tsx

@@ -8,7 +8,7 @@ import styles from './base-field.module.css'
 
 function FieldHint({ id, children }: { id: string; children: React.ReactNode }) {
     return (
-        <Text component="p" tone="secondary" size="small" id={id} className={styles.fieldHint}>
+        <Text component="p" tone="secondary" size="copy" id={id} className={styles.fieldHint}>
             {children}
         </Text>
     )

src/new-components/box/box.module.css

@@ -3,7 +3,7 @@
     border: 0;
     margin: 0;
     padding: 0;
-    font-size: var(--reactist-font-size-normal);
+    font-size: var(--reactist-font-size-body);
     font-family: inherit;
     vertical-align: baseline;
     background-color: transparent;

src/new-components/default-styles.less

@@ -23,10 +23,10 @@
     --reactist-spacing-xxlarge: 32px;
 
     /* font sizes */
-    --reactist-font-size-xsmall: 10px;
-    --reactist-font-size-small: 12px;
-    --reactist-font-size-normal: 14px;
-    --reactist-font-size-large: 16px;
+    --reactist-font-size-caption: 12px;
+    --reactist-font-size-copy: 13px;
+    --reactist-font-size-body: 14px;
+    --reactist-font-size-subtitle: 16px;
     --reactist-font-size-header: 20px;
     --reactist-font-size-header-large: 24px;
     --reactist-font-size-header-xlarge: 32px;

src/new-components/heading/heading.module.css

@@ -28,11 +28,11 @@ h1.size-larger {
     font-size: var(--reactist-font-size-header-large);
 }
 h1.size-smaller {
-    font-size: var(--reactist-font-size-large);
+    font-size: var(--reactist-font-size-subtitle);
 }
 
 h2.heading {
-    font-size: var(--reactist-font-size-large);
+    font-size: var(--reactist-font-size-subtitle);
 }
 h2.size-largest {
     font-size: var(--reactist-font-size-header-large);
@@ -41,20 +41,20 @@ h2.size-larger {
     font-size: var(--reactist-font-size-header);
 }
 h2.size-smaller {
-    font-size: var(--reactist-font-size-normal);
+    font-size: var(--reactist-font-size-body);
 }
 
 h3.heading {
-    font-size: var(--reactist-font-size-normal);
+    font-size: var(--reactist-font-size-body);
 }
 h3.size-largest {
     font-size: var(--reactist-font-size-header);
 }
 h3.size-larger {
-    font-size: var(--reactist-font-size-large);
+    font-size: var(--reactist-font-size-subtitle);
 }
 h3.size-smaller {
-    font-size: var(--reactist-font-size-small);
+    font-size: var(--reactist-font-size-caption);
 }
 
 h4.heading,
@@ -64,7 +64,7 @@ h6.heading {
      * unlike at higher levels, this one is kept as the same size as h3's
      * you can make it two levels larger visually, but making it smaller has no effect
      */
-    font-size: var(--reactist-font-size-normal);
+    font-size: var(--reactist-font-size-body);
 }
 
 h4.size-largest,
@@ -76,7 +76,7 @@ h6.size-largest {
 h4.size-larger,
 h5.size-larger,
 h6.size-larger {
-    font-size: var(--reactist-font-size-large);
+    font-size: var(--reactist-font-size-subtitle);
 }
 
 /* h4/h5/h6 can't be made smaller, maybe we reconsider this? */

src/new-components/select-field/select-field.module.css

@@ -23,7 +23,7 @@
     --tmp-line-height-increase: 4px;
     --tmp-vertical-padding: calc(
         (
-                var(--tmp-desired-height) - var(--reactist-font-size-normal) -
+                var(--tmp-desired-height) - var(--reactist-font-size-body) -
                     var(--tmp-line-height-increase)
             ) / 2
     );
@@ -36,8 +36,8 @@
     background: none;
     border-radius: var(--reactist-border-radius-small);
     border: 1px solid var(--reactist-framework-border);
-    font-size: var(--reactist-font-size-normal);
-    line-height: calc(var(--reactist-font-size-normal) + 4px);
+    font-size: var(--reactist-font-size-body);
+    line-height: calc(var(--reactist-font-size-body) + 4px);
     margin: 0;
 }
 

src/new-components/text-field/text-field.module.css

@@ -31,13 +31,13 @@
     --tmp-line-height-increase: 4px;
     --tmp-vertical-padding: calc(
         (
-                var(--tmp-desired-height) - var(--reactist-font-size-normal) -
+                var(--tmp-desired-height) - var(--reactist-font-size-body) -
                     var(--tmp-line-height-increase)
             ) / 2
     );
 
-    font-size: var(--reactist-font-size-normal);
-    line-height: calc(var(--reactist-font-size-normal) + 4px);
+    font-size: var(--reactist-font-size-body);
+    line-height: calc(var(--reactist-font-size-body) + 4px);
     padding: var(--tmp-vertical-padding) 10px;
     margin: 0;
 }

src/new-components/text/text.module.css

@@ -1,26 +1,26 @@
 .text {
-    font-size: var(--reactist-font-size-normal);
+    font-size: var(--reactist-font-size-body);
     font-weight: var(--reactist-font-weight-regular);
     color: var(--reactist-content-primary);
 }
 
-.size-xsmall {
-    font-size: var(--reactist-font-size-xsmall);
+.size-caption {
+    font-size: var(--reactist-font-size-caption);
 }
-.size-small {
-    font-size: var(--reactist-font-size-small);
+.size-copy {
+    font-size: var(--reactist-font-size-copy);
 }
-.size-large {
-    font-size: var(--reactist-font-size-large);
+.size-body {
+    font-size: var(--reactist-font-size-body);
 }
-.size-xlarge {
-    font-size: var(--reactist-font-size-large);
+.size-subtitle {
+    font-size: var(--reactist-font-size-subtitle);
 }
 
-.weight-medium {
+.weight-semibold {
     font-weight: var(--reactist-font-weight-medium);
 }
-.weight-strong {
+.weight-bold {
     font-weight: var(--reactist-font-weight-strong);
 }
 

src/new-components/text/text.stories.tsx

@@ -8,8 +8,8 @@ export default {
     title: 'Design system/Text',
     component: Text,
     argTypes: {
-        size: select(['xsmall', 'small', 'standard', 'large', 'xlarge'], 'standard'),
-        weight: select(['regular', 'medium', 'strong'], 'regular'),
+        size: select(['caption', 'copy', 'body', 'subtitle'], 'body'),
+        weight: select(['regular', 'semibold', 'bold'], 'regular'),
         lineClamp: select([1, 2, 3, 4, 5], 1),
         children: {
             control: {
@@ -25,84 +25,68 @@ export function TextStory() {
     return (
         <section className="story">
             <Stack space="medium">
-                <Text size="xlarge" weight="strong" tone="secondary">
-                    Text, xlarge, strong, secondary (16px)
+                <Text size="subtitle" weight="regular">
+                    Subtitle Regular
                 </Text>
-                <Text size="xlarge" weight="strong" tone="danger">
-                    Text, xlarge, strong, danger
+                <Text size="subtitle" tone="secondary">
+                    Subtitle Secondary
                 </Text>
-                <Text size="xlarge" weight="strong">
-                    Text, xlarge, strong
+                <Text size="subtitle" tone="danger">
+                    Subtitle Danger
                 </Text>
-                <Text size="xlarge" weight="medium">
-                    Text, xlarge, medium
+                <Text size="subtitle" weight="semibold">
+                    Subtitle Semibold
                 </Text>
-                <Text size="xlarge" weight="regular">
-                    Text, xlarge, regular
+                <Text size="subtitle" weight="bold">
+                    Subtitle Bold
                 </Text>
 
-                <Text size="large" weight="strong" tone="secondary">
-                    Text, large, strong, secondary (16px)
+                <Text size="body" weight="regular">
+                    Body Regular
                 </Text>
-                <Text size="large" weight="strong" tone="danger">
-                    Text, large, strong, danger
+                <Text size="body" tone="secondary">
+                    Body Secondary
                 </Text>
-                <Text size="large" weight="strong">
-                    Text, large, strong
+                <Text size="body" tone="danger">
+                    Body Danger
                 </Text>
-                <Text size="large" weight="medium">
-                    Text, large, medium
+                <Text size="body" weight="semibold">
+                    Body Semibold
                 </Text>
-                <Text size="large" weight="regular">
-                    Text, large, regular
+                <Text size="body" weight="bold">
+                    Body Bold
                 </Text>
 
-                <Text size="standard" weight="strong" tone="secondary">
-                    Text, standard, strong, secondary (14px)
+                <Text size="copy" weight="regular">
+                    Copy Regular
                 </Text>
-                <Text size="standard" weight="strong" tone="danger">
-                    Text, standard, strong, danger
+                <Text size="copy" tone="secondary">
+                    Copy Secondary
                 </Text>
-                <Text size="standard" weight="strong">
-                    Text, standard, strong
+                <Text size="copy" tone="danger">
+                    Copy Danger
                 </Text>
-                <Text size="standard" weight="medium">
-                    Text, standard, medium
+                <Text size="copy" weight="semibold">
+                    Copy Semibold
                 </Text>
-                <Text size="standard" weight="regular">
-                    Text, standard, regular
+                <Text size="copy" weight="bold">
+                    Copy Bold
                 </Text>
 
-                <Text size="small" weight="strong" tone="secondary">
-                    Text, small, strong, secondary (12px)
+                <Text size="caption" weight="regular">
+                    Caption Regular
                 </Text>
-                <Text size="small" weight="strong" tone="danger">
-                    Text, small, strong, danger
+                <Text size="caption" tone="secondary">
+                    Caption Secondary
                 </Text>
-                <Text size="small" weight="strong">
-                    Text, small, strong
+                <Text size="caption" tone="danger">
+                    Caption Danger
                 </Text>
-                <Text size="small" weight="medium">
-                    Text, small, medium
+                <Text size="caption" weight="semibold">
+                    Caption Semibold
                 </Text>
-                <Text size="small" weight="regular">
-                    Text, small, regular
-                </Text>
-
-                <Text size="xsmall" weight="strong" tone="secondary">
-                    Text, xsmall, strong, secondary (10px)
-                </Text>
-                <Text size="xsmall" weight="strong" tone="danger">
-                    Text, xsmall, strong, danger
-                </Text>
-                <Text size="xsmall" weight="strong">
-                    Text, xsmall, strong
-                </Text>
-                <Text size="xsmall" weight="medium">
-                    Text, xsmall, medium
-                </Text>
-                <Text size="xsmall" weight="regular">
-                    Text, ssmall, regular
+                <Text size="caption" weight="bold">
+                    Caption Bold
                 </Text>
             </Stack>
         </section>

src/new-components/text/text.tsx

@@ -10,16 +10,16 @@ import styles from './text.module.css'
 type TextProps = {
     component?: ComponentTypes
     children: React.ReactNode
-    size?: 'xsmall' | 'small' | 'standard' | 'large' | 'xlarge'
-    weight?: 'regular' | 'medium' | 'strong'
+    size?: 'caption' | 'copy' | 'body' | 'subtitle'
+    weight?: 'regular' | 'semibold' | 'bold'
     tone?: Tone
     lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'
 }
 
 const Text = forwardRefWithAs<TextProps>(function Text(
     {
         component = 'span',
-        size = 'standard',
+        size = 'body',
         weight = 'regular',
         tone = 'normal',
         children,
@@ -37,7 +37,7 @@ const Text = forwardRefWithAs<TextProps>(function Text(
             component={component}
             className={[
                 styles.text,
-                size !== 'standard' ? getClassNames(styles, 'size', size) : null,
+                size !== 'body' ? getClassNames(styles, 'size', size) : null,
                 weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,
                 tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,
                 lineClampMultipleLines ? styles.lineClamp : null,