From aefc80833142c5fad2b0ce9c0f78a76418a8333f Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Mar 2021 12:49:00 -0600 Subject: [PATCH 01/29] remove deprecated theme variables --- src/theme-preval.js | 327 +------------------------------------------- 1 file changed, 4 insertions(+), 323 deletions(-) diff --git a/src/theme-preval.js b/src/theme-preval.js index a2f715f7eb4..f740931919e 100644 --- a/src/theme-preval.js +++ b/src/theme-preval.js @@ -2,100 +2,9 @@ // This file needs to be a JavaScript file using CommonJS to be compatiable with preval const {default: primitives} = require('@primer/primitives') -const {lighten, rgba, desaturate} = require('polished') -const deepmerge = require('deepmerge') const {filterObject, isShadowValue, isColorValue, fontStack} = require('./utils/theme') const {lineHeight: lineHeights} = primitives.typography.normal -const {black, white, pink, gray, blue, green, orange, purple, red, yellow} = primitives.colors.light.scale - -// General -const colors = { - bodytext: gray[9], - black, - white, - gray, - blue, - green, - orange, - purple, - red, - yellow, - pink, - blackfade15: 'rgba(27, 31, 35, 0.15)', - blackfade20: 'rgba(27, 31, 35, 0.20)', - blackfade30: 'rgba(27,31,35,0.3)', - blackfade35: 'rgba(27, 31, 35, 0.35)', - blackfade50: 'rgba(27, 31, 35, 0.5)', - whitefade15: 'rgba(255, 255, 255, 0.15)', - whitefade50: 'rgba(255, 255, 255, 0.50)', - whitefade70: 'rgba(255, 255, 255, 0.70)', - state: { - error: red[5], - failure: red[5], - pending: yellow[7], - queued: yellow[7], - success: green[5], - unknown: gray[4] - }, - border: { - blackFade: rgba(black, 0.15), - blue: blue[5], - blueLight: blue[2], - grayLight: lighten(0.03, gray[2]), - gray: gray[2], - grayDark: gray[3], - grayDarker: gray[7], - green: green[4], - greenLight: desaturate(0.4, green[3]), - purple: purple[5], - red: red[5], - redLight: desaturate(0.6, red[3]), - white, - whiteFade: rgba(white, 0.15), - yellow: desaturate(0.6, yellow[3]) - }, - counter: { - bg: 'rgba(27, 31, 35, 0.08)' - }, - filterList: { - hoverBg: '#eaecef' - }, - text: { - white, - gray: gray[6], - grayLight: gray[5], - grayDark: gray[9], - red: red[6] - }, - bg: { - gray: gray[1], - grayLight: gray[0], - grayDark: gray[9], - disabled: '#F3F4F6' - }, - accent: orange[5], - labels: { - gray: gray[2], - grayText: gray[9], - grayDark: gray[5], - grayDarkText: gray[9], - blue: blue[5], - blueText: blue[5], - orange: orange[5], - orangeText: orange[6], - green: green[5], - greenText: green[6], - red: red[6], - redText: red[6], - yellow: yellow[6], - yellowText: yellow[9], - pink: pink[4], - pinkText: pink[6], - purple: purple[4], - purpleText: purple[5] - } -} const breakpoints = ['544px', '768px', '1012px', '1280px'] @@ -124,18 +33,6 @@ const borderWidths = [0, '1px'] const radii = ['0', '3px', '6px', '100px'] -const shadows = { - small: '0 1px 0 rgba(149, 157, 165, 0.1)', - medium: '0 3px 6px rgba(149, 157, 165, 0.15)', - large: '0 8px 24px rgba(149, 157, 165, 0.2)', - 'extra-large': '0 12px 48px rgba(149, 157, 165, 0.3)', - formControl: 'inset 0px 2px 0px rgba(225, 228, 232, 0.2)', - formControlDisabled: 'inset 0px 2px 0px rgba(220, 227, 237, 0.3)', - formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em', - primaryShadow: '0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - primaryActiveShadow: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)' -} - const sizes = { small: '544px', medium: '768px', @@ -147,243 +44,27 @@ const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'] -// Components - -const buttons = { - default: { - color: { - default: colors.text.grayDark, - disabled: gray[4] - }, - border: { - default: 'rgba(27, 31, 35, 0.12)', - active: colors.border.grayDark, - disabled: colors.border.grayLight - }, - bg: { - default: colors.bg.grayLight, - hover: '#F3F4F6', // custom gray - active: '#edeff2', //custom gray - disabled: colors.bg.grayLight - }, - shadow: { - default: '0px 1px 0px rgba(27, 31, 35, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', - hover: '0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)', - active: 'inset 0px 2px 0px rgba(149, 157, 165, 0.1)', - focus: '0 0 0 3px rgba(3, 102, 214, 0.3)' - } - }, - primary: { - color: { - default: white, - disabled: colors.whitefade50 - }, - border: { - default: green[6], - hover: 'rgba(27, 31, 35, 0.15)', - active: 'rgba(27, 31, 35, 0.15)', - disabled: 'rgba(34, 134, 58, 0.1)' - }, - bg: { - default: '#2EA44F', //custom green - focus: '#2C974B', //custom green - hover: '#2C974B', //custom green - active: '#128031', // 2% darker than hover bg - disabled: '#94D3A2' // custom gray - }, - shadow: { - default: ' 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - active: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - hover: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - focus: '0 0 0 3px #94D3A2' - } - }, - danger: { - color: { - default: colors.text.red, - hover: white, - active: white, - disabled: 'rgba(203,36,49, .5)' // custom? - }, - border: { - default: colors.border.gray, - hover: 'rgba(27, 31, 35, 0.15)', - active: 'rgba(27, 31, 35, 0.15)' - }, - bg: { - default: gray[0], - hover: red[6], - active: '#be222e', // 2% darker than hover bg - disabled: '#F3F4F6' - }, - shadow: { - default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', - active: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - hover: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - focus: '0 0 0 3px rgba(203, 36, 49, 0.4)' - } - }, - outline: { - color: { - default: blue[5], - hover: white, - active: white, - disabled: gray[4] - }, - border: { - default: gray[2], //border-gray - hover: 'rgba(27, 31, 35, 0.15)', - active: 'rgba(27, 31, 35, 0.15)' - }, - bg: { - default: gray[0], - hover: blue[5], - active: '#035fc7', // 2% darker than hover bg - disabled: '#F3F4F6' - }, - shadow: { - default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', - active: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - hover: '0px 1px 0px rgba(27, 31, 35, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - focus: '0 0 0 3px rgba(3, 102, 214, 0.3)' - } - }, - close: { - color: { - default: colors.text.grayDark - }, - shadow: { - focus: '0 0 0 3px rgba(3, 102, 214, 0.3)' - } - } -} - -const flash = { - default: { - backgroundColor: blue[1], - borderColor: 'rgba(4, 66, 137, 0.2)' - }, - success: { - backgroundColor: green[1], - borderColor: 'rgba(23, 111, 44, 0.2)' - }, - danger: { - backgroundColor: '#FFE3E6', - borderColor: 'rgba(158, 28, 35, 0.2)' - }, - warning: { - backgroundColor: yellow[1], - borderColor: 'rgba(176, 136, 0, 0.2)' - } -} - -// this has to be separated from the flash object since we have to use an svg selector to style the icon color -const flashIcon = { - default: 'rgba(4, 66, 137, 0.6)', - success: 'rgba(23, 111, 44, 0.8)', - danger: 'rgba(158, 28, 35, 0.6)', - warning: yellow[8] -} -const popovers = { - colors: { - caret: 'rgba(27, 31, 35, 0.15)' - } -} - -const pagination = { - borderRadius: radii[2], - spaceBetween: space[1], - colors: { - normal: { - fg: colors.gray[9] - }, - disabled: { - fg: colors.gray[3], - border: 'transparent' - }, - hover: { - border: colors.border.grayLight - }, - selected: { - fg: colors.white, - bg: colors.blue[5], - border: 'transparent' - }, - active: { - border: colors.border.grayLight - }, - nextPrevious: { - fg: colors.blue[5] - } - } -} - -const stateLabels = { - sizes: { - small: { - padding: `${space[1]} ${space[2]}`, - fontSize: fontSizes[0] - }, - normal: { - padding: `${space[2]} 12px`, - fontSize: fontSizes[1] - } - }, - - status: { - issueClosed: { - backgroundColor: red[5] - }, - pullClosed: { - backgroundColor: red[5] - }, - pullMerged: { - backgroundColor: purple[5] - }, - issueOpened: { - backgroundColor: '#159739' // custom green - }, - pullOpened: { - backgroundColor: '#159739' // custom green - }, - draft: { - backgroundColor: gray[5] - } - } -} - -const {scale: _excludeScaleColors, ...functionalColors} = filterObject(primitives.colors.light, value => +const {scale: _excludeScaleColors, ...colors} = filterObject(primitives.colors.light, value => isColorValue(value) ) -const {scale: _excludeScaleShadows, ...functionalShadows} = filterObject(primitives.colors.light, value => +const {scale: _excludeScaleShadows, ...shadows} = filterObject(primitives.colors.light, value => isShadowValue(value) ) -const mergedColors = deepmerge(colors, functionalColors) -const mergedShadows = deepmerge(shadows, functionalShadows) - const theme = { // General borderWidths, breakpoints, - colors: mergedColors, + colors, fonts, fontSizes, fontWeights, lineHeights, radii, - shadows: mergedShadows, + shadows, sizes, space, - - // Components - buttons, - pagination, - popovers, - flash, - flashIcon, - stateLabels } module.exports = { From 24f082e2806f657ccefaa9806e4cc62390de1705 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Mar 2021 12:50:02 -0600 Subject: [PATCH 02/29] update SelectMenu and associated tests to remove deprecated variables --- src/SelectMenu/SelectMenuModal.tsx | 2 +- src/__tests__/SelectMenu.tsx | 1 - src/__tests__/__snapshots__/SelectMenu.tsx.snap | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/SelectMenu/SelectMenuModal.tsx b/src/SelectMenu/SelectMenuModal.tsx index d63d5efcb2b..59bb6fd3513 100644 --- a/src/SelectMenu/SelectMenuModal.tsx +++ b/src/SelectMenu/SelectMenuModal.tsx @@ -34,7 +34,7 @@ const modalStyles = css` flex-direction: column; background-color: ${get('colors.bg.overlay')}; border-radius: ${get('radii.2')}; - box-shadow: ${get('shadows.small')}; + box-shadow: ${get('shadows.shadow.small')}; animation: ${animateModal} 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards; @media (min-width: ${get('breakpoints.0')}) { diff --git a/src/__tests__/SelectMenu.tsx b/src/__tests__/SelectMenu.tsx index 9c33cf00fd1..4bf822be5e4 100644 --- a/src/__tests__/SelectMenu.tsx +++ b/src/__tests__/SelectMenu.tsx @@ -1,7 +1,6 @@ import React from 'react' import {SelectMenu, Button} from '..' import {mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing' -import {COMMON} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' diff --git a/src/__tests__/__snapshots__/SelectMenu.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.tsx.snap index 8e78638c869..91d38892f6d 100644 --- a/src/__tests__/__snapshots__/SelectMenu.tsx.snap +++ b/src/__tests__/__snapshots__/SelectMenu.tsx.snap @@ -185,7 +185,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` flex-direction: column; background-color: #ffffff; border-radius: 6px; - box-shadow: 0 1px 0 rgba(149,157,165,0.1); + box-shadow: 0 1px 0 rgba(27,31,35,0.04); -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards; animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards; width: 300px; From e33d3f88edb69afcaa63b3c4951a583e4a327511 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Mar 2021 12:53:26 -0600 Subject: [PATCH 03/29] update Dropdown to remove deprecate variables --- src/Dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index 8e297159360..65068cd4e3f 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -112,7 +112,7 @@ const DropdownItem = styled.li` text-decoration: none; display: block; overflow: hidden; - color: ${get('colors.gray.9')}; + color: ${get('colors.text.primary')}; text-overflow: ellipsis; white-space: nowrap; } From 9a1b379589d1e0ba132d34c7f06fd08618790930 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Mar 2021 12:55:56 -0600 Subject: [PATCH 04/29] update CircleOcticon tests to remove deprecated variables --- src/__tests__/CircleOcticon.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/__tests__/CircleOcticon.tsx b/src/__tests__/CircleOcticon.tsx index d91d806de86..83e73c44d74 100644 --- a/src/__tests__/CircleOcticon.tsx +++ b/src/__tests__/CircleOcticon.tsx @@ -1,6 +1,6 @@ import React from 'react' import {CheckIcon} from '@primer/octicons-react' -import {colors} from '../theme' +import theme, {colors} from '../theme' import {CircleOcticon} from '..' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {COMMON, FLEX, LAYOUT} from '../constants' @@ -10,7 +10,11 @@ import 'babel-polyfill' expect.extend(toHaveNoViolations) describe('CircleOcticon', () => { - behavesAsComponent({Component: CircleOcticon, systemPropArray: [COMMON, FLEX, LAYOUT], toRender: () => }) + behavesAsComponent({ + Component: CircleOcticon, + systemPropArray: [COMMON, FLEX, LAYOUT], + toRender: () => + }) checkExports('CircleOcticon', { default: CircleOcticon @@ -34,7 +38,10 @@ describe('CircleOcticon', () => { }) it('respects the bg prop', () => { - expect(render()).toHaveStyleRule('background-color', colors.red[5]) + expect(render()).toHaveStyleRule( + 'background-color', + theme.colors.bg.danger + ) }) it('has a default size', () => { From e1ee04b1e0303003d0df4537205fe0ff49b5b23e Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Mar 2021 13:51:21 -0600 Subject: [PATCH 05/29] update PointerBox tests to remove deprecated variables --- src/__tests__/PointerBox.tsx | 4 ++-- src/__tests__/__snapshots__/PointerBox.tsx.snap | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__tests__/PointerBox.tsx b/src/__tests__/PointerBox.tsx index 095df11204d..8ba72c2e081 100644 --- a/src/__tests__/PointerBox.tsx +++ b/src/__tests__/PointerBox.tsx @@ -26,10 +26,10 @@ describe('PointerBox', () => { }) it('passes the "borderColor" prop to both and ', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) it('passes the "bg" prop to both and ', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) }) diff --git a/src/__tests__/__snapshots__/PointerBox.tsx.snap b/src/__tests__/__snapshots__/PointerBox.tsx.snap index 0b943d8009d..13ead653d40 100644 --- a/src/__tests__/__snapshots__/PointerBox.tsx.snap +++ b/src/__tests__/__snapshots__/PointerBox.tsx.snap @@ -2,7 +2,7 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` .c0 { - background-color: #d73a49; + background-color: #ffeef0; position: relative; border-width: 1px; border-style: solid; @@ -32,7 +32,7 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` > Date: Fri, 5 Mar 2021 13:58:52 -0600 Subject: [PATCH 06/29] update BorderBox tests to remove deprecated variables --- src/__tests__/BorderBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/__tests__/BorderBox.tsx b/src/__tests__/BorderBox.tsx index e546cdd4d13..04dd0e1db40 100644 --- a/src/__tests__/BorderBox.tsx +++ b/src/__tests__/BorderBox.tsx @@ -23,7 +23,7 @@ describe('BorderBox', () => { }) it('renders borders', () => { - expect(render()).toHaveStyleRule('border-color', colors.green[5]) + expect(render()).toHaveStyleRule('border-color', colors.border.success) expect(render()).toHaveStyleRule('border-bottom', '0') }) @@ -33,6 +33,6 @@ describe('BorderBox', () => { // the test returns the box shadow value without spaces, so had to manually provide the expected string here it('renders box shadow', () => { - expect(render()).toHaveStyleRule('box-shadow', '0 1px 0 rgba(149,157,165,0.1)') + expect(render()).toHaveStyleRule('box-shadow', theme.shadows.shadow.small) }) }) From fcfe296a93e48ff14b2c232c90fa92857b1e2e3b Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Mar 2021 14:03:30 -0600 Subject: [PATCH 07/29] update Link and Link test to remove deprecated variables --- src/__tests__/Link.tsx | 4 ++-- src/__tests__/__snapshots__/Link.tsx.snap | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/__tests__/Link.tsx b/src/__tests__/Link.tsx index 850bd556669..733e932c1d3 100644 --- a/src/__tests__/Link.tsx +++ b/src/__tests__/Link.tsx @@ -26,7 +26,7 @@ describe('Link', () => { }) it('respects hoverColor prop', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) it('respects the "fontStyle" prop', () => { @@ -43,6 +43,6 @@ describe('Link', () => { }) it('respectes the "color" prop when "muted" prop is also passed', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) }) diff --git a/src/__tests__/__snapshots__/Link.tsx.snap b/src/__tests__/__snapshots__/Link.tsx.snap index bc7ae14f85f..486a8ea1a78 100644 --- a/src/__tests__/__snapshots__/Link.tsx.snap +++ b/src/__tests__/__snapshots__/Link.tsx.snap @@ -108,7 +108,7 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = color: #586069; -webkit-text-decoration: none; text-decoration: none; - color: #1b1f23; + color: #ffffff; } .c0:hover { @@ -136,7 +136,7 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = `; @@ -187,7 +187,7 @@ exports[`Link respects hoverColor prop 1`] = ` .c0:hover { -webkit-text-decoration: underline; text-decoration: underline; - color: #2188ff; + color: #0366d6; } .c0:is(button) { From 43c03225b7da33d50bdce3145aa09aa0fc9f6a00 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Mar 2021 15:44:36 -0600 Subject: [PATCH 08/29] update Tooltip to remove deprecated variables update tooltip snapshot --- src/Tooltip.tsx | 2 +- src/__tests__/__snapshots__/Tooltip.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index e1693cd9325..ea923d37024 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -14,7 +14,7 @@ const TooltipBase = styled.span` display: none; width: 0px; height: 0px; - color: ${get('colors.black')}; + color: ${get('colors.tooltip.bg')}; pointer-events: none; content: ''; border: 6px solid transparent; diff --git a/src/__tests__/__snapshots__/Tooltip.tsx.snap b/src/__tests__/__snapshots__/Tooltip.tsx.snap index 0db8f842aca..5bbfa908e25 100644 --- a/src/__tests__/__snapshots__/Tooltip.tsx.snap +++ b/src/__tests__/__snapshots__/Tooltip.tsx.snap @@ -11,7 +11,7 @@ exports[`Tooltip renders consistently 1`] = ` display: none; width: 0px; height: 0px; - color: #1b1f23; + color: #24292e; pointer-events: none; content: ''; border: 6px solid transparent; From dfdeed158261a7e35ee4539ddea7f9a9ddc60c42 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Mar 2021 14:54:52 -0600 Subject: [PATCH 09/29] put in type hack for preval theme --- src/theme-preval.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/theme-preval.js b/src/theme-preval.js index f740931919e..93d98c137a3 100644 --- a/src/theme-preval.js +++ b/src/theme-preval.js @@ -52,17 +52,28 @@ const {scale: _excludeScaleShadows, ...shadows} = filterObject(primitives.colors isShadowValue(value) ) +// this is a small hack that is a temporary stop gap. +// this file must be in vanilla JS to work with preval +// but our temporary filter utils make it impossible for +// our TypeScript to properly infer const object structure. +// shallow merging primitives objects back in restores the +// structural inferences and ultimately gets overrideen with +// the filtered values. +const typedColors = {...primitives.colors.light, ...colors}; +const typedShadows = {...primitives.colors.light, ...shadows}; +// --------- + const theme = { // General borderWidths, breakpoints, - colors, + colors: typedColors, fonts, fontSizes, fontWeights, lineHeights, radii, - shadows, + shadows: typedShadows, sizes, space, } From 113549367ce6db1e471124de55047ce8ea99fab3 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Mar 2021 14:58:26 -0600 Subject: [PATCH 10/29] update ProgressBar color --- docs/content/ProgressBar.mdx | 34 +++++++++++++++++----------------- src/ProgressBar.tsx | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/content/ProgressBar.mdx b/docs/content/ProgressBar.mdx index a45daa56651..d7ec53f061f 100644 --- a/docs/content/ProgressBar.mdx +++ b/docs/content/ProgressBar.mdx @@ -2,22 +2,22 @@ title: ProgressBar --- - -Use `ProgressBar` to visualize task completion. +Use `ProgressBar` to visualize task completion. ## Default example ```jsx live - - ``` + +``` + +If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be sure to set a width**. - If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be sure to set a width**. - ```jsx live - <> - 5 of 10 - - - ``` +```jsx live +<> + 5 of 10 + + +``` ## System props @@ -25,9 +25,9 @@ ProgressBar components get `COMMON` system props. Read our [System Props](/syste ## Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| progress | Number | | Used to set the size of the green bar | -| barSize | String | 'default' | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. | -| inline | Boolean | false | Styles the progress bar inline | -| bg | String | 'green.5' | Set the progress bar color, defaults to bg-green | +| Name | Type | Default | Description | +| :------- | :------ | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------- | +| progress | Number | | Used to set the size of the green bar | +| barSize | String | 'default' | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. | +| inline | Boolean | false | Styles the progress bar inline | +| bg | String | 'bg.successInverse' | Set the progress bar color, defaults to bg-green | diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx index 5a105c7c778..fa584b406b0 100644 --- a/src/ProgressBar.tsx +++ b/src/ProgressBar.tsx @@ -45,7 +45,7 @@ function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) { } ProgressBar.defaultProps = { - bg: 'state.success', + bg: 'bg.successInverse', barSize: 'default' } From f04fe8bae43a48ade14c129303f8f04ca83c1e72 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Mar 2021 15:43:10 -0600 Subject: [PATCH 11/29] update CircleBadge to remove deprecated variables --- src/CircleBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CircleBadge.tsx b/src/CircleBadge.tsx index 2a192f70906..c55c7b85df5 100644 --- a/src/CircleBadge.tsx +++ b/src/CircleBadge.tsx @@ -32,7 +32,7 @@ const CircleBadge = styled.div` justify-content: center; background-color: ${get('colors.bg.canvas')}; border-radius: 50%; - box-shadow: ${get('shadows.medium')}; + box-shadow: ${get('shadows.shadow.medium')}; ${COMMON}; ${sizeStyles}; ${sx}; From 897d862bd2df0a119962397d6d66ec77c7789d24 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Mar 2021 15:43:27 -0600 Subject: [PATCH 12/29] update themeGet to respect functional variables --- src/__tests__/themeGet.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/__tests__/themeGet.ts b/src/__tests__/themeGet.ts index 48a18d23381..05cf1272b91 100644 --- a/src/__tests__/themeGet.ts +++ b/src/__tests__/themeGet.ts @@ -10,7 +10,7 @@ describe('themeGet', () => { }) it('uses primer theme as fallback', () => { - expect(themeGet('colors.gray.1')({})).toBe('#f6f8fa') - expect(themeGet('colors.gray.1')({theme: {colors: {foo: 'bar'}}})).toBe('#f6f8fa') + expect(themeGet('colors.text.primary')({})).toBe('#24292e') + expect(themeGet('colors.text.primary')({theme: {colors: {foo: 'bar'}}})).toBe('#24292e') }) }) From e49426b1a0a1068f4e57cf6c9b0d4ce49bbc8a4a Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Mar 2021 16:12:40 -0600 Subject: [PATCH 13/29] fix linter issues --- src/theme-preval.js | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/theme-preval.js b/src/theme-preval.js index 93d98c137a3..341d90ef345 100644 --- a/src/theme-preval.js +++ b/src/theme-preval.js @@ -44,13 +44,8 @@ const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'] - -const {scale: _excludeScaleColors, ...colors} = filterObject(primitives.colors.light, value => - isColorValue(value) -) -const {scale: _excludeScaleShadows, ...shadows} = filterObject(primitives.colors.light, value => - isShadowValue(value) -) +const {scale: _excludeScaleColors, ...colors} = filterObject(primitives.colors.light, value => isColorValue(value)) +const {scale: _excludeScaleShadows, ...shadows} = filterObject(primitives.colors.light, value => isShadowValue(value)) // this is a small hack that is a temporary stop gap. // this file must be in vanilla JS to work with preval @@ -59,8 +54,8 @@ const {scale: _excludeScaleShadows, ...shadows} = filterObject(primitives.colors // shallow merging primitives objects back in restores the // structural inferences and ultimately gets overrideen with // the filtered values. -const typedColors = {...primitives.colors.light, ...colors}; -const typedShadows = {...primitives.colors.light, ...shadows}; +const typedColors = {...primitives.colors.light, ...colors} +const typedShadows = {...primitives.colors.light, ...shadows} // --------- const theme = { @@ -75,7 +70,7 @@ const theme = { radii, shadows: typedShadows, sizes, - space, + space } module.exports = { From ce90c6217644b3e3194a2ad992e2bbf5a6ef28c5 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Mar 2021 17:07:24 -0600 Subject: [PATCH 14/29] fix typescript errors --- src/__tests__/BorderBox.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/__tests__/BorderBox.tsx b/src/__tests__/BorderBox.tsx index 04dd0e1db40..dda0d58094c 100644 --- a/src/__tests__/BorderBox.tsx +++ b/src/__tests__/BorderBox.tsx @@ -23,7 +23,10 @@ describe('BorderBox', () => { }) it('renders borders', () => { - expect(render()).toHaveStyleRule('border-color', colors.border.success) + expect(render()).toHaveStyleRule( + 'border-color', + theme.colors.border.success + ) expect(render()).toHaveStyleRule('border-bottom', '0') }) From 016a273fde30f0185e23309e1a39c1bc034174f8 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Mar 2021 17:36:40 -0600 Subject: [PATCH 15/29] changeset for removing deprecated theme variables --- .changeset/early-drinks-love.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/early-drinks-love.md diff --git a/.changeset/early-drinks-love.md b/.changeset/early-drinks-love.md new file mode 100644 index 00000000000..573fd857895 --- /dev/null +++ b/.changeset/early-drinks-love.md @@ -0,0 +1,5 @@ +--- +'@primer/components': minor +--- + +Removes deprecated theme variables in favor of functional theme variables From 17287cd055f41ff0df43484f0f5e3ef7ffbd991a Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 10 Mar 2021 09:29:01 -0600 Subject: [PATCH 16/29] fix CounterLabel variant --- docs/content/CounterLabel.md | 11 ++++++----- src/CounterLabel.tsx | 10 +++++----- src/__tests__/CounterLabel.tsx | 12 ++++++------ 3 files changed, 17 insertions(+), 16 deletions(-) diff --git a/docs/content/CounterLabel.md b/docs/content/CounterLabel.md index 50b6c862fd1..6a3b94c0b29 100644 --- a/docs/content/CounterLabel.md +++ b/docs/content/CounterLabel.md @@ -6,10 +6,11 @@ tags: pill Use the CounterLabel component to add a count to navigational elements and buttons. ## Default example + ```jsx live 12 -13 -13 +13 +13 ``` ## System props @@ -18,6 +19,6 @@ CounterLabel components get `COMMON` system props. Read our [System Props](/syst ## Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| scheme | String | | Pass in 'gray' for a darker gray background and white text, or 'gray-light' for a lighter gray background and dark text. Omitting the scheme prop renders the default counter scheme | +| Name | Type | Default | Description | +| :----- | :----- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| scheme | String | | Pass in 'primary' for a darker background and inverse text, or 'gray-light' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme | diff --git a/src/CounterLabel.tsx b/src/CounterLabel.tsx index e6c53f84fb1..1e2941e4880 100644 --- a/src/CounterLabel.tsx +++ b/src/CounterLabel.tsx @@ -4,16 +4,16 @@ import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' type StyledCounterLabelProps = { - scheme?: 'gray' | 'gray-light' + scheme?: 'primary' | 'secondary' } & SystemCommonProps & SxProp const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => { return { color: - scheme === 'gray-light' + scheme === 'secondary' ? get('colors.counter.text')(props) - : scheme === 'gray' + : scheme === 'primary' ? get('colors.counter.primary.text')(props) : get('colors.counter.text')(props) } @@ -22,9 +22,9 @@ const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => { const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => { return { backgroundColor: - scheme === 'gray-light' + scheme === 'secondary' ? get('colors.counter.bg')(props) - : scheme === 'gray' + : scheme === 'primary' ? get('colors.counter.primary.bg')(props) : get('colors.counter.bg')(props) } diff --git a/src/__tests__/CounterLabel.tsx b/src/__tests__/CounterLabel.tsx index ae8c3a981ae..bda04642b33 100644 --- a/src/__tests__/CounterLabel.tsx +++ b/src/__tests__/CounterLabel.tsx @@ -28,17 +28,17 @@ describe('CounterLabel', () => { cleanup() }) - it('respects the gray "scheme" prop', () => { + it('respects the primary "scheme" prop', () => { const p = primitives - expect(render()).toHaveStyleRule('color', theme.colors.counter.primary.text.trim()) - expect(render()).toHaveStyleRule( + expect(render()).toHaveStyleRule('color', theme.colors.counter.primary.text.trim()) + expect(render()).toHaveStyleRule( 'background-color', theme.colors.counter.primary.bg.trim() ) }) - it('respects the gray-light "scheme" prop', () => { - expect(render()).toHaveStyleRule('color', theme.colors.counter.text.trim()) - expect(render()).toHaveStyleRule('background-color', theme.colors.counter.bg) + it('respects the secondary "scheme" prop', () => { + expect(render()).toHaveStyleRule('color', theme.colors.counter.text.trim()) + expect(render()).toHaveStyleRule('background-color', theme.colors.counter.bg) }) }) From 25b9d97d5eee602ace635c0985ea663563637e79 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 10 Mar 2021 09:29:14 -0600 Subject: [PATCH 17/29] migration guide on changeset --- .changeset/early-drinks-love.md | 129 ++++++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) diff --git a/.changeset/early-drinks-love.md b/.changeset/early-drinks-love.md index 573fd857895..fdbc0128028 100644 --- a/.changeset/early-drinks-love.md +++ b/.changeset/early-drinks-love.md @@ -3,3 +3,132 @@ --- Removes deprecated theme variables in favor of functional theme variables + +Primer v24.1 introduces _functional variables_ for styling components that are consistent across multiple themes. This deprecates previous color variables that identified specific colors. + +## Migration guide + +### Components + +Most components don't need to be updated and should work without making changes. But some of the components that use presentational class names now use functional class names. + +#### Labels + +_note the change in pluralization from 'labels' to 'label'_ + +| [`v24.0`](https://primer.style/css/components/labels) | `v24.1` | +| ----------------------------------------------------- | -------------------------------- | +| `text="labels.grayDarkText"` | `text="label.primary.text` | +| `border="labels.gray"` | `border="label.primary.border` | +| `text="labels.grayText"` | `text="label.secondary.text` | +| `border="labels.gray"` | `border="label.secondary.border` | +| `text="labels.blueText"` | `text="label.info.text` | +| `border="labels.blue"` | `border="label.info.border` | +| `text="labels.greenText"` | `text="label.success.text` | +| `border="labels.green"` | `border="label.success.border` | +| `text="labels.yellowText"` | `text="label.warning.text` | +| `border="labels.yellow"` | `border="label.warning.border` | +| `text="labels.redText"` | `text="label.danger.text` | +| `border="labels.red"` | `border="label.danger.border` | +| `text="labels.orangeText"` | `text="label.primary.text` | +| `border="labels.orange"` | `border="label.primary.text` | +| `text="labels.pinkText"` | -- | +| `border="labels.pink"` | -- | +| `text="labels.purpleText"` | -- | +| `border="labels.purple"` | -- | + +#### Counters + +| [`v24.0`](https://primer.style/css/components/labels#counters) | `v24.1` | +| -------------------------------------------------------------- | -------------------- | +| `scheme="gray"` | `scheme="primary"` | +| `scheme="gray-light"` | `scheme="secondary"` | + +#### Timeline + +| [`v24.0`](https://primer.style/css/utilities/colors#background-utilities) | `v24.1` | +| ------------------------------------------------------------------------- | ----------------------------- | +| `bg="red.5"` | `bg="prState.closed.bg"` | +| `bg="green.5"` | `bg="prState.open.bg"` | +| `bg="purple.5"` | `bg="prState.merged.bg"` | +| `bg="gray.5"` | `bg="prState.draft.bg"` | +| `color="white"` [context: closed PR icon] | `color="prState.closed.text"` | +| `color="white"` [context: open PR icon] | `color="prState.open.text"` | +| `color="white"` [context: merged PR icon] | `color="prState.merged.text"` | +| `color="white"` [context: merged PR icon] | `color="prState.draft.text"` | + +### Utility classes + +See [the color utility classes page](/utilities/colors) for a list of all the functional color utility classes. + +#### Text + +| [`v24.0`](https://primer.style/css/utilities/colors#text-color-utilities) | `v24.1` | +| ------------------------------------------------------------------------- | ---------------- | +| `text.gray` | `text.secondary` | +| `text.grayLight` | `text.tertiary` | +| `text.grayDark` | `text.primary` | +| `text.red` | `text.danger` | +| `text.white` | `text.inverse` | +| `gray.6` | `text.secondary` | +| `gray.5` | `text.tertiary` | +| `gray.9` | `text.primary` | +| `red.6` | `text.danger` | +| `white` | `text.inverse` | +| `blue.5` | `text.link` | +| `gray.4` | `text.disabled` | +| `green.5` | `text.success` | +| `yellow.8` | `text.warning` | + +#### Icon + +| `v24.0` | `v24.1` | +| ---------- | ---------------- | +| `gray.9` | `icon.primary` | +| `gray.6` | `icon.secondary` | +| `gray.4` | `icon.tertiary` | +| `blue.5` | `icon.info` | +| `red.5` | `icon.danger` | +| `green.6` | `icon.success` | +| `yellow.8` | `icon.warning` | + +#### Border + +| [`v24.0`](https://primer.style/css/utilities/borders#border-color-utilities) | `v24.1` | +| ---------------------------------------------------------------------------- | ----------------- | +| `border.blue` | `border.info` | +| `border.blueLight` | n/a | +| `border.grayLight` | `border.primary` | +| `border.grayDark` | `border.tertiary` | +| `border.grayDarker` | n/a | +| `border.green` | `border.success` | +| `border.greenLight` | n/a | +| `border.purple` | n/a | +| `border.red` | `border.danger` | +| `border.redLight` | n/a | +| `border.white` | `border.inverse` | +| `border.whiteFace` | n/a | +| `border.yellow` | `border.warning` | +| `border.blackFade` | `fade.fg15` | +| `border.whiteFade` | `fade.white15` | +| `blue.5` | `border.info` | +| `gray.2` | `border.primary` | +| `gray.3` | `border.tertiary` | +| `green.4` | `border.success` | +| `red.5` | `border.danger` | +| `white` | `border.inverse` | + +#### Background + +| [`v24.0`](https://primer.style/css/utilities/colors#background-utilities) | `v24.1` | +| ------------------------------------------------------------------------- | ------------------- | +| `white` | `bg.primary` | +| `bg.grayLight` | `bg.secondary` | +| `bg.gray` | `bg.tertiary` | +| `bg.grayDark` | `bg.canvasInverse` | +| `blue.0` | `bg.info` | +| `blue.5` | `bg.infoInverse` | +| `red.0` | `bg.danger` | +| `red.5` | `bg.dangerInverse` | +| `green.1` | `bg.success` | +| `green.5` | `bg.successInverse` | From 74631640c816c029181459a003ccbe24aa2dc89f Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 10 Mar 2021 12:15:15 -0800 Subject: [PATCH 18/29] Update migration guide --- .changeset/early-drinks-love.md | 218 ++++++++++++++++---------------- 1 file changed, 106 insertions(+), 112 deletions(-) diff --git a/.changeset/early-drinks-love.md b/.changeset/early-drinks-love.md index fdbc0128028..9aa1c0344d1 100644 --- a/.changeset/early-drinks-love.md +++ b/.changeset/early-drinks-love.md @@ -2,133 +2,127 @@ '@primer/components': minor --- -Removes deprecated theme variables in favor of functional theme variables - -Primer v24.1 introduces _functional variables_ for styling components that are consistent across multiple themes. This deprecates previous color variables that identified specific colors. +Removes deprecated presentational theme variables in favor of _functional variables_ for styling components that are consistent across multiple themes. ## Migration guide -### Components - -Most components don't need to be updated and should work without making changes. But some of the components that use presentational class names now use functional class names. +If you don't use any color-related system props (e.g. `color`, `bg`, `borderColor`), all components should work without changes. If you're using color-related system props, you'll need to update them to use the new functional variables. Reference the tables below to see how old variables map to new functional variables. -#### Labels +If you have any quenstions, feel free to reach out in the #design-systems channel. -_note the change in pluralization from 'labels' to 'label'_ - -| [`v24.0`](https://primer.style/css/components/labels) | `v24.1` | -| ----------------------------------------------------- | -------------------------------- | -| `text="labels.grayDarkText"` | `text="label.primary.text` | -| `border="labels.gray"` | `border="label.primary.border` | -| `text="labels.grayText"` | `text="label.secondary.text` | -| `border="labels.gray"` | `border="label.secondary.border` | -| `text="labels.blueText"` | `text="label.info.text` | -| `border="labels.blue"` | `border="label.info.border` | -| `text="labels.greenText"` | `text="label.success.text` | -| `border="labels.green"` | `border="label.success.border` | -| `text="labels.yellowText"` | `text="label.warning.text` | -| `border="labels.yellow"` | `border="label.warning.border` | -| `text="labels.redText"` | `text="label.danger.text` | -| `border="labels.red"` | `border="label.danger.border` | -| `text="labels.orangeText"` | `text="label.primary.text` | -| `border="labels.orange"` | `border="label.primary.text` | -| `text="labels.pinkText"` | -- | -| `border="labels.pink"` | -- | -| `text="labels.purpleText"` | -- | -| `border="labels.purple"` | -- | - -#### Counters +#### Text -| [`v24.0`](https://primer.style/css/components/labels#counters) | `v24.1` | -| -------------------------------------------------------------- | -------------------- | -| `scheme="gray"` | `scheme="primary"` | -| `scheme="gray-light"` | `scheme="secondary"` | +| `v24` | `v25` | +| ------------------------ | ------------------------ | +| `color="text.gray"` | `color="text.secondary"` | +| `color="text.grayLight"` | `color="text.tertiary"` | +| `color="text.grayDark"` | `color="text.primary"` | +| `color="text.red"` | `color="text.danger"` | +| `color="text.white"` | `color="text.inverse"` | +| `color="gray.6"` | `color="text.secondary"` | +| `color="gray.5"` | `color="text.tertiary"` | +| `color="gray.9"` | `color="text.primary"` | +| `color="red.6"` | `color="text.danger"` | +| `color="white"` | `color="text.inverse"` | +| `color="blue.5"` | `color="text.link"` | +| `color="gray.4"` | `color="text.disabled"` | +| `color="green.5"` | `color="text.success"` | +| `color="yellow.8"` | `color="text.warning"` | -#### Timeline +#### Icon -| [`v24.0`](https://primer.style/css/utilities/colors#background-utilities) | `v24.1` | -| ------------------------------------------------------------------------- | ----------------------------- | -| `bg="red.5"` | `bg="prState.closed.bg"` | -| `bg="green.5"` | `bg="prState.open.bg"` | -| `bg="purple.5"` | `bg="prState.merged.bg"` | -| `bg="gray.5"` | `bg="prState.draft.bg"` | -| `color="white"` [context: closed PR icon] | `color="prState.closed.text"` | -| `color="white"` [context: open PR icon] | `color="prState.open.text"` | -| `color="white"` [context: merged PR icon] | `color="prState.merged.text"` | -| `color="white"` [context: merged PR icon] | `color="prState.draft.text"` | +| `v24` | `v25` | +| ------------------ | ------------------------ | +| `color="gray.9"` | `color="icon.primary"` | +| `color="gray.6"` | `color="icon.secondary"` | +| `color="gray.4"` | `color="icon.tertiary"` | +| `color="blue.5"` | `color="icon.info"` | +| `color="red.5"` | `color="icon.danger"` | +| `color="green.6"` | `color="icon.success"` | +| `color="yellow.8"` | `color="icon.warning"` | -### Utility classes +#### Border -See [the color utility classes page](/utilities/colors) for a list of all the functional color utility classes. +| `v24` | `v25` | +| --------------------------------- | ------------------------------- | +| `borderColor="border.blue"` | `borderColor="border.info"` | +| `borderColor="border.blueLight"` | n/a | +| `borderColor="border.grayLight"` | `borderColor="border.primary"` | +| `borderColor="border.grayDark"` | `borderColor="border.tertiary"` | +| `borderColor="border.grayDarker"` | n/a | +| `borderColor="border.green"` | `borderColor="border.success"` | +| `borderColor="border.greenLight"` | n/a | +| `borderColor="border.purple"` | n/a | +| `borderColor="border.red"` | `borderColor="border.danger"` | +| `borderColor="border.redLight"` | n/a | +| `borderColor="border.white"` | `borderColor="border.inverse"` | +| `borderColor="border.whiteFace"` | n/a | +| `borderColor="border.yellow"` | `borderColor="border.warning"` | +| `borderColor="border.blackFade"` | `borderColor="fade.fg15"` | +| `borderColor="border.whiteFade"` | `borderCOlor="fade.white15"` | +| `borderColor="blue.5"` | `borderColor="border.info"` | +| `borderColor="gray.2"` | `borderColor="border.primary"` | +| `borderColor="gray.3"` | `borderColor="border.tertiary"` | +| `borderColor="green.4"` | `borderColor="border.success"` | +| `borderColor="red.5"` | `borderColor="border.danger"` | +| `borderColor="white"` | `borderColor="border.inverse"` | -#### Text +#### Background -| [`v24.0`](https://primer.style/css/utilities/colors#text-color-utilities) | `v24.1` | -| ------------------------------------------------------------------------- | ---------------- | -| `text.gray` | `text.secondary` | -| `text.grayLight` | `text.tertiary` | -| `text.grayDark` | `text.primary` | -| `text.red` | `text.danger` | -| `text.white` | `text.inverse` | -| `gray.6` | `text.secondary` | -| `gray.5` | `text.tertiary` | -| `gray.9` | `text.primary` | -| `red.6` | `text.danger` | -| `white` | `text.inverse` | -| `blue.5` | `text.link` | -| `gray.4` | `text.disabled` | -| `green.5` | `text.success` | -| `yellow.8` | `text.warning` | +| `v24` | `v25` | +| ------------------- | ------------------------ | +| `bg="white"` | `bg="bg.primary"` | +| `bg="bg.grayLight"` | `bg="bg.secondary"` | +| `bg="bg.gray"` | `bg="bg.tertiary"` | +| `bg="bg.grayDark"` | `bg="bg.canvasInverse"` | +| `bg="blue.0"` | `bg="bg.info"` | +| `bg="blue.5"` | `bg="bg.infoInverse"` | +| `bg="red.0"` | `bg="bg.danger"` | +| `bg="red.5"` | `bg="bg.dangerInverse"` | +| `bg="green.1"` | `bg="bg.success"` | +| `bg="green.5"` | `bg="bg.successInverse"` | -#### Icon +#### Labels -| `v24.0` | `v24.1` | -| ---------- | ---------------- | -| `gray.9` | `icon.primary` | -| `gray.6` | `icon.secondary` | -| `gray.4` | `icon.tertiary` | -| `blue.5` | `icon.info` | -| `red.5` | `icon.danger` | -| `green.6` | `icon.success` | -| `yellow.8` | `icon.warning` | +_Note the change in pluralization from 'labels' to 'label'._ + +| `v24` | `v25` | +| ----------------------------- | ------------------------------------- | +| `color="labels.grayDarkText"` | `color="label.primary.text` | +| `borderColor="labels.gray"` | `borderColor="label.primary.border` | +| `color="labels.grayText"` | `color="label.secondary.text` | +| `borderColor="labels.gray"` | `borderColor="label.secondary.border` | +| `color="labels.blueText"` | `color="label.info.text` | +| `borderColor="labels.blue"` | `borderColor="label.info.border` | +| `color="labels.greenText"` | `color="label.success.text` | +| `borderColor="labels.green"` | `borderColor="label.success.border` | +| `color="labels.yellowText"` | `color="label.warning.text` | +| `borderColor="labels.yellow"` | `borderColor="label.warning.border` | +| `color="labels.redText"` | `color="label.danger.text` | +| `borderColor="labels.red"` | `borderColor="label.danger.border` | +| `color="labels.orangeText"` | `color="label.primary.text` | +| `borderColor="labels.orange"` | `borderColor="label.primary.text` | +| `color="labels.pinkText"` | n/a | +| `borderColor="labels.pink"` | n/a | +| `color="labels.purpleText"` | n/a | +| `borderColor="labels.purple"` | n/a | -#### Border +#### Counters -| [`v24.0`](https://primer.style/css/utilities/borders#border-color-utilities) | `v24.1` | -| ---------------------------------------------------------------------------- | ----------------- | -| `border.blue` | `border.info` | -| `border.blueLight` | n/a | -| `border.grayLight` | `border.primary` | -| `border.grayDark` | `border.tertiary` | -| `border.grayDarker` | n/a | -| `border.green` | `border.success` | -| `border.greenLight` | n/a | -| `border.purple` | n/a | -| `border.red` | `border.danger` | -| `border.redLight` | n/a | -| `border.white` | `border.inverse` | -| `border.whiteFace` | n/a | -| `border.yellow` | `border.warning` | -| `border.blackFade` | `fade.fg15` | -| `border.whiteFade` | `fade.white15` | -| `blue.5` | `border.info` | -| `gray.2` | `border.primary` | -| `gray.3` | `border.tertiary` | -| `green.4` | `border.success` | -| `red.5` | `border.danger` | -| `white` | `border.inverse` | +| `v24` | `v25` | +| --------------------- | -------------------- | +| `scheme="gray"` | `scheme="primary"` | +| `scheme="gray-light"` | `scheme="secondary"` | -#### Background +#### Timeline -| [`v24.0`](https://primer.style/css/utilities/colors#background-utilities) | `v24.1` | -| ------------------------------------------------------------------------- | ------------------- | -| `white` | `bg.primary` | -| `bg.grayLight` | `bg.secondary` | -| `bg.gray` | `bg.tertiary` | -| `bg.grayDark` | `bg.canvasInverse` | -| `blue.0` | `bg.info` | -| `blue.5` | `bg.infoInverse` | -| `red.0` | `bg.danger` | -| `red.5` | `bg.dangerInverse` | -| `green.1` | `bg.success` | -| `green.5` | `bg.successInverse` | +| `v24` | `v25` | +| ----------------------------------------- | ----------------------------- | +| `bg="red.5"` | `bg="prState.closed.bg"` | +| `bg="green.5"` | `bg="prState.open.bg"` | +| `bg="purple.5"` | `bg="prState.merged.bg"` | +| `bg="gray.5"` | `bg="prState.draft.bg"` | +| `color="white"` (context: closed PR icon) | `color="prState.closed.text"` | +| `color="white"` (context: open PR icon) | `color="prState.open.text"` | +| `color="white"` (context: merged PR icon) | `color="prState.merged.text"` | +| `color="white"` (context: merged PR icon) | `color="prState.draft.text"` | From cd77d11b0d7c31781f652c6155dfca4f7baee374 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 10 Mar 2021 12:45:54 -0800 Subject: [PATCH 19/29] Update theme-preval --- src/__tests__/BorderBox.tsx | 6 ++--- src/__tests__/CircleOcticon.tsx | 4 +-- src/__tests__/CounterLabel.tsx | 11 +++++--- src/__tests__/Flash.tsx | 8 +++--- src/__tests__/example.js | 46 --------------------------------- src/theme-preval.js | 25 ++++++++++-------- src/theme.ts | 3 +-- 7 files changed, 31 insertions(+), 72 deletions(-) delete mode 100644 src/__tests__/example.js diff --git a/src/__tests__/BorderBox.tsx b/src/__tests__/BorderBox.tsx index dda0d58094c..4266184f9a7 100644 --- a/src/__tests__/BorderBox.tsx +++ b/src/__tests__/BorderBox.tsx @@ -1,5 +1,5 @@ import React from 'react' -import theme, {colors} from '../theme' +import theme from '../theme' import {BorderBox} from '..' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {LAYOUT, COMMON, BORDER, FLEX} from '../constants' @@ -25,7 +25,7 @@ describe('BorderBox', () => { it('renders borders', () => { expect(render()).toHaveStyleRule( 'border-color', - theme.colors.border.success + theme.colors.border?.success ) expect(render()).toHaveStyleRule('border-bottom', '0') }) @@ -36,6 +36,6 @@ describe('BorderBox', () => { // the test returns the box shadow value without spaces, so had to manually provide the expected string here it('renders box shadow', () => { - expect(render()).toHaveStyleRule('box-shadow', theme.shadows.shadow.small) + expect(render()).toHaveStyleRule('box-shadow', theme.shadows.shadow?.small) }) }) diff --git a/src/__tests__/CircleOcticon.tsx b/src/__tests__/CircleOcticon.tsx index 83e73c44d74..449117c11fa 100644 --- a/src/__tests__/CircleOcticon.tsx +++ b/src/__tests__/CircleOcticon.tsx @@ -1,6 +1,6 @@ import React from 'react' import {CheckIcon} from '@primer/octicons-react' -import theme, {colors} from '../theme' +import theme from '../theme' import {CircleOcticon} from '..' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {COMMON, FLEX, LAYOUT} from '../constants' @@ -40,7 +40,7 @@ describe('CircleOcticon', () => { it('respects the bg prop', () => { expect(render()).toHaveStyleRule( 'background-color', - theme.colors.bg.danger + theme.colors.bg?.danger ) }) diff --git a/src/__tests__/CounterLabel.tsx b/src/__tests__/CounterLabel.tsx index bda04642b33..b65d537a6ba 100644 --- a/src/__tests__/CounterLabel.tsx +++ b/src/__tests__/CounterLabel.tsx @@ -30,15 +30,18 @@ describe('CounterLabel', () => { it('respects the primary "scheme" prop', () => { const p = primitives - expect(render()).toHaveStyleRule('color', theme.colors.counter.primary.text.trim()) + expect(render()).toHaveStyleRule( + 'color', + theme.colors.counter?.primary.text.trim() + ) expect(render()).toHaveStyleRule( 'background-color', - theme.colors.counter.primary.bg.trim() + theme.colors.counter?.primary.bg.trim() ) }) it('respects the secondary "scheme" prop', () => { - expect(render()).toHaveStyleRule('color', theme.colors.counter.text.trim()) - expect(render()).toHaveStyleRule('background-color', theme.colors.counter.bg) + expect(render()).toHaveStyleRule('color', theme.colors.counter?.text.trim()) + expect(render()).toHaveStyleRule('background-color', theme.colors.counter?.bg) }) }) diff --git a/src/__tests__/Flash.tsx b/src/__tests__/Flash.tsx index 5afe49112ee..9a8e588d8ac 100644 --- a/src/__tests__/Flash.tsx +++ b/src/__tests__/Flash.tsx @@ -31,16 +31,16 @@ describe('Flash', () => { it('respects the "variant" prop', () => { expect(render()).toHaveStyleRule( 'background-color', - theme.colors.alert.warn.bg + theme.colors.alert?.warn.bg ) expect(render()).toHaveStyleRule( 'background-color', - theme.colors.alert.error.bg + theme.colors.alert?.error.bg ) expect(render()).toHaveStyleRule( 'background-color', - theme.colors.alert.success.bg + theme.colors.alert?.success.bg ) - expect(render()).toHaveStyleRule('background-color', theme.colors.alert.info.bg) + expect(render()).toHaveStyleRule('background-color', theme.colors.alert?.info.bg) }) }) diff --git a/src/__tests__/example.js b/src/__tests__/example.js deleted file mode 100644 index 2ec749fe160..00000000000 --- a/src/__tests__/example.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react' -// 1. uncomment this line and change "SomeComponent" -// import SomeComponent from '../SomeComponent' -import {colors} from '../theme' -import {render, renderStyles} from '../utils/testing' -import {COMMON} from '../constants' - -// 2. remove this definition; it's just for eslint -function SomeComponent() {} - -// 3. remove the leading "x" from this line to enable the test -describe.skip('SomeComponent', () => { - // if applicable, ensure that this is a "system component" - it('is a system component', () => { - expect(SomeComponent.systemComponent).toBe(true) - }) - - // ensure that it implements common props - it('implements common system props', () => { - expect(SomeComponent).toImplementSystemProps(COMMON) - }) - - it('matches the snapshot', () => { - expect(render()).toMatchSnapshot() - }) - - // this is generally how you test that a prop renders one or more styles - it('renders "x" prop into styles', () => { - // use the .toMatchKeys() to test a subset of the rendered styles - expect(renderStyles()).toMatchKeys({ - 'background-color': colors.green[5] - }) - - // or use .toEqual() if: - // * your component shouldn't render any other styles; or - // * you know the other ("base") styles that your component should - // render, and you can spread them into the result - const defaultStyles = { - color: colors.bodytext - } - expect(renderStyles()).toEqual({ - ...defaultStyles, - 'background-color': colors.green[5] - }) - }) -}) diff --git a/src/theme-preval.js b/src/theme-preval.js index 341d90ef345..3cc0de73d25 100644 --- a/src/theme-preval.js +++ b/src/theme-preval.js @@ -47,16 +47,20 @@ const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px' const {scale: _excludeScaleColors, ...colors} = filterObject(primitives.colors.light, value => isColorValue(value)) const {scale: _excludeScaleShadows, ...shadows} = filterObject(primitives.colors.light, value => isShadowValue(value)) -// this is a small hack that is a temporary stop gap. -// this file must be in vanilla JS to work with preval +// This file must be in vanilla JS to work with preval // but our temporary filter utils make it impossible for -// our TypeScript to properly infer const object structure. -// shallow merging primitives objects back in restores the -// structural inferences and ultimately gets overrideen with -// the filtered values. -const typedColors = {...primitives.colors.light, ...colors} -const typedShadows = {...primitives.colors.light, ...shadows} -// --------- +// our TypeScript to properly infer const object structure +// so we need to use JSDoc comments. + +/** + * @type Partial + */ +const typedColors = colors + +/** + * @type Partial + */ +const typedShadows = shadows const theme = { // General @@ -74,6 +78,5 @@ const theme = { } module.exports = { - theme, - colors + theme } diff --git a/src/theme.ts b/src/theme.ts index cb5c37a6675..c83d7143693 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,4 +1,3 @@ -import {theme, colors} from './theme-preval' +import {theme} from './theme-preval' export default theme -export {colors} From b546154fc1ec1516d62663a0194ec06a2877b4f7 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 10 Mar 2021 15:33:26 -0600 Subject: [PATCH 20/29] Update .changeset/early-drinks-love.md to reflect a major version change Co-authored-by: Cole Bemis --- .changeset/early-drinks-love.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/early-drinks-love.md b/.changeset/early-drinks-love.md index 9aa1c0344d1..c0ff2f43b41 100644 --- a/.changeset/early-drinks-love.md +++ b/.changeset/early-drinks-love.md @@ -1,5 +1,5 @@ --- -'@primer/components': minor +'@primer/components': major --- Removes deprecated presentational theme variables in favor of _functional variables_ for styling components that are consistent across multiple themes. From b5c359185000224fc74d1a326b329e2eb928b1a2 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 10 Mar 2021 15:33:48 -0600 Subject: [PATCH 21/29] Update docs/content/CounterLabel.md to use double quotes Co-authored-by: Cole Bemis --- docs/content/CounterLabel.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/CounterLabel.md b/docs/content/CounterLabel.md index 6a3b94c0b29..ba313551354 100644 --- a/docs/content/CounterLabel.md +++ b/docs/content/CounterLabel.md @@ -9,8 +9,8 @@ Use the CounterLabel component to add a count to navigational elements and butto ```jsx live 12 -13 -13 +13 +13 ``` ## System props From f9e3b9bcc0dbdbdcbf519c8619f6112337086781 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 26 Mar 2021 13:41:17 -0500 Subject: [PATCH 22/29] Update migration guide to reference correct versions --- .changeset/early-drinks-love.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/.changeset/early-drinks-love.md b/.changeset/early-drinks-love.md index c0ff2f43b41..fbef82af9a2 100644 --- a/.changeset/early-drinks-love.md +++ b/.changeset/early-drinks-love.md @@ -12,7 +12,7 @@ If you have any quenstions, feel free to reach out in the #design-systems channe #### Text -| `v24` | `v25` | +| `v25` | `v26` | | ------------------------ | ------------------------ | | `color="text.gray"` | `color="text.secondary"` | | `color="text.grayLight"` | `color="text.tertiary"` | @@ -31,7 +31,7 @@ If you have any quenstions, feel free to reach out in the #design-systems channe #### Icon -| `v24` | `v25` | +| `v25` | `v25` | | ------------------ | ------------------------ | | `color="gray.9"` | `color="icon.primary"` | | `color="gray.6"` | `color="icon.secondary"` | @@ -43,7 +43,7 @@ If you have any quenstions, feel free to reach out in the #design-systems channe #### Border -| `v24` | `v25` | +| `v25` | `v26` | | --------------------------------- | ------------------------------- | | `borderColor="border.blue"` | `borderColor="border.info"` | | `borderColor="border.blueLight"` | n/a | @@ -69,7 +69,7 @@ If you have any quenstions, feel free to reach out in the #design-systems channe #### Background -| `v24` | `v25` | +| `v25` | `v26` | | ------------------- | ------------------------ | | `bg="white"` | `bg="bg.primary"` | | `bg="bg.grayLight"` | `bg="bg.secondary"` | @@ -86,7 +86,7 @@ If you have any quenstions, feel free to reach out in the #design-systems channe _Note the change in pluralization from 'labels' to 'label'._ -| `v24` | `v25` | +| `v25` | `v26` | | ----------------------------- | ------------------------------------- | | `color="labels.grayDarkText"` | `color="label.primary.text` | | `borderColor="labels.gray"` | `borderColor="label.primary.border` | @@ -109,14 +109,14 @@ _Note the change in pluralization from 'labels' to 'label'._ #### Counters -| `v24` | `v25` | +| `v25` | `v26` | | --------------------- | -------------------- | | `scheme="gray"` | `scheme="primary"` | | `scheme="gray-light"` | `scheme="secondary"` | #### Timeline -| `v24` | `v25` | +| `v25` | `v26` | | ----------------------------------------- | ----------------------------- | | `bg="red.5"` | `bg="prState.closed.bg"` | | `bg="green.5"` | `bg="prState.open.bg"` | From 0e20dd7c3c6d2b0d05498d75b911a3921cd0ce8d Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 30 Mar 2021 12:05:53 -0700 Subject: [PATCH 23/29] Update tests --- src/__tests__/BorderBox.tsx | 7 +++++-- src/__tests__/CircleOcticon.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/__tests__/BorderBox.tsx b/src/__tests__/BorderBox.tsx index 4266184f9a7..2982d51ce92 100644 --- a/src/__tests__/BorderBox.tsx +++ b/src/__tests__/BorderBox.tsx @@ -25,7 +25,7 @@ describe('BorderBox', () => { it('renders borders', () => { expect(render()).toHaveStyleRule( 'border-color', - theme.colors.border?.success + theme.colorSchemes.light.colors.border?.success ) expect(render()).toHaveStyleRule('border-bottom', '0') }) @@ -36,6 +36,9 @@ describe('BorderBox', () => { // the test returns the box shadow value without spaces, so had to manually provide the expected string here it('renders box shadow', () => { - expect(render()).toHaveStyleRule('box-shadow', theme.shadows.shadow?.small) + expect(render()).toHaveStyleRule( + 'box-shadow', + theme.colorSchemes.light.shadows.shadow?.small + ) }) }) diff --git a/src/__tests__/CircleOcticon.tsx b/src/__tests__/CircleOcticon.tsx index 449117c11fa..819957f769b 100644 --- a/src/__tests__/CircleOcticon.tsx +++ b/src/__tests__/CircleOcticon.tsx @@ -40,7 +40,7 @@ describe('CircleOcticon', () => { it('respects the bg prop', () => { expect(render()).toHaveStyleRule( 'background-color', - theme.colors.bg?.danger + theme.colorSchemes.light.colors.bg?.danger ) }) From 825b5511b29d56239fee20a40ebe5e5a0caafc3e Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 30 Mar 2021 12:54:42 -0700 Subject: [PATCH 24/29] Update theme in the docs --- docs/package.json | 2 ++ .../components/wrap-page-element.js | 12 +++++++++--- docs/yarn.lock | 10 ++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/package.json b/docs/package.json index ad6c409954e..9d097c6dc77 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,8 +13,10 @@ "dependencies": { "@primer/gatsby-theme-doctocat": "1.6.0", "@primer/octicons-react": "^10.0.0", + "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", "@styled-system/theme-get": "^5.1.0", + "deepmerge": "4.2.2", "gatsby": "2.27.5", "gatsby-plugin-alias-imports": "^1.0.5", "gatsby-plugin-typescript": "2.10.0", diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js b/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js index 01b61eb8990..e824f5c58aa 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js @@ -1,13 +1,19 @@ -import {BaseStyles, ThemeProvider} from '@primer/components' -import React from 'react' +import {BaseStyles, theme, ThemeProvider} from '@primer/components' import SkipLink from '@primer/gatsby-theme-doctocat/src/components/skip-link' +import primitives from '@primer/primitives' +import deepmerge from 'deepmerge' +import React from 'react' // Temporarily shadowing this file to wrap the page in our custom ThemeProvider. // We can remove this file when Doctocat uses the custom ThemeProvider. +// Doctocat still uses presentional color variables. +// We can remove this customTheme when Doctocat uses funtional color variables +const customTheme = deepmerge(theme, {colors: primitives.colors.light.scale}) + function wrapPageElement({element}) { return ( - + {element} diff --git a/docs/yarn.lock b/docs/yarn.lock index ce5b1bcbda8..3d9647a83a4 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1599,6 +1599,11 @@ resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-3.0.0.tgz#ccfb324b478b2373733535ec49f8de29e238c55d" integrity sha512-ISXB43vcA+kg5pmGtGo3lPlHmY5Mg9nLhliePJu3Y5aP7g28TO+9cC99gL240pZHYsO0aVyU26WZwUXn6UIqJQ== +"@primer/primitives@4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.1.0.tgz#33d83b38e2021f294f446c41bca65f5d7ffd898a" + integrity sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ== + "@reach/component-component@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.3.0.tgz#ccf593e26132cbec0ad92774b80356dcf544d5c5" @@ -4910,6 +4915,11 @@ deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepmerge@4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + default-gateway@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b" From f496c4c36316c9dae3f831a5709c78356038a94a Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 30 Mar 2021 13:15:00 -0700 Subject: [PATCH 25/29] Fix code example border --- .../components/live-code.js | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 docs/src/@primer/gatsby-theme-doctocat/components/live-code.js diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js new file mode 100644 index 00000000000..c456eea070a --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js @@ -0,0 +1,84 @@ +import {Absolute, Flex, Relative, Text} from '@primer/components' +import ClipboardCopy from '@primer/gatsby-theme-doctocat/src/components/clipboard-copy' +import LivePreviewWrapper from '@primer/gatsby-theme-doctocat/src/components/live-preview-wrapper' +import githubTheme from '@primer/gatsby-theme-doctocat/src/github' +import scope from '@primer/gatsby-theme-doctocat/src/live-code-scope' +import htmlReactParser from 'html-react-parser' +import React, {useState} from 'react' +import reactElementToJsxString from 'react-element-to-jsx-string' +import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live' +import {ThemeContext} from 'styled-components' + +// Temporarily shadowing this file to update the border color of the live examples. +// We can remove this file when Doctocat functional color variables. + +const languageTransformers = { + html: html => htmlToJsx(html), + jsx: jsx => wrapWithFragment(jsx) +} + +function htmlToJsx(html) { + try { + const reactElement = htmlReactParser(removeNewlines(html)) + // The output of htmlReactParser could be a single React element + // or an array of React elements. reactElementToJsxString does not accept arrays + // so we have to wrap the output in React fragment. + return reactElementToJsxString(<>{reactElement}) + } catch (error) { + return wrapWithFragment(html) + } +} + +function removeNewlines(string) { + return string.replace(/(\r\n|\n|\r)/gm, '') +} + +function wrapWithFragment(jsx) { + // eslint-disable-next-line github/unescaped-html-literal + return `${jsx}` +} + +function LiveCode({code, language, noinline}) { + const theme = React.useContext(ThemeContext) + const [liveCode, setLiveCode] = useState(code) + const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode) + + return ( + + + + + + + + + + + + + + + + + ) +} + +export default LiveCode From 33328710e6906aa47104d7b199f7d89c8f40c53b Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 30 Mar 2021 13:37:28 -0700 Subject: [PATCH 26/29] Update comment --- docs/src/@primer/gatsby-theme-doctocat/components/live-code.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js index c456eea070a..b4a9b447e60 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js @@ -10,7 +10,7 @@ import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live' import {ThemeContext} from 'styled-components' // Temporarily shadowing this file to update the border color of the live examples. -// We can remove this file when Doctocat functional color variables. +// We can remove this file when Doctocat uses functional color variables. const languageTransformers = { html: html => htmlToJsx(html), From 7ab29c2fd11822e64ad3b0b59dd5b529ed30e94e Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 30 Mar 2021 13:40:00 -0700 Subject: [PATCH 27/29] Update comment --- .../gatsby-theme-doctocat/components/wrap-page-element.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js b/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js index e824f5c58aa..2fd0fb42ad0 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js @@ -8,7 +8,7 @@ import React from 'react' // We can remove this file when Doctocat uses the custom ThemeProvider. // Doctocat still uses presentional color variables. -// We can remove this customTheme when Doctocat uses funtional color variables +// We can remove this customTheme when Doctocat uses functional color variables const customTheme = deepmerge(theme, {colors: primitives.colors.light.scale}) function wrapPageElement({element}) { From 9f27f6e6226b24f4a7c05b702b7692d1406eabe1 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 30 Mar 2021 13:42:58 -0700 Subject: [PATCH 28/29] Update .changeset/early-drinks-love.md --- .changeset/early-drinks-love.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/early-drinks-love.md b/.changeset/early-drinks-love.md index fbef82af9a2..95ec581ed48 100644 --- a/.changeset/early-drinks-love.md +++ b/.changeset/early-drinks-love.md @@ -8,7 +8,7 @@ Removes deprecated presentational theme variables in favor of _functional variab If you don't use any color-related system props (e.g. `color`, `bg`, `borderColor`), all components should work without changes. If you're using color-related system props, you'll need to update them to use the new functional variables. Reference the tables below to see how old variables map to new functional variables. -If you have any quenstions, feel free to reach out in the #design-systems channel. +If you have any questions, feel free to reach out in the #design-systems channel. #### Text From 33ddda9a1bf18736a7220f8b6baf581056da279e Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 30 Mar 2021 13:59:49 -0700 Subject: [PATCH 29/29] Update Overlay story --- src/stories/Overlay.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stories/Overlay.stories.tsx b/src/stories/Overlay.stories.tsx index dbc824cca13..e2dbcd31640 100644 --- a/src/stories/Overlay.stories.tsx +++ b/src/stories/Overlay.stories.tsx @@ -1,9 +1,9 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ import React, {useState, useRef} from 'react' import {Meta} from '@storybook/react' -import styled, {ThemeProvider} from 'styled-components' +import styled from 'styled-components' -import {BaseStyles, Overlay, Button, Text, ButtonDanger, theme, Position, Flex} from '..' +import {BaseStyles, Overlay, Button, Text, ButtonDanger, ThemeProvider, Position, Flex} from '..' export default { title: 'Internal components/Overlay', @@ -11,7 +11,7 @@ export default { decorators: [ Story => { return ( - +