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

Removes serif from Text #734

Merged
merged 4 commits into from
Jul 20, 2020
Merged

Removes serif from Text #734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c508299
Removes serif option
dzucconi Jul 20, 2020
598685c
Adds overflowEllipsis
dzucconi Jul 20, 2020
6e5729f
Updates typography docs
dzucconi Jul 20, 2020
510f1c0
Supports overrides on variants
dzucconi Jul 20, 2020
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
146 changes: 10 additions & 136 deletions packages/palette-docs/content/docs/tokens/Typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Playground showToggle={true} title="Sans" expanded={true}>
<Playground showToggle={true} title="Text" expanded={true}>
<Flex mt={4} justifyContent="space-between">
<Box>
<Sans size="16">Sans 16</Sans>
<Sans size="14">Sans 14</Sans>
<Sans size="12">Sans 12</Sans>
<Sans size="10">Sans 10</Sans>
<Sans size="8">Sans 8</Sans>
<Sans size="6">Sans 6</Sans>
<Sans size="5t">Sans 5t</Sans>
<Sans size="5">Sans 5</Sans>
<Sans size="4t">Sans 4t</Sans>
<Sans size="4">Sans 4</Sans>
<Sans size="3t">Sans 3t</Sans>
<Sans size="3">Sans 3</Sans>
<Sans size="2">Sans 2</Sans>
<Sans size="1">Sans 1</Sans>
<Text variant="largeTitle">Text largeTitle</Text>
<Text variant="title">Text title</Text>
<Text variant="subtitle">Text subtitle</Text>
<Text variant="text">Text text</Text>
<Text variant="mediumText">Text mediumText</Text>
<Text variant="caption">Text caption</Text>
<Text variant="small">Text small</Text>
</Box>
<Flex width="50%" px={2} alignItems="center">
<BorderBox>
<Sans size="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Sans>
</BorderBox>
</Flex>
</Flex>
</Playground>

<Spacer my={4} />

<Playground showToggle={true} title="Sans with unstable_trackIn (narrow)" expanded={false}>
<Flex mt={4} justifyContent="space-between">
<Box>
<Sans size="16" unstable_trackIn>Sans 16</Sans>
<Sans size="14" unstable_trackIn>Sans 14</Sans>
<Sans size="12" unstable_trackIn>Sans 12</Sans>
<Sans size="10" unstable_trackIn>Sans 10</Sans>
<Sans size="8" unstable_trackIn>Sans 8</Sans>
<Sans size="6" unstable_trackIn>Sans 6</Sans>
<Sans size="5t" unstable_trackIn>Sans 5t</Sans>
<Sans size="5" unstable_trackIn>Sans 5</Sans>
<Sans size="4t" unstable_trackIn>Sans 4t</Sans>
<Sans size="4" unstable_trackIn>Sans 4</Sans>
<Sans size="3t" unstable_trackIn>Sans 3t</Sans>
<Sans size="3" unstable_trackIn>Sans 3</Sans>
<Sans size="2" unstable_trackIn>Sans 2</Sans>
<Sans size="1" unstable_trackIn>Sans 1</Sans>
</Box>
<Flex width="50%" px={2} alignItems="center">
<BorderBox>
<Sans size="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Sans>
</BorderBox>
</Flex>
</Flex>
</Playground>

<Spacer my={4} />

<Playground showToggle={true} title="Serif" expanded={true}>
<Flex justifyContent="space-between">
<Box>
<Serif size="12">Serif 12</Serif>
<Serif size="10">Serif 10</Serif>
<Serif size="8">Serif 8</Serif>
<Serif size="6">Serif 6</Serif>
<Serif size="5t">Serif 5t</Serif>
<Serif size="5">Serif 5</Serif>
<Serif size="4t">Serif 4t</Serif>
<Serif size="4">Serif 4</Serif>
<Serif size="3t">Serif 3t</Serif>
<Serif size="3">Serif 3</Serif>
<Serif size="2">Serif 2</Serif>
<Serif size="1">Serif 1</Serif>
</Box>
<Flex width="50%" px={2} alignItems="center">
<BorderBox>
<Serif size="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Serif>
</BorderBox>
</Flex>
</Flex>
</Playground>

<Spacer my={4} />

<Playground showToggle={true} title="Serif with unstable_trackIn (narrow)" expanded={false}>
<Flex justifyContent="space-between">
<Box>
<Serif size="12" unstable_trackIn>Serif 12</Serif>
<Serif size="10" unstable_trackIn>Serif 10</Serif>
<Serif size="8" unstable_trackIn>Serif 8</Serif>
<Serif size="6" unstable_trackIn>Serif 6</Serif>
<Serif size="5t" unstable_trackIn>Serif 5t</Serif>
<Serif size="5" unstable_trackIn>Serif 5</Serif>
<Serif size="4t" unstable_trackIn>Serif 4t</Serif>
<Serif size="4" unstable_trackIn>Serif 4</Serif>
<Serif size="3t" unstable_trackIn>Serif 3t</Serif>
<Serif size="3" unstable_trackIn>Serif 3</Serif>
<Serif size="2" unstable_trackIn>Serif 2</Serif>
<Serif size="1" unstable_trackIn>Serif 1</Serif>
</Box>
<Flex width="50%" px={2} alignItems="center">
<BorderBox>
<Serif size="5">
<Text variant="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Serif>
</Text>
</BorderBox>
</Flex>
</Flex>
</Playground>

<Spacer my={4} />

<Playground
showToggle={true}
title="Specifying the element type"
expanded={true}
>
<Flex justifyContent="space-between" flexDirection="column">
<Box>
<Serif size="8" element="h1">
This is an h1
</Serif>
<Serif size="6" element="h2">
This is an h2
</Serif>
<Sans size="4" element="p">
And this content is all within a p.
</Sans>
</Box>
</Flex>
</Playground>

<Playground showToggle={true} title="Using endash in ranges" expanded={true}>
<Flex justifyContent="space-between" flexDirection="column">
<Box>
<Serif size="8" element="h1">
{range("$10k", "$20k")}
</Serif>
</Box>
</Flex>
</Playground>
21 changes: 17 additions & 4 deletions packages/palette/src/elements/Text/Text.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,6 @@ storiesOf("Components/Text", module)
letterSpacing: "tightest",
},
{
fontFamily: "serif",
fontSize: "70px",
lineHeight: "solid",
letterSpacing: "tight",
Expand All @@ -143,13 +142,15 @@ storiesOf("Components/Text", module)
letterSpacing: "tightest",
},
{
fontFamily: "serif",
fontSize: "55px",
lineHeight: "solid",
letterSpacing: "tightest",
},
{ fontFamily: "serif" },
]
{
variant: 'text',
lineHeight: 'solid'
}
] as const

return (
<Table>
Expand Down Expand Up @@ -181,3 +182,15 @@ storiesOf("Components/Text", module)
</Table>
)
})
.add("overflowEllipsis", () => {
return (
<Text variant="text" overflowEllipsis>
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.
</Text>
)
})
19 changes: 13 additions & 6 deletions packages/palette/src/elements/Text/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
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<TextProps>`
/** Adds ellipsis to overflowing text */
export const overflowEllipsisMixin = css`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`

/** Text */
export const Text = styled.div<TextProps & { overflowEllipsis?: boolean }>`
${variant({ variants: TEXT_VARIANTS.small })}
${textMixin}

@media (min-width: ${themeGet("breakpoints.0")}) {
${variant({ variants: TEXT_VARIANTS.large })}
${textMixin}
Copy link
Member Author

Choose a reason for hiding this comment

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

Just PR-creeped this bug fix in. Due to how styled-components emits the media query CSS, we need to double include the textMixin in both contexts so when you specify say a solid line-height for Text (which is what I need in the NavBar, for instance — a valid use-case, the media query doesn't override it.

}

${textMixin}
${({ overflowEllipsis }) => overflowEllipsis && overflowEllipsisMixin}
`

Text.displayName = "Text"
Expand Down
1 change: 0 additions & 1 deletion packages/palette/src/elements/Text/tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}