Skip to content

Commit

Permalink
Merge pull request #1035 from artsy/dzucconi/feat/pill-updates
Browse files Browse the repository at this point in the history 
feat(pill): updates pill variants to match current specs
  • Loading branch information
@dzucconi
dzucconi committed Sep 15, 2021
2 parents 96b962e + 88a3e62 commit 4a871fc
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 64 deletions.
86 changes: 22 additions & 64 deletions packages/palette/src/elements/Pill/Pill.tsx
View file
Expand Up @@ -2,12 +2,10 @@ import { themeGet } from "@styled-system/theme-get"
import React from "react"
import styled from "styled-components"
import { css } from "styled-components"
import { variant } from "styled-system"
import { DROP_SHADOW, INNER_SHADOW } from "../../helpers/shadow"
import { CheckIcon } from "../../svgs"
import { BoxProps } from "../Box"
import { Clickable, ClickableProps } from "../Clickable"
import { Text } from "../Text"
import { PILL_VARIANTS } from "./tokens"

export const PILL_VARIANT_NAMES = [
"textRound",
Expand All @@ -16,48 +14,8 @@ export const PILL_VARIANT_NAMES = [
"artist",
] as const

type PillVariant = typeof PILL_VARIANT_NAMES[number]
type PillState = "focus" | "hover" | "active"

const STATES: Record<PillState, any> = {
hover: css`
background-color: transparent;
border-color: transparent;
box-shadow: ${DROP_SHADOW};
`,
focus: css`
background-color: ${themeGet("colors.black10")};
border-color: transparent;
box-shadow: ${INNER_SHADOW};
`,
active: css`
background-color: transparent;
border-color: ${themeGet("colors.black60")};
`,
}

const PILL_VARIANTS: Record<PillVariant, BoxProps> = {
textRound: {
borderRadius: "15px",
height: "30px",
px: 1,
},
textSquare: {
height: "30px",
px: 1,
},
filter: {
borderRadius: "20px",
height: "40px",
px: 2,
},
artist: {
borderRadius: "25px",
height: "50px",
pr: 2,
pl: 1,
},
}
export type PillVariant = typeof PILL_VARIANT_NAMES[number]
export type PillState = "default" | "focus" | "hover" | "active"

/** PillProps */
export type PillProps = ClickableProps & {
Expand Down Expand Up @@ -93,21 +51,23 @@ const Container = styled(Clickable)<PillProps>`
transition: color 0.25s ease, border-color 0.25s ease,
background-color 0.25s ease, box-shadow 0.25s ease;
${variant({ variants: PILL_VARIANTS })}
${(props) => {
const states = PILL_VARIANTS[props.variant ?? "textRound"]
return css`
${props.hover && STATES.hover}
${props.focus && STATES.focus}
${"active" in props && props.active && STATES.active}
${states.default}
${props.hover && states.hover}
${props.focus && states.focus}
${"active" in props && props.active && states.active}
&:hover {
${STATES.hover}
${states.hover}
}
&:focus {
outline: 0;
${STATES.focus}
${states.focus}
${"active" in props && props.active && states.active}
}
`
}}
Expand Down Expand Up @@ -135,18 +95,16 @@ export const Pill: React.FC<PillProps> = ({ children, ...rest }) => {
)}

{rest.variant === "artist" && (
<>
<Thumbnail
{...(rest.src
? { src: typeof rest.src === "string" ? rest.src : rest.src[0] }
: {})}
{...(rest.src && typeof rest.src !== "string" && rest.src[1]
? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }
: {})}
// Intentionally empty string
alt=""
/>
</>
<Thumbnail
{...(rest.src
? { src: typeof rest.src === "string" ? rest.src : rest.src[0] }
: {})}
{...(rest.src && typeof rest.src !== "string" && rest.src[1]
? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }
: {})}
// Intentionally empty string
alt=""
/>
)}

<Text variant="xs" lineHeight={1} overflowEllipsis>
Expand Down
85 changes: 85 additions & 0 deletions packages/palette/src/elements/Pill/tokens.ts
View file
@@ -0,0 +1,85 @@
import { themeGet } from "@styled-system/theme-get"
import { css } from "styled-components"
import { DROP_SHADOW } from "../../helpers/shadow"
import { PillState, PillVariant } from "./Pill"

export const PILL_VARIANTS: Record<PillVariant, Record<PillState, any>> = {
textRound: {
default: css`
border-radius: 15px;
height: 30px;
padding: 0 ${themeGet("space.1")};
`,
hover: css`
background-color: transparent;
border-color: transparent;
box-shadow: ${DROP_SHADOW};
color: ${themeGet("colors.brand")};
`,
focus: css`
background-color: ${themeGet("colors.black5")};
border-color: ${themeGet("colors.brand")};
`,
active: css`
background-color: transparent;
border-color: ${themeGet("colors.black60")};
`,
},
textSquare: {
default: css`
height: 30px;
padding: 0 ${themeGet("space.1")};
`,
hover: css`
background-color: transparent;
border-color: transparent;
box-shadow: ${DROP_SHADOW};
color: ${themeGet("colors.brand")};
`,
focus: css`
background-color: ${themeGet("colors.black5")};
border-color: ${themeGet("colors.brand")};
`,
active: css`
background-color: transparent;
border-color: ${themeGet("colors.black60")};
`,
},
filter: {
default: css`
border-radius: 20px;
height: 40px;
padding: 0 ${themeGet("space.2")};
`,
hover: css`
background-color: transparent;
border-color: transparent;
box-shadow: ${DROP_SHADOW};
`,
focus: css`
background-color: ${themeGet("colors.black5")};
border-color: ${themeGet("colors.brand")};
`,
active: css`
background-color: transparent;
border-color: ${themeGet("colors.black60")};
`,
},
artist: {
default: css`
border-radius: 25px;
height: 50px;
padding: 0 ${themeGet("space.2")} 0 ${themeGet("space.1")};
`,
hover: css`
background-color: transparent;
border-color: transparent;
box-shadow: ${DROP_SHADOW};
`,
focus: css`
background-color: ${themeGet("colors.black5")};
border-color: ${themeGet("colors.brand")};
`,
active: css``, // Not used
},
}

0 comments on commit 4a871fc

Please sign in to comment.