From c508299d5919eff3ad72cbe61f315c256938ef69 Mon Sep 17 00:00:00 2001 From: dzucconi Date: Mon, 20 Jul 2020 11:58:29 -0400 Subject: [PATCH 1/4] Removes serif option --- packages/palette/src/elements/Text/Text.story.tsx | 3 --- packages/palette/src/elements/Text/tokens.ts | 1 - 2 files changed, 4 deletions(-) diff --git a/packages/palette/src/elements/Text/Text.story.tsx b/packages/palette/src/elements/Text/Text.story.tsx index e6d9814f0..c8b073e29 100644 --- a/packages/palette/src/elements/Text/Text.story.tsx +++ b/packages/palette/src/elements/Text/Text.story.tsx @@ -131,7 +131,6 @@ storiesOf("Components/Text", module) letterSpacing: "tightest", }, { - fontFamily: "serif", fontSize: "70px", lineHeight: "solid", letterSpacing: "tight", @@ -143,12 +142,10 @@ storiesOf("Components/Text", module) letterSpacing: "tightest", }, { - fontFamily: "serif", fontSize: "55px", lineHeight: "solid", letterSpacing: "tightest", }, - { fontFamily: "serif" }, ] return ( diff --git a/packages/palette/src/elements/Text/tokens.ts b/packages/palette/src/elements/Text/tokens.ts index 6ecd8be9d..a25e4fe7a 100644 --- a/packages/palette/src/elements/Text/tokens.ts +++ b/packages/palette/src/elements/Text/tokens.ts @@ -5,5 +5,4 @@ export * from "./tokens.shared" */ export const TEXT_FONTS = { sans: '"ll-unica77", "Helvetica Neue", Helvetica, Arial, sans-serif', - serif: '"adobe-garamond-pro", "Times New Roman", Times, serif', } From 598685ca80f817cb51b6134a3f10518e98fe5253 Mon Sep 17 00:00:00 2001 From: dzucconi Date: Mon, 20 Jul 2020 11:58:47 -0400 Subject: [PATCH 2/4] Adds overflowEllipsis --- .../palette/src/elements/Text/Text.story.tsx | 12 ++++++++++++ packages/palette/src/elements/Text/Text.tsx | 16 +++++++++++----- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/palette/src/elements/Text/Text.story.tsx b/packages/palette/src/elements/Text/Text.story.tsx index c8b073e29..ed645cf25 100644 --- a/packages/palette/src/elements/Text/Text.story.tsx +++ b/packages/palette/src/elements/Text/Text.story.tsx @@ -178,3 +178,15 @@ storiesOf("Components/Text", module) ) }) + .add("overflowEllipsis", () => { + return ( + + All their equipment and instruments are alive. All their equipment and + instruments are alive. All their equipment and instruments are alive. + All their equipment and instruments are alive. All their equipment and + instruments are alive. All their equipment and instruments are alive. + All their equipment and instruments are alive. All their equipment and + instruments are alive. All their equipment and instruments are alive. + + ) + }) diff --git a/packages/palette/src/elements/Text/Text.tsx b/packages/palette/src/elements/Text/Text.tsx index 838a05631..219ab0981 100644 --- a/packages/palette/src/elements/Text/Text.tsx +++ b/packages/palette/src/elements/Text/Text.tsx @@ -1,13 +1,18 @@ import { themeGet } from "@styled-system/theme-get" +import styled, { css } from "styled-components" import { variant } from "styled-system" -import { styled as primitives } from "../../platform/primitives" import { textMixin, TextProps } from "./Text.shared" import { TEXT_VARIANTS } from "./tokens" -/** - * Text - */ -export const Text = primitives.Text` +/** Adds ellipsis to overflowing text */ +export const overflowEllipsisMixin = css` + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +` + +/** Text */ +export const Text = styled.div` ${variant({ variants: TEXT_VARIANTS.small })} @media (min-width: ${themeGet("breakpoints.0")}) { @@ -15,6 +20,7 @@ export const Text = primitives.Text` } ${textMixin} + ${({ overflowEllipsis }) => overflowEllipsis && overflowEllipsisMixin} ` Text.displayName = "Text" From 6e5729fbdba1adb875b8375316e072779cbd01bc Mon Sep 17 00:00:00 2001 From: dzucconi Date: Mon, 20 Jul 2020 11:58:55 -0400 Subject: [PATCH 3/4] Updates typography docs --- .../content/docs/tokens/Typography.mdx | 146 ++---------------- 1 file changed, 10 insertions(+), 136 deletions(-) diff --git a/packages/palette-docs/content/docs/tokens/Typography.mdx b/packages/palette-docs/content/docs/tokens/Typography.mdx index c808d6c5f..173c6a6fb 100644 --- a/packages/palette-docs/content/docs/tokens/Typography.mdx +++ b/packages/palette-docs/content/docs/tokens/Typography.mdx @@ -9,152 +9,26 @@ should be contextually applied. The goal is for this system to increase overall design consistency for our product as well as to increase efficiency for both the design and engineering teams. - + - Sans 16 - Sans 14 - Sans 12 - Sans 10 - Sans 8 - Sans 6 - Sans 5t - Sans 5 - Sans 4t - Sans 4 - Sans 3t - Sans 3 - Sans 2 - Sans 1 + Text largeTitle + Text title + Text subtitle + Text text + Text mediumText + Text caption + Text small - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - - Sans 16 - Sans 14 - Sans 12 - Sans 10 - Sans 8 - Sans 6 - Sans 5t - Sans 5 - Sans 4t - Sans 4 - Sans 3t - Sans 3 - Sans 2 - Sans 1 - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - - Serif 12 - Serif 10 - Serif 8 - Serif 6 - Serif 5t - Serif 5 - Serif 4t - Serif 4 - Serif 3t - Serif 3 - Serif 2 - Serif 1 - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - Serif 12 - Serif 10 - Serif 8 - Serif 6 - Serif 5t - Serif 5 - Serif 4t - Serif 4 - Serif 3t - Serif 3 - Serif 2 - Serif 1 - - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + - - - - - - - - - This is an h1 - - - This is an h2 - - - And this content is all within a p. - - - - - - - - - - {range("$10k", "$20k")} - - From 510f1c0356991d503447a158f402f20c0de9ae2a Mon Sep 17 00:00:00 2001 From: dzucconi Date: Mon, 20 Jul 2020 12:30:35 -0400 Subject: [PATCH 4/4] Supports overrides on variants --- packages/palette/src/elements/Text/Text.story.tsx | 6 +++++- packages/palette/src/elements/Text/Text.tsx | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/palette/src/elements/Text/Text.story.tsx b/packages/palette/src/elements/Text/Text.story.tsx index ed645cf25..f9a2fae7c 100644 --- a/packages/palette/src/elements/Text/Text.story.tsx +++ b/packages/palette/src/elements/Text/Text.story.tsx @@ -146,7 +146,11 @@ storiesOf("Components/Text", module) lineHeight: "solid", letterSpacing: "tightest", }, - ] + { + variant: 'text', + lineHeight: 'solid' + } + ] as const return ( diff --git a/packages/palette/src/elements/Text/Text.tsx b/packages/palette/src/elements/Text/Text.tsx index 219ab0981..c51e2a825 100644 --- a/packages/palette/src/elements/Text/Text.tsx +++ b/packages/palette/src/elements/Text/Text.tsx @@ -14,12 +14,13 @@ export const overflowEllipsisMixin = css` /** Text */ export const Text = styled.div` ${variant({ variants: TEXT_VARIANTS.small })} + ${textMixin} @media (min-width: ${themeGet("breakpoints.0")}) { ${variant({ variants: TEXT_VARIANTS.large })} + ${textMixin} } - ${textMixin} ${({ overflowEllipsis }) => overflowEllipsis && overflowEllipsisMixin} `