From f0e5f0a8a4d9ae9faf914a0150da8acb8b39fd79 Mon Sep 17 00:00:00 2001 From: shaharzil Date: Tue, 16 Apr 2024 18:00:36 +0300 Subject: [PATCH 1/2] feat(Text): Add new 12px font size (Text3) --- .../__stories__/EditableText.stories.js | 14 ++++ .../core/src/components/Text/TextConstants.ts | 3 +- .../src/components/Text/__stories__/Text.mdx | 74 ++++++++++++++++++- .../Text/__stories__/Text.stories.js | 66 ++++++++++++----- .../Text/__stories__/Text.stories.module.scss | 12 +++ .../typography/typography-migration-guide.mdx | 2 +- .../typography/typography.mdx | 23 ++++++ packages/core/src/styles/typography.scss | 5 ++ .../maps/core/_core-typography-map.scss | 5 +- .../config/tokens/core/_core-typography.scss | 3 + 10 files changed, 184 insertions(+), 23 deletions(-) diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js index a63589c057..e6f5b874e5 100644 --- a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js +++ b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js @@ -72,6 +72,20 @@ export const Types = { className={styles.editableText} /> +
+ + +
), name: "Types" diff --git a/packages/core/src/components/Text/TextConstants.ts b/packages/core/src/components/Text/TextConstants.ts index 9359779ab6..05e024d616 100644 --- a/packages/core/src/components/Text/TextConstants.ts +++ b/packages/core/src/components/Text/TextConstants.ts @@ -1,6 +1,7 @@ export enum TextType { TEXT1 = "text1", - TEXT2 = "text2" + TEXT2 = "text2", + TEXT3 = "text3" } export enum TextWeight { diff --git a/packages/core/src/components/Text/__stories__/Text.mdx b/packages/core/src/components/Text/__stories__/Text.mdx index a0c997e6e8..b627a86bb2 100644 --- a/packages/core/src/components/Text/__stories__/Text.mdx +++ b/packages/core/src/components/Text/__stories__/Text.mdx @@ -3,6 +3,8 @@ import { Tip } from "vibe-storybook-components"; import Text from "../Text"; import Flex from "../../Flex/Flex"; import Button from "../../Button/Button"; +import Icon from "../../Icon/Icon"; +import { Link } from "../../Icon/Icons"; import { EDITABLE_HEADING, HEADING, @@ -10,6 +12,7 @@ import { } from "../../../storybook/components/related-components/component-description-map"; import { TipHeading, TipLink } from "./Text.stories.helpers"; import * as TextStories from "./Text.stories"; +import styles from "./Text.stories.module.scss"; @@ -38,12 +41,17 @@ The text component serves as a wrapper for applying typography styles to the tex ## Usage + ## Variants ### Sizes and weights -Text component comes in two sizes: text1 (16px) and text2 (14px), and in three weights: bold (700), medium (600) and normal (400) +Text component comes in three sizes: text1 (16px), text2 (14px), text3 (12px) , and in three weights: bold (700), medium (600) and normal (400) @@ -137,6 +145,70 @@ A Text component with a link skin can be used to create a link within running te ), description: "Don't use ellipsis without providing a way for the user to read the full text." } + }, + { + positive: { + component: ( + + + + + Section title in text3 + + + + Short info explanation about the feature will come here. + + + ), + description: "Use text3 for section titles, short captions, and labels." + }, + negative: { + component: ( + + monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work and + streamline sales activities from start to finish. Explore monday sales CRM templates + + ), + description: "Don't use text3 as body text." + } + }, + { + positive: { + component: ( + + + + + Section title in text3 + + + + Short info explanation about the feature will come here. + + + ), + description: "Use only normal and medium weights for text3." + }, + negative: { + component: ( + + monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work and + streamline sales activities from start to finish. Explore monday sales CRM templates + + ), + description: "Don't use bold weight for text3, to ensure optimal readability." + } } ]} /> diff --git a/packages/core/src/components/Text/__stories__/Text.stories.js b/packages/core/src/components/Text/__stories__/Text.stories.js index b406a621a4..ef62e3d005 100644 --- a/packages/core/src/components/Text/__stories__/Text.stories.js +++ b/packages/core/src/components/Text/__stories__/Text.stories.js @@ -35,29 +35,57 @@ export const Overview = { export const SizesAndWeights = { render: () => ( - - This is text1 bold - - - This is text1 medium - - - This is text1 normal - - - This is text2 bold - - - This is text2 medium - - - This is text2 normal - + + + This is text1 bold + + + This is text1 medium + + + This is text1 normal + + + {/* todo - add spaces and dos and donts */} + + + This is text2 bold + + + This is text2 medium + + + This is text2 normal + + + + + This is text3 medium + + + This is text3 normal + + ), diff --git a/packages/core/src/components/Text/__stories__/Text.stories.module.scss b/packages/core/src/components/Text/__stories__/Text.stories.module.scss index 3a3fed15aa..d691cdcc04 100644 --- a/packages/core/src/components/Text/__stories__/Text.stories.module.scss +++ b/packages/core/src/components/Text/__stories__/Text.stories.module.scss @@ -19,3 +19,15 @@ @include spacing; width: 420px; } + +.textBoxContainer { + box-shadow: var(--box-shadow-small); + border-radius: var(--border-radius-small); + background-color: var(--primary-background-color); + padding: 12px 16px; + width: 60% +} + +.textBoxContent { + margin-left: var(--spacing-large); +} diff --git a/packages/core/src/storybook/stand-alone-documentaion/typography/typography-migration-guide.mdx b/packages/core/src/storybook/stand-alone-documentaion/typography/typography-migration-guide.mdx index aa776d99ae..779eeea274 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/typography/typography-migration-guide.mdx +++ b/packages/core/src/storybook/stand-alone-documentaion/typography/typography-migration-guide.mdx @@ -34,7 +34,7 @@ This change allows designers crating more accurate and refined designs, while en guidelines={[ <> Use the Text component for paragraphs, labels, and texts up to - 16px. It includes 2 variants: Text1 and Text2. Each variant has a fixed size and three + 16px. It includes 2 variants: Text1, Text2 and Text3. Each variant has a fixed size and three different weights. , <> diff --git a/packages/core/src/storybook/stand-alone-documentaion/typography/typography.mdx b/packages/core/src/storybook/stand-alone-documentaion/typography/typography.mdx index 723684d8a7..4e52105c94 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/typography/typography.mdx +++ b/packages/core/src/storybook/stand-alone-documentaion/typography/typography.mdx @@ -207,6 +207,29 @@ We use two key type styles: heading and text } ]} /> + + Text3 - 12px + + + Text3 medium + + ), + sass: "@include vibe-text(text3, medium);" + }, + { + name: ( + + Text3 normal + + ), + sass: "@include vibe-text(text3, normal);" + } + ]} + /> ## Text colors diff --git a/packages/core/src/styles/typography.scss b/packages/core/src/styles/typography.scss index 45f2ed0f83..8b47fe2713 100644 --- a/packages/core/src/styles/typography.scss +++ b/packages/core/src/styles/typography.scss @@ -55,6 +55,11 @@ $textClasses: ( "bold", "medium", "normal" + ), + "text3": ( + "bold", + "medium", + "normal" ) ); diff --git a/packages/style/src/config/maps/core/_core-typography-map.scss b/packages/style/src/config/maps/core/_core-typography-map.scss index 11e47f9ada..6d882d33e5 100644 --- a/packages/style/src/config/maps/core/_core-typography-map.scss +++ b/packages/style/src/config/maps/core/_core-typography-map.scss @@ -18,7 +18,10 @@ $core-typography-fonts-map: ( font-text1-normal: $font-text1-normal, font-text2-bold: $font-text2-bold, font-text2-medium: $font-text2-medium, - font-text2-normal: $font-text2-normal + font-text2-normal: $font-text2-normal, + font-text3-bold: $font-text3-bold, + font-text3-medium: $font-text3-medium, + font-text3-normal: $font-text3-normal ); $core-typography-letter-spacing-map: ( diff --git a/packages/style/src/config/tokens/core/_core-typography.scss b/packages/style/src/config/tokens/core/_core-typography.scss index c41fa0203d..7fd2164a69 100644 --- a/packages/style/src/config/tokens/core/_core-typography.scss +++ b/packages/style/src/config/tokens/core/_core-typography.scss @@ -24,6 +24,9 @@ $font-text1-normal: 400 16px / 22px var(--font-family); $font-text2-bold: 700 14px / 20px var(--font-family); $font-text2-medium: 600 14px / 20px var(--font-family); $font-text2-normal: 400 14px / 20px var(--font-family); +$font-text3-bold: 700 12px / 16px var(--font-family); +$font-text3-medium: 600 12px / 16px var(--font-family); +$font-text3-normal: 400 12px / 16px var(--font-family); // Letter spacing definition per semantics atom definitions $letter-spacing-h1-bold: -0.5px; From 15849ec83340b840ec5f089b274dc36cf42080e2 Mon Sep 17 00:00:00 2001 From: shaharzil Date: Wed, 17 Apr 2024 11:38:24 +0300 Subject: [PATCH 2/2] Update Text.stories.js --- packages/core/src/components/Text/__stories__/Text.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/src/components/Text/__stories__/Text.stories.js b/packages/core/src/components/Text/__stories__/Text.stories.js index ef62e3d005..9dea270cf3 100644 --- a/packages/core/src/components/Text/__stories__/Text.stories.js +++ b/packages/core/src/components/Text/__stories__/Text.stories.js @@ -56,7 +56,6 @@ export const SizesAndWeights = { This is text1 normal - {/* todo - add spaces and dos and donts */}