fix: Change Badge component to bold + set explicit line height (#755)

fix: Change Badge component to bold + set explicit line height

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v20.0.1
+
+-   [Fix] `Badge` component content is now bold and the appropriate line-height is enforced.
+
 # v20.0.0
 
 -   [BREAKING] Remove `usePrevious` hook

docs/iframe.html

@@ -476,4 +476,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.8b1ed5da.iframe.bundle.js"></script><script src="vendors~main.02391c1e.iframe.bundle.js"></script><script src="main.fb90f99a.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.8b1ed5da.iframe.bundle.js"></script><script src="vendors~main.f0057794.iframe.bundle.js"></script><script src="main.71e4b9cc.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1676045322579,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.2"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}
+{"generatedAt":1676640210503,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.15.0"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "20.0.0",
+    "version": "20.0.1",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

src/badge/badge.module.css

@@ -16,14 +16,15 @@
 
 .badge {
     font-family: var(--reactist-font-family);
-    font-weight: var(--reactist-font-weight-medium);
+    font-weight: var(--reactist-font-weight-strong);
     font-size: var(--reactist-badge-font-size);
     text-transform: uppercase;
     letter-spacing: 0.1em;
     border-radius: 3px;
-    padding: 1px var(--reactist-spacing-xsmall);
+    padding: 3px var(--reactist-spacing-xsmall);
     color: var(--reactist-badge-tint);
     background-color: var(--reactist-badge-fill);
+    line-height: calc(var(--reactist-badge-font-size) + 6px);
 }
 
 .badge-info {

src/badge/badge.stories.mdx

@@ -24,7 +24,17 @@ A badge used to bring attention to a particular UI element or functionality.
 
 The use of variants does not provide extra semantic meaning and is strictly visual. Ensure your content provides the necessary context for users by using the `aria-label` prop if needed.
 
-export function PlaygroundTemplate() {
+export function PlaygroundTemplate({ tone, label }) {
+    return (
+        <Stack space="large" maxWidth="medium">
+            <div>
+                <Badge tone={tone} label={label} />
+            </div>
+        </Stack>
+    )
+}
+
+export function BadgeExamples() {
     return (
         <Columns space="xxlarge">
             <Column width="content">
@@ -65,6 +75,29 @@ export function PlaygroundTemplate() {
     )
 }
 
+<Canvas>
+    <Story
+        name="Playground"
+        parameters={{ docs: { source: { type: 'code' } } }}
+        argTypes={{
+            tone: {
+                options: ['info', 'positive', 'promote', 'attention'],
+                control: { type: 'inline-radio' },
+                defaultValue: 'info',
+            },
+            label: {
+                control: { type: 'text' },
+                defaultValue: 'Upgrade',
+            },
+            id: { control: false },
+        }}
+    >
+        {PlaygroundTemplate.bind({})}
+    </Story>
+</Canvas>
+
+## Examples
+
 <Canvas>
     <Story
         name="Main demo"
@@ -73,7 +106,7 @@ export function PlaygroundTemplate() {
             chromatic: { disableSnapshot: false },
         }}
     >
-        {PlaygroundTemplate.bind({})}
+        <BadgeExamples />
     </Story>
 </Canvas>
 
@@ -152,7 +185,7 @@ export function DarkModeTemplate() {
                 '--reactist-badge-attention-fill': '#351E1C',
             }}
         >
-            <PlaygroundTemplate />
+            <BadgeExamples />
         </Box>
     )
 }

src/banner/banner.stories.mdx

@@ -28,8 +28,8 @@ export function StarIcon(theme) {
     return (
         <svg
             width="24"
-            height="25"
-            viewBox="0 0 24 25"
+            height="24"
+            viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
         >
@@ -46,8 +46,8 @@ export function ArchiveIcon(theme) {
         return (
             <svg
                 width="24"
-                height="25"
-                viewBox="0 0 24 25"
+                height="24"
+                viewBox="0 0 24 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
             >
@@ -63,8 +63,8 @@ export function ArchiveIcon(theme) {
     return (
         <svg
             width="24"
-            height="25"
-            viewBox="0 0 24 25"
+            height="24"
+            viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
         >
@@ -123,7 +123,7 @@ export function getButton(buttonText) {
     )
 }
 
-export function Template({ tone, title, description, action }) {
+export function PlaygroundTemplate({ tone, title, description, action }) {
     return (
         <Stack space="large" maxWidth="medium">
             <Banner
@@ -214,7 +214,7 @@ If you're intending to _alert_ the user of a certain error or warning condition,
             id: { control: false },
         }}
     >
-        {Template.bind({})}
+        {PlaygroundTemplate.bind({})}
     </Story>
 </Canvas>
 
@@ -264,7 +264,7 @@ export function DarkModeTemplate() {
             padding="xlarge"
             style={{
                 backgroundColor: '#202020',
-                /* tone="promotion" */
+                /* tone="info" */
                 '--reactist-banner-info-border': '#3D3D3D',
                 '--reactist-banner-info-background': '#282828',
                 '--reactist-banner-info-title': '#FFFFFF',