Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Text): Add new 12px font size (Text3) #2072

Merged
merged 2 commits into from
Apr 17, 2024
Merged

feat(Text): Add new 12px font size (Text3) #2072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0e5f0a
feat(Text): Add new 12px font size (Text3)
shaharzil Apr 16, 2024
15849ec
Update Text.stories.js
shaharzil Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/core/src/components/EditableText/__stories__/EditableText.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,20 @@ export const Types = {
className={styles.editableText}
/>
</div>
<div className={styles.typeContainer}>
<EditableText
type={EditableText.types.TEXT3}
weight={EditableText.weights.NORMAL}
value="Text3 Normal"
className={styles.editableText}
/>
<EditableText
type={EditableText.types.TEXT3}
weight={EditableText.weights.MEDIUM}
value="Text3 Medium"
className={styles.editableText}
/>
</div>
</div>
),
name: "Types"
Expand Down
3 changes: 2 additions & 1 deletion packages/core/src/components/Text/TextConstants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export enum TextType {
TEXT1 = "text1",
TEXT2 = "text2"
TEXT2 = "text2",
TEXT3 = "text3"
}

export enum TextWeight {
Expand Down
74 changes: 73 additions & 1 deletion packages/core/src/components/Text/__stories__/Text.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ 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,
LINK
} 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";

<Meta of={TextStories} />

Expand Down Expand Up @@ -38,12 +41,17 @@ The text component serves as a wrapper for applying typography styles to the tex
## Usage

<UsageGuidelines guidelines={["Use it to display text formed from a single sentence, or multiple sentences."]} />
<UsageGuidelines
guidelines={[
"Use Text3 for short caption text, label or as explanation text in menus. In any other case, use Text1 or Text 2."
]}
/>

## 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)

<Canvas of={TextStories.SizesAndWeights} />

Expand Down Expand Up @@ -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: (
<Flex
direction={Flex.directions.COLUMN}
align={Flex.align.START}
gap={Flex.gaps.XS}
className={styles.textBoxContainer}
>
<Flex style={{ width: "90%" }} gap={Flex.gaps.SMALL}>
<Icon icon={Link} />
<Text color="secondary" maxLines={3} type={Text.types.TEXT3}>
Section title in text3
</Text>
</Flex>
<Text className={styles.textBoxContent} maxLines={3} type={Text.types.TEXT1}>
Short info explanation about the feature will come here.
</Text>
</Flex>
),
description: "Use text3 for section titles, short captions, and labels."
},
negative: {
component: (
<Text maxLines={5} type={Text.types.TEXT3} style={{ width: "70%" }}>
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
</Text>
),
description: "Don't use text3 as body text."
}
},
{
positive: {
component: (
<Flex
direction={Flex.directions.COLUMN}
align={Flex.align.START}
gap={Flex.gaps.XS}
className={styles.textBoxContainer}
>
<Flex style={{ width: "90%" }} gap={Flex.gaps.SMALL}>
<Icon icon={Link} />
<Text color="secondary" maxLines={3} type={Text.types.TEXT3}>
Section title in text3
</Text>
</Flex>
<Text className={styles.textBoxContent} maxLines={3} type={Text.types.TEXT1}>
Short info explanation about the feature will come here.
</Text>
</Flex>
),
description: "Use only normal and medium weights for text3."
},
negative: {
component: (
<Text maxLines={5} weight={Text.weights.BOLD} type={Text.types.TEXT3} style={{ width: "70%" }}>
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
</Text>
),
description: "Don't use bold weight for text3, to ensure optimal readability."
}
}
]}
/>
Expand Down
65 changes: 46 additions & 19 deletions packages/core/src/components/Text/__stories__/Text.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,29 +35,56 @@ export const Overview = {
export const SizesAndWeights = {
render: () => (
<Flex
gap={Flex.gaps.SMALL}
gap={Flex.gaps.LARGE}
direction={Flex.directions.COLUMN}
justify={Flex.justify.START}
align={Flex.align.START}
>
<Text type={Text.types.TEXT1} weight={Text.weights.BOLD}>
This is text1 bold
</Text>
<Text type={Text.types.TEXT1} weight={Text.weights.MEDIUM}>
This is text1 medium
</Text>
<Text type={Text.types.TEXT1} weight={Text.weights.NORMAL}>
This is text1 normal
</Text>
<Text type={Text.types.TEXT2} weight={Text.weights.BOLD}>
This is text2 bold
</Text>
<Text type={Text.types.TEXT2} weight={Text.weights.MEDIUM}>
This is text2 medium
</Text>
<Text type={Text.types.TEXT2} weight={Text.weights.NORMAL}>
This is text2 normal
</Text>
<Flex
gap={Flex.gaps.SMALL}
direction={Flex.directions.COLUMN}
justify={Flex.justify.START}
align={Flex.align.START}
>
<Text type={Text.types.TEXT1} weight={Text.weights.BOLD}>
This is text1 bold
</Text>
<Text type={Text.types.TEXT1} weight={Text.weights.MEDIUM}>
This is text1 medium
</Text>
<Text type={Text.types.TEXT1} weight={Text.weights.NORMAL}>
This is text1 normal
</Text>
</Flex>
<Flex
gap={Flex.gaps.SMALL}
direction={Flex.directions.COLUMN}
justify={Flex.justify.START}
align={Flex.align.START}
>
<Text type={Text.types.TEXT2} weight={Text.weights.BOLD}>
This is text2 bold
</Text>
<Text type={Text.types.TEXT2} weight={Text.weights.MEDIUM}>
This is text2 medium
</Text>
<Text type={Text.types.TEXT2} weight={Text.weights.NORMAL}>
This is text2 normal
</Text>
</Flex>
<Flex
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We said that we're gonna support bold but not document it, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we want to disable it typescript-wise?
and to not allow the mixin variants for it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, we don't want to block them so it won't look like a bug. we will just guide them to use It right (in Figma)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got ya 👍🏼

gap={Flex.gaps.SMALL}
direction={Flex.directions.COLUMN}
justify={Flex.justify.START}
align={Flex.align.START}
>
<Text type={Text.types.TEXT3} weight={Text.weights.MEDIUM}>
This is text3 medium
</Text>
<Text type={Text.types.TEXT3} weight={Text.weights.NORMAL}>
This is text3 normal
</Text>
</Flex>
</Flex>
),

Expand Down
12 changes: 12 additions & 0 deletions packages/core/src/components/Text/__stories__/Text.stories.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
2 changes: 1 addition & 1 deletion ...rc/storybook/stand-alone-documentaion/typography/typography-migration-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ This change allows designers crating more accurate and refined designs, while en
guidelines={[
<>
Use the <StorybookLink page="Text/Text">Text</StorybookLink> component for paragraphs, labels, and texts up to
16px. It includes 2 variants: <code>Text1</code> and <code>Text2</code>. Each variant has a fixed size and three
16px. It includes 2 variants: <code>Text1</code>, <code>Text2</code> and <code>Text3</code>. Each variant has a fixed size and three
different weights.
</>,
<>
Expand Down
23 changes: 23 additions & 0 deletions packages/core/src/storybook/stand-alone-documentaion/typography/typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,29 @@ We use two key type styles: heading and text
}
]}
/>
<Text type={Text.types.TEXT1} weight={Text.weights.BOLD}>
Text3 - 12px
</Text>
<ExamplesTable
data={[
{
name: (
<Text type={Text.types.TEXT3} weight={Text.weights.MEDIUM}>
Text3 medium
</Text>
),
sass: "@include vibe-text(text3, medium);"
},
{
name: (
<Text type={Text.types.TEXT3} weight={Text.weights.NORMAL}>
Text3 normal
</Text>
),
sass: "@include vibe-text(text3, normal);"
}
]}
/>
</Frame>

## Text colors
Expand Down
5 changes: 5 additions & 0 deletions packages/core/src/styles/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ $textClasses: (
"bold",
"medium",
"normal"
),
"text3": (
"bold",
"medium",
"normal"
)
);

Expand Down
5 changes: 4 additions & 1 deletion packages/style/src/config/maps/core/_core-typography-map.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand Down
3 changes: 3 additions & 0 deletions packages/style/src/config/tokens/core/_core-typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down