From d744d35f00b00652545296e873c07f65146719e0 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 1 Nov 2019 16:35:04 -0700 Subject: [PATCH 01/35] add variables nav item --- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 06629787..27426856 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -16,6 +16,8 @@ url: /support/typography - title: Marketing support url: /support/marketing-variables + - title: Variables + url: /support/variables - title: Utilities url: /utilities children: From 6b5fa25400dffdbe5f133d7da5d13701b9441d31 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 1 Nov 2019 16:35:22 -0700 Subject: [PATCH 02/35] add Variables table :sparkles: --- docs/content/support/variables.mdx | 11 +++ docs/src/variables.js | 150 +++++++++++++++++++++++++++++ 2 files changed, 161 insertions(+) create mode 100644 docs/content/support/variables.mdx create mode 100644 docs/src/variables.js diff --git a/docs/content/support/variables.mdx b/docs/content/support/variables.mdx new file mode 100644 index 00000000..11bc3ad0 --- /dev/null +++ b/docs/content/support/variables.mdx @@ -0,0 +1,11 @@ +--- +title: Variables +--- + +import {Variables, DeprecationIcon} from '../../src/variables' + +The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/master/src/support/variables). + +Variables with a are planned for [deprecation](../tools/deprecations) in a future version of `@primer/css`, and should be avoided. + + diff --git a/docs/src/variables.js b/docs/src/variables.js new file mode 100644 index 00000000..56e129de --- /dev/null +++ b/docs/src/variables.js @@ -0,0 +1,150 @@ +import React from 'react' +import {Box, Flex, Link, Text, Tooltip} from '@primer/components' +import Octicon, {Alert} from '@primer/octicons-react' +import themeGet from '@styled-system/theme-get' +import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table' +import styled from 'styled-components' +import variables from '../../dist/variables.json' +import {variableDeprecations} from '../../deprecations' + +const Table = styled(DoctocatTable)` + font-size: ${themeGet('fontSizes.1')}px; + + td, + th { + text-align: left; + vertical-align: top; + } + + tr:target { + th, + td { + background-color: ${themeGet('colors.yellow.0')}; + } + } +` + +for (const name of Object.keys(variables)) { + if (name.endsWith('-font')) { + delete variables[name] + } +} + +const variablesByFile = Object.entries(variables).reduce((map, [name, variable]) => { + const { + source: {path} + } = variable + + variable.name = name + variable.deprecated = variableDeprecations.has(name) ? 1 : 0 + + if (map.has(path)) { + map.get(path).push(variable) + } else { + map.set(path, [variable]) + } + return map +}, new Map()) + +for (const [path, variables] of variablesByFile.entries()) { + variables.sort((a, b) => { + return a.deprecated - b.deprecated || a.source.line - b.source.line + }) +} + +function Variables(props) { + return Array.from(variablesByFile.entries()).map(([path, variables]) => ( + <> +

+ Defined in {path} +

+ + + + + + + + + + {variables + .map(({name, computed, values, source, refs}) => ( + + + + + + ))} + +
NameValueAliases
+ + + # + + + + {name} + + + + + + + + + {computed} + + +
+ + )) +} + +function Mono({nowrap, ...rest}) { + return +} + +function Swatch({value, ...rest}) { + return /^(#|rgb|hsl)/.test(value) ? : null +} + +const SwatchBox = styled(Text)` + display: inline-block; + vertical-align: baseline; + width: ${p => p.size}; + height: ${p => p.size}; + border: 1px solid ${themeGet('colors.gray.3')}; + border-radius: ${themeGet('radii.1')}px; + margin-bottom: -2px; +` + +Swatch.defaultProps = { + size: '1em' +} + +function RefList({refs}) { + const last = refs.length - 1 + return refs.map((ref, i) => [ + + {ref} + , + i < last ? ', ' : '' + ]) +} + +function DeprecationFlag({variable, ...rest}) { + const dep = variableDeprecations.get(variable) + return dep ? ( + + + + + + ) : null +} + +function DeprecationIcon(props) { + return +} + +export {Variables, DeprecationIcon} From a4fa7f8875123767e87f33ff2b5e190fbf9f598e Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 1 Nov 2019 16:41:41 -0700 Subject: [PATCH 03/35] run dist up a directory in now-build? --- docs/package.json | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index 08a1bf57..cd742561 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,11 +1,11 @@ { - "name": "docs", "private": true, - "version": "1.0.0", - "license": "MIT", + "name": "docs", + "repository": "primer/css", "scripts": { "clean": "gatsby clean", "develop": "gatsby develop -H 0.0.0.0", + "prebuild": "cd .. && npm run dist", "build": "gatsby build --prefix-paths", "now-build": "npm run build" }, @@ -35,6 +35,5 @@ "react-frame-component": "^4.1.1", "styled-components": "^4.3.2", "title-case": "^2.1.1" - }, - "repository": "primer/css" + } } From dcb7732755c755ff92b354906514733acabc1649 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 1 Nov 2019 16:48:06 -0700 Subject: [PATCH 04/35] get variables from primer dependency --- docs/src/variables.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/variables.js b/docs/src/variables.js index 56e129de..211740ae 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -4,8 +4,8 @@ import Octicon, {Alert} from '@primer/octicons-react' import themeGet from '@styled-system/theme-get' import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table' import styled from 'styled-components' -import variables from '../../dist/variables.json' -import {variableDeprecations} from '../../deprecations' +import variables from '@primer/css/dist/variables.json' +import {variableDeprecations} from '@primer/css/deprecations' const Table = styled(DoctocatTable)` font-size: ${themeGet('fontSizes.1')}px; From f1695125a2913c7b293aaad6a05447a99dc1f22e Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 1 Nov 2019 16:48:21 -0700 Subject: [PATCH 05/35] nix prebuild script; use canary release of primer/css --- docs/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/package.json b/docs/package.json index cd742561..9a7f1d99 100644 --- a/docs/package.json +++ b/docs/package.json @@ -5,14 +5,13 @@ "scripts": { "clean": "gatsby clean", "develop": "gatsby develop -H 0.0.0.0", - "prebuild": "cd .. && npm run dist", "build": "gatsby build --prefix-paths", "now-build": "npm run build" }, "dependencies": { "@loadable/component": "^5.10.2", "@primer/components": "^13.2.0", - "@primer/css": "^12.4.1", + "@primer/css": "0.0.0-beb5a8b", "@primer/gatsby-theme-doctocat": "^0.15.0", "@primer/octicons": "^9.1.1", "@primer/octicons-react": "^9.1.1", From 86015fd7281261f027eeaf50721d286358b983be Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 4 Nov 2019 10:51:56 -0800 Subject: [PATCH 06/35] import primer/css stuff from ../.. --- docs/src/variables.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/variables.js b/docs/src/variables.js index 211740ae..56e129de 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -4,8 +4,8 @@ import Octicon, {Alert} from '@primer/octicons-react' import themeGet from '@styled-system/theme-get' import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table' import styled from 'styled-components' -import variables from '@primer/css/dist/variables.json' -import {variableDeprecations} from '@primer/css/deprecations' +import variables from '../../dist/variables.json' +import {variableDeprecations} from '../../deprecations' const Table = styled(DoctocatTable)` font-size: ${themeGet('fontSizes.1')}px; From bbf42f2e956dcb7cfb6561588012667d2aa02303 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 4 Nov 2019 10:52:09 -0800 Subject: [PATCH 07/35] nix @primer/css dep, run dist up a dir --- docs/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/package.json b/docs/package.json index 9a7f1d99..e7f92b62 100644 --- a/docs/package.json +++ b/docs/package.json @@ -6,12 +6,11 @@ "clean": "gatsby clean", "develop": "gatsby develop -H 0.0.0.0", "build": "gatsby build --prefix-paths", - "now-build": "npm run build" + "now-build": "pushd ..; npm run dist; popd; npm run build" }, "dependencies": { "@loadable/component": "^5.10.2", "@primer/components": "^13.2.0", - "@primer/css": "0.0.0-beb5a8b", "@primer/gatsby-theme-doctocat": "^0.15.0", "@primer/octicons": "^9.1.1", "@primer/octicons-react": "^9.1.1", From 21684ca0e9e01d82414787816dccf166e0ae116a Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 4 Nov 2019 10:55:44 -0800 Subject: [PATCH 08/35] run now-build.sh --- docs/now-build.sh | 6 ++++++ docs/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100755 docs/now-build.sh diff --git a/docs/now-build.sh b/docs/now-build.sh new file mode 100755 index 00000000..a6def6be --- /dev/null +++ b/docs/now-build.sh @@ -0,0 +1,6 @@ +#!/bin/bash +pushd .. +npm install +npm run dist +popd +npm run build diff --git a/docs/package.json b/docs/package.json index e7f92b62..67a651e7 100644 --- a/docs/package.json +++ b/docs/package.json @@ -6,7 +6,7 @@ "clean": "gatsby clean", "develop": "gatsby develop -H 0.0.0.0", "build": "gatsby build --prefix-paths", - "now-build": "pushd ..; npm run dist; popd; npm run build" + "now-build": "./now-build.sh" }, "dependencies": { "@loadable/component": "^5.10.2", From 86abe02471f43c8ab9cb166125a3ac6a3f30b31e Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 4 Nov 2019 11:20:56 -0800 Subject: [PATCH 09/35] get variable deprecations from json --- docs/src/variables.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/variables.js b/docs/src/variables.js index 56e129de..d9edf7d9 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -4,8 +4,8 @@ import Octicon, {Alert} from '@primer/octicons-react' import themeGet from '@styled-system/theme-get' import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table' import styled from 'styled-components' -import variables from '../../dist/variables.json' -import {variableDeprecations} from '../../deprecations' +import variables from '../dist/variables.json' +import deprecations from '../dist/deprecations.json' const Table = styled(DoctocatTable)` font-size: ${themeGet('fontSizes.1')}px; @@ -36,7 +36,7 @@ const variablesByFile = Object.entries(variables).reduce((map, [name, variable]) } = variable variable.name = name - variable.deprecated = variableDeprecations.has(name) ? 1 : 0 + variable.deprecated = deprecations.variables.hasOwnProperty(name) if (map.has(path)) { map.get(path).push(variable) @@ -133,7 +133,7 @@ function RefList({refs}) { } function DeprecationFlag({variable, ...rest}) { - const dep = variableDeprecations.get(variable) + const dep = deprecations.variables[variable] return dep ? ( From d428c9b68e7acad929acd0a746c2829be1b65034 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 4 Nov 2019 12:28:06 -0800 Subject: [PATCH 10/35] use /package.json for now --- now.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/now.json b/now.json index d0ecbb73..484f2415 100644 --- a/now.json +++ b/now.json @@ -4,9 +4,9 @@ "alias": "primer-css.now.sh", "builds": [ { - "src": "docs/package.json", + "src": "package.json", "use": "@now/static-build", - "config": {"distDir": "public"} + "config": {"distDir": "docs/public"} } ], "routes": [ From cfad20f55e82cb64c7f74af940aaeeb0da97df8b Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 4 Nov 2019 12:28:21 -0800 Subject: [PATCH 11/35] add .nowignore --- .nowignore | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .nowignore diff --git a/.nowignore b/.nowignore new file mode 100644 index 00000000..a6df94c6 --- /dev/null +++ b/.nowignore @@ -0,0 +1,5 @@ +.*.sw? +.changelog/ +dist/ +docs/dist +docs/public/ From 4abb5c628a3717cacacaf9e4e7a91f6e3790f665 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 4 Nov 2019 12:28:49 -0800 Subject: [PATCH 12/35] move now-build.sh up to /script, etc. --- .gitignore | 9 +++++---- docs/now-build.sh | 6 ------ docs/package.json | 5 ++--- package.json | 1 + script/now-build.sh | 6 ++++++ 5 files changed, 14 insertions(+), 13 deletions(-) delete mode 100755 docs/now-build.sh create mode 100755 script/now-build.sh diff --git a/.gitignore b/.gitignore index 65ec875b..94a0fe7a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,15 @@ *.log *.tgz .DS_Store -.changelog +.cache/ +.changelog/ .next/ .sass-cache -.stylelintcache .storybuild/ +.stylelintcache _site dist/ +docs/dist node_modules/ -searchIndex.js -.cache/ public/ +searchIndex.js diff --git a/docs/now-build.sh b/docs/now-build.sh deleted file mode 100755 index a6def6be..00000000 --- a/docs/now-build.sh +++ /dev/null @@ -1,6 +0,0 @@ -#!/bin/bash -pushd .. -npm install -npm run dist -popd -npm run build diff --git a/docs/package.json b/docs/package.json index 67a651e7..f40db9db 100644 --- a/docs/package.json +++ b/docs/package.json @@ -4,9 +4,8 @@ "repository": "primer/css", "scripts": { "clean": "gatsby clean", - "develop": "gatsby develop -H 0.0.0.0", - "build": "gatsby build --prefix-paths", - "now-build": "./now-build.sh" + "develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0", + "build": "gatsby build --prefix-paths" }, "dependencies": { "@loadable/component": "^5.10.2", diff --git a/package.json b/package.json index b8f06571..e1887bc4 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "publish-storybook": "script/publish-storybook", "start": "npm run dev", "dev": "cd docs && npm install && npm run develop", + "now-build": "script/now-build.sh", "start-storybook": "start-storybook -p 8001", "build-storybook": "build-storybook -o .storybuild", "test": "npm-run-all -s test-urls test-migrate", diff --git a/script/now-build.sh b/script/now-build.sh new file mode 100755 index 00000000..91c12284 --- /dev/null +++ b/script/now-build.sh @@ -0,0 +1,6 @@ +#!/bin/bash -e +npm run dist +cp -rf dist docs +cd docs +npm install +npm run build From 016135b822e90d486eb54abe50dd3d01bb45d12c Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 14 Nov 2019 13:27:44 -0800 Subject: [PATCH 13/35] update docs/package-lock.json, npm audit fix --- docs/package-lock.json | 43 ++++++++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index 924bdfe6..664e3f46 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1,8 +1,7 @@ { "name": "docs", - "version": "1.0.0", - "lockfileVersion": 1, "requires": true, + "lockfileVersion": 1, "dependencies": { "@babel/code-frame": { "version": "7.5.5", @@ -1449,11 +1448,6 @@ } } }, - "@primer/css": { - "version": "12.5.0", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-12.5.0.tgz", - "integrity": "sha512-MyA2hoCY3UAmMKPHPN+LM1HrwGz5VR92fkEkIzAQgHBYMPstT77tjHkO8OPoWW//DShdYMYAgukZdMJ8lnsfbg==" - }, "@primer/gatsby-theme-doctocat": { "version": "0.15.0", "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.15.0.tgz", @@ -6247,11 +6241,18 @@ } }, "eslint-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.0.tgz", - "integrity": "sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", + "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==", "requires": { - "eslint-visitor-keys": "^1.0.0" + "eslint-visitor-keys": "^1.1.0" + }, + "dependencies": { + "eslint-visitor-keys": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz", + "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==" + } } }, "eslint-visitor-keys": { @@ -9138,9 +9139,9 @@ "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==" }, "handlebars": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.2.0.tgz", - "integrity": "sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==", + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.2.tgz", + "integrity": "sha512-29Zxv/cynYB7mkT1rVWQnV7mGX6v7H/miQ6dbEpYTKq5eJBN7PsRB+ViYJlcT6JINTSu4dVB9kOqEun78h6Exg==", "requires": { "neo-async": "^2.6.0", "optimist": "^0.6.1", @@ -17924,15 +17925,21 @@ "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" }, "uglify-js": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz", - "integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==", + "version": "3.6.9", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.9.tgz", + "integrity": "sha512-pcnnhaoG6RtrvHJ1dFncAe8Od6Nuy30oaJ82ts6//sGSXOP5UjBMEthiProjXmMNHOfd93sqlkztifFMcb+4yw==", "optional": true, "requires": { - "commander": "~2.20.0", + "commander": "~2.20.3", "source-map": "~0.6.1" }, "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "optional": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", From 49ed359543f302ea3c2878c103d4139dd106b698 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Nov 2019 16:25:02 +0900 Subject: [PATCH 14/35] Add link to the Stylelint guide --- docs/content/tools/linting.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/content/tools/linting.md b/docs/content/tools/linting.md index 678b083e..39e36ee4 100644 --- a/docs/content/tools/linting.md +++ b/docs/content/tools/linting.md @@ -103,3 +103,7 @@ We test for the proper use of the [Octicons helper](https://github.com/primer/oc ## IE rule limit We check that our compiled CSS assets don't contain more selectors than the [IE CSS selector limits](https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/). + +## Linting dotcom + +There are a few handy scripts to make your life easier when working with CSS on dotcom, especially when doing bigger refactors. Checkout the [Stylelint guide](https://github.com/github/design-systems/blob/master/tools/stylelint.md). From 6e853a1fba443d4b816dd78b3f486c90f40faa55 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 12 Dec 2019 16:15:04 +0900 Subject: [PATCH 15/35] Add responsive variants to line-height utilities --- src/utilities/typography.scss | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss index bc5e3ab4..f790a710 100644 --- a/src/utilities/typography.scss +++ b/src/utilities/typography.scss @@ -161,14 +161,19 @@ // Close to commonly used line-heights. Most line-heights // combined with type size equate to whole pixels. // Will be improved with future typography scale updates. -/* Set the line height to ultra condensed */ -.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; } -/* Set the line height to condensed */ -.lh-condensed { line-height: $lh-condensed !important; } -/* Set the line height to default */ -.lh-default { line-height: $lh-default !important; } -/* Set the line height to zero */ -.lh-0 { line-height: 0 !important; } +// Responsive line-height +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + /* Set the line height to ultra condensed */ + .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; } + /* Set the line height to condensed */ + .lh#{$variant}-condensed { line-height: $lh-condensed !important; } + /* Set the line height to default */ + .lh#{$variant}-default { line-height: $lh-default !important; } + /* Set the line height to zero */ + .lh#{$variant}-0 { line-height: 0 !important; } + } +} // Text alignments // Responsive text alignment From 0ac38c22824c115246ac04c7a7fc5deae97b3eed Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 12 Dec 2019 16:15:27 +0900 Subject: [PATCH 16/35] Update typography.md --- docs/content/utilities/typography.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/content/utilities/typography.md b/docs/content/utilities/typography.md index 1a7deff8..2844cd03 100644 --- a/docs/content/utilities/typography.md +++ b/docs/content/utilities/typography.md @@ -8,7 +8,7 @@ bundle: utilities Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS. - + Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop. @@ -67,7 +67,8 @@ Lighter font-weight utilities are available in a limited range. Lighter font-wei ``` ## Line height styles -Change the line height density with these utilities. + +Change the line height density with these utilities. Responsive variants are also available (e.g. `.lh-sm-condensed`). ```html live

From aceac51163f285f7896427e33008d0af08c825e9 Mon Sep 17 00:00:00 2001 From: skullface Date: Thu, 12 Dec 2019 15:22:49 -0500 Subject: [PATCH 17/35] add bold weight marketing font --- src/marketing/support/variables.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss index 9f45d0b0..7d0ec1ca 100644 --- a/src/marketing/support/variables.scss +++ b/src/marketing/support/variables.scss @@ -17,6 +17,14 @@ $marketing-font-path: "/fonts/" !default; font-display: swap; } +@font-face { + font-family: Inter; + font-style: normal; + font-weight: $font-weight-bold; + src: local("Inter Bold"), local("Inter-Bold"), url("#{$marketing-font-path}Inter-Bold.woff") format("woff"); + font-display: swap; +} + $font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; // Builds upon @primer/css/support/variables/typography.scss From c9da147d138912cb0d40ad8041965d51d9522f57 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 16 Dec 2019 17:53:56 +0900 Subject: [PATCH 18/35] Fix links --- CHANGELOG.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 02811610..1bd306c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,26 +1,26 @@ ## 14.0.0 ### :boom: Breaking changes -- [#922](https://github.com/primer/css/922) More SelectMenu improvements -- [#966](https://github.com/primer/css/966) Rename `.flex-item-equal` to `.flex-1` -- [#973](https://github.com/primer/css/973) Deprecate variables in 14.0.0 +- [#922](https://github.com/primer/css/pull/922) More SelectMenu improvements +- [#966](https://github.com/primer/css/pull/966) Rename `.flex-item-equal` to `.flex-1` +- [#973](https://github.com/primer/css/pull/973) Deprecate variables in 14.0.0 ### :rocket: Enhancements -- [#987](https://github.com/primer/css/987) Add .position-sticky utility -- [#979](https://github.com/primer/css/979) Add `.radio-group` component -- [#981](https://github.com/primer/css/981) Autocomplete + Suggester components -- [#978](https://github.com/primer/css/978) Add `.css-truncate-overflow` -- [#974](https://github.com/primer/css/974) Add Animated Ellipsis -- [#971](https://github.com/primer/css/971) Add variable deprecation data and tests +- [#987](https://github.com/primer/css/pull/987) Add .position-sticky utility +- [#979](https://github.com/primer/css/pull/979) Add `.radio-group` component +- [#981](https://github.com/primer/css/pull/981) Autocomplete + Suggester components +- [#978](https://github.com/primer/css/pull/978) Add `.css-truncate-overflow` +- [#974](https://github.com/primer/css/pull/974) Add Animated Ellipsis +- [#971](https://github.com/primer/css/pull/971) Add variable deprecation data and tests ### :memo: Documentation -- [#988](https://github.com/primer/css/988) Add docs for flexbug no. 9 -- [#977](https://github.com/primer/css/977) Update spacing.md +- [#988](https://github.com/primer/css/pull/988) Add docs for flexbug no. 9 +- [#977](https://github.com/primer/css/pull/977) Update spacing.md ### :house: Internal -- [#952](https://github.com/primer/css/952) Async/awaitify script/dist.js -- [#963](https://github.com/primer/css/963) Generate changelog with semantic-release -- [#968](https://github.com/primer/css/968) Stylelint update +- [#952](https://github.com/primer/css/pull/952) Async/awaitify script/dist.js +- [#963](https://github.com/primer/css/pull/963) Generate changelog with semantic-release +- [#968](https://github.com/primer/css/pull/968) Stylelint update ### Committers - [@BinaryMuse](https://github.com/BinaryMuse) @@ -31,20 +31,20 @@ # 13.2.0 ### :rocket: Enhancements -- [#959](https://github.com/primer/css/959) More buttons -- [#950](https://github.com/primer/css/950) Add Diffstat component -- [#913](https://github.com/primer/css/913) Importing TimelineItem from .com and creating matching docs -- [#953](https://github.com/primer/css/953) Add IssueLabel component +- [#959](https://github.com/primer/css/pull/959) More buttons +- [#950](https://github.com/primer/css/pull/950) Add Diffstat component +- [#913](https://github.com/primer/css/pull/913) Importing TimelineItem from .com and creating matching docs +- [#953](https://github.com/primer/css/pull/953) Add IssueLabel component ### :bug: Bug fixes -- [#945](https://github.com/primer/css/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected` +- [#945](https://github.com/primer/css/pull/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected` ### :memo: Documentation -- [#939](https://github.com/primer/css/939) Fix `Box--overlay` example -- [#943](https://github.com/primer/css/943) Fix broken links to typography utilities +- [#939](https://github.com/primer/css/pull/939) Fix `Box--overlay` example +- [#943](https://github.com/primer/css/pull/943) Fix broken links to typography utilities ### :house: Internal -- [#946](https://github.com/primer/css/946) Add `TODO@version` stylelint rule (local) +- [#946](https://github.com/primer/css/pull/946) Add `TODO@version` stylelint rule (local) ### Committers - [@MohamedElidrissi](https://github.com/MohamedElidrissi) From 4fd4f57c113647a8d7a2a3a96de8da93081d6722 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 16 Dec 2019 20:30:15 +0900 Subject: [PATCH 19/35] Fix hover of the tabs --- src/select-menu/select-menu.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 1c035ad3..61457870 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -264,6 +264,7 @@ $SelectMenu-max-height: 480px !default; &[aria-selected="true"] { z-index: 1; // Keeps box-shadow visible when hovering color: $text-gray-dark; + cursor: default; background-color: $bg-white; // stylelint-disable-next-line primer/box-shadow box-shadow: 0 0 0 1px $border-color; @@ -392,13 +393,13 @@ $SelectMenu-max-height: 480px !default; background-color: $blue-100; } - .SelectMenu-tab:not([aria-checked="true"]):hover { + .SelectMenu-tab:not([aria-selected="true"]):hover { color: $text-gray-dark; // stylelint-disable-next-line primer/colors background-color: $gray-200; } - .SelectMenu-tab:not([aria-checked="true"]):active { + .SelectMenu-tab:not([aria-selected="true"]):active { color: $text-gray-dark; background-color: $bg-gray; } From 1d083131121569332b85cbdf2e87e56e7e4144f7 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 16 Dec 2019 21:01:13 +0900 Subject: [PATCH 20/35] Use gray background on hover/focus --- src/select-menu/select-menu.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 61457870..519174be 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -378,14 +378,11 @@ $SelectMenu-max-height: 480px !default; @media (hover: hover) { body:not(.intent-mouse) .SelectMenu-item:focus, .SelectMenu-item:hover { - color: $text-white; - background-color: $bg-blue; + background-color: $bg-gray; } .SelectMenu-item:active { - color: $text-white; - // stylelint-disable-next-line primer/colors - background-color: $blue-400; + background-color: $bg-gray-light; } body:not(.intent-mouse) .SelectMenu-tab:focus { From 803217d55fe9113aefc475a53b05ba6bb9aa3599 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 12 Dec 2019 17:44:57 +0900 Subject: [PATCH 21/35] Split filter and footer --- docs/content/components/select-menu.md | 42 ++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/docs/content/components/select-menu.md b/docs/content/components/select-menu.md index ec62e99d..a033a9a7 100644 --- a/docs/content/components/select-menu.md +++ b/docs/content/components/select-menu.md @@ -254,12 +254,48 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe

``` -## Additional filter and footer +## Footer + +Use a `.SelectMenu-footer` at the bottom for additional information. As a side effect it can greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners. + +```html live +
+ + Choose an item + +
+
+
+

Title

+ +
+
+ + + + + +
+
Footer
+
+
+
+ +
+
+``` + +## Filter If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the Select Menu to the top of the screen. This makes sure the filter input stays at the same position while typing. -Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for additional information, but can also greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners. - ```html live
From ce255110965035d80ad21a25362096b70d7845f7 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 11:02:10 -0800 Subject: [PATCH 22/35] Rename now-build script to build --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e1887bc4..1a0aa59d 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "publish-storybook": "script/publish-storybook", "start": "npm run dev", "dev": "cd docs && npm install && npm run develop", - "now-build": "script/now-build.sh", + "build": "script/now-build.sh", "start-storybook": "start-storybook -p 8001", "build-storybook": "build-storybook -o .storybuild", "test": "npm-run-all -s test-urls test-migrate", From 1133f96d80ea6d766d531515dbda33460bbb4b3e Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 14:08:00 -0800 Subject: [PATCH 23/35] Add Node 12.x to docs/ engines --- docs/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/package.json b/docs/package.json index f40db9db..8c133e59 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,5 +32,8 @@ "react-frame-component": "^4.1.1", "styled-components": "^4.3.2", "title-case": "^2.1.1" + }, + "engines": { + "node": "12.x" } } From 334bc16849c83fc78a2df85f709fd3799b696f29 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 14:08:45 -0800 Subject: [PATCH 24/35] Move now-build.sh to docs folder --- docs/package.json | 3 ++- docs/script/now-build.sh | 12 ++++++++++++ package.json | 1 - script/now-build.sh | 6 ------ 4 files changed, 14 insertions(+), 8 deletions(-) create mode 100755 docs/script/now-build.sh delete mode 100755 script/now-build.sh diff --git a/docs/package.json b/docs/package.json index 8c133e59..09ede56a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -5,7 +5,8 @@ "scripts": { "clean": "gatsby clean", "develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0", - "build": "gatsby build --prefix-paths" + "build-content": "gatsby build --prefix-paths", + "build": "./script/now-build.sh" }, "dependencies": { "@loadable/component": "^5.10.2", diff --git a/docs/script/now-build.sh b/docs/script/now-build.sh new file mode 100755 index 00000000..f2bf806b --- /dev/null +++ b/docs/script/now-build.sh @@ -0,0 +1,12 @@ +#!/bin/bash -e + +# Build the base project so we can pull out the JSON data +cd .. +npm ci +npm run dist +cp -rf dist docs + +# Now build the docs site using that data +cd docs +npm ci +CI=true npm run build-content diff --git a/package.json b/package.json index 1a0aa59d..b8f06571 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "publish-storybook": "script/publish-storybook", "start": "npm run dev", "dev": "cd docs && npm install && npm run develop", - "build": "script/now-build.sh", "start-storybook": "start-storybook -p 8001", "build-storybook": "build-storybook -o .storybuild", "test": "npm-run-all -s test-urls test-migrate", diff --git a/script/now-build.sh b/script/now-build.sh deleted file mode 100755 index 91c12284..00000000 --- a/script/now-build.sh +++ /dev/null @@ -1,6 +0,0 @@ -#!/bin/bash -e -npm run dist -cp -rf dist docs -cd docs -npm install -npm run build From ccab5da711fcc98d7782db4fb13358aaa87ff4ec Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 14:08:58 -0800 Subject: [PATCH 25/35] Revert now.json changes --- now.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/now.json b/now.json index 484f2415..d0ecbb73 100644 --- a/now.json +++ b/now.json @@ -4,9 +4,9 @@ "alias": "primer-css.now.sh", "builds": [ { - "src": "package.json", + "src": "docs/package.json", "use": "@now/static-build", - "config": {"distDir": "docs/public"} + "config": {"distDir": "public"} } ], "routes": [ From a8d6fbac01b6917d0f843c09cf6a8db371d851ba Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 14:09:08 -0800 Subject: [PATCH 26/35] Finish up Variables page --- docs/content/support/variables.mdx | 7 +- docs/gatsby-node.js | 12 +++ docs/src/variables.js | 157 +++++++++++++++++++---------- 3 files changed, 121 insertions(+), 55 deletions(-) create mode 100644 docs/gatsby-node.js diff --git a/docs/content/support/variables.mdx b/docs/content/support/variables.mdx index 11bc3ad0..6c4f97cc 100644 --- a/docs/content/support/variables.mdx +++ b/docs/content/support/variables.mdx @@ -1,11 +1,16 @@ --- title: Variables +path: support/variables +status: Experimental +bundle: alerts --- import {Variables, DeprecationIcon} from '../../src/variables' + + The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/master/src/support/variables). Variables with a are planned for [deprecation](../tools/deprecations) in a future version of `@primer/css`, and should be avoided. - + diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js new file mode 100644 index 00000000..37b8ebba --- /dev/null +++ b/docs/gatsby-node.js @@ -0,0 +1,12 @@ +exports.onCreateWebpackConfig = ({actions, stage, plugins}) => { + actions.setWebpackConfig({ + node: { + fs: 'empty' + }, + plugins: [ + plugins.define({ + __DEV__: stage === 'develop' || stage === 'develop-html' + }) + ] + }) +} diff --git a/docs/src/variables.js b/docs/src/variables.js index d9edf7d9..cba060e1 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -1,11 +1,10 @@ import React from 'react' +import mdx from '@mdx-js/mdx' import {Box, Flex, Link, Text, Tooltip} from '@primer/components' import Octicon, {Alert} from '@primer/octicons-react' import themeGet from '@styled-system/theme-get' import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table' import styled from 'styled-components' -import variables from '../dist/variables.json' -import deprecations from '../dist/deprecations.json' const Table = styled(DoctocatTable)` font-size: ${themeGet('fontSizes.1')}px; @@ -24,37 +23,82 @@ const Table = styled(DoctocatTable)` } ` -for (const name of Object.keys(variables)) { - if (name.endsWith('-font')) { - delete variables[name] - } +function useVariables() { + return React.useMemo(() => { + let variablesByFile = new Map() + + try { + const variables = require('../dist/variables.json') + const deprecations = useDeprecations() + + for (const name of Object.keys(variables)) { + if (name.endsWith('-font')) { + delete variables[name] + } + } + + variablesByFile = Object.entries(variables).reduce((map, [name, variable]) => { + const { + source: {path} + } = variable + + variable.name = name + variable.deprecated = deprecations.variables.hasOwnProperty(name) + + if (map.has(path)) { + map.get(path).push(variable) + } else { + map.set(path, [variable]) + } + + return map + }, variablesByFile) + + for (const variables of variablesByFile.values()) { + variables.sort((a, b) => { + return a.deprecated - b.deprecated || a.source.line - b.source.line + }) + } + + return variablesByFile + } catch (err) { + return new Map() + } + }, []) } -const variablesByFile = Object.entries(variables).reduce((map, [name, variable]) => { - const { - source: {path} - } = variable - - variable.name = name - variable.deprecated = deprecations.variables.hasOwnProperty(name) - - if (map.has(path)) { - map.get(path).push(variable) - } else { - map.set(path, [variable]) - } - return map -}, new Map()) - -for (const [path, variables] of variablesByFile.entries()) { - variables.sort((a, b) => { - return a.deprecated - b.deprecated || a.source.line - b.source.line - }) +function useDeprecations() { + return React.useMemo(() => { + try { + const deprecations = require('../dist/deprecations.json') + return deprecations + } catch (err) { + return {} + } + }, []) } -function Variables(props) { +function Variables({children, ...props}) { + const variablesByFile = useVariables() + console.log(__DEV__) + + if (variablesByFile.size === 0) { + return ( +
+

No data available

+ {__DEV__ && ( +

+ This probably means that the root project has not been built; run `npm run dist` and restart your + development server. +

+ )} +
+ ) + } + return Array.from(variablesByFile.entries()).map(([path, variables]) => ( <> + {children}

Defined in {path}

@@ -67,33 +111,32 @@ function Variables(props) { - {variables - .map(({name, computed, values, source, refs}) => ( - - - - - # + {variables.map(({name, computed, values, source, refs}) => ( + + + + + # + + + + {name} - - - {name} - - - - - - - - - - {computed} - - - - - - ))} + + + + + + + + + {computed} + + + + + + ))} @@ -133,6 +176,8 @@ function RefList({refs}) { } function DeprecationFlag({variable, ...rest}) { + const deprecations = useDeprecations() + const dep = deprecations.variables[variable] return dep ? ( @@ -144,7 +189,11 @@ function DeprecationFlag({variable, ...rest}) { } function DeprecationIcon(props) { - return + return ( + + + + ) } export {Variables, DeprecationIcon} From 22c778f45d5fe0669b646867ea562fb130c7cd9e Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 14:17:54 -0800 Subject: [PATCH 27/35] Variables page cleanup and linting --- docs/.eslintrc.json | 3 +++ docs/src/variables.js | 13 ++++++------- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json index cb1a8800..b9893185 100644 --- a/docs/.eslintrc.json +++ b/docs/.eslintrc.json @@ -13,5 +13,8 @@ "react": { "version": "detect" } + }, + "globals": { + "__DEV__": "readonly" } } diff --git a/docs/src/variables.js b/docs/src/variables.js index cba060e1..9bd52c82 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -24,12 +24,13 @@ const Table = styled(DoctocatTable)` ` function useVariables() { + const deprecations = useDeprecations() + return React.useMemo(() => { let variablesByFile = new Map() try { const variables = require('../dist/variables.json') - const deprecations = useDeprecations() for (const name of Object.keys(variables)) { if (name.endsWith('-font')) { @@ -80,8 +81,6 @@ function useDeprecations() { function Variables({children, ...props}) { const variablesByFile = useVariables() - console.log(__DEV__) - if (variablesByFile.size === 0) { return (
@@ -97,7 +96,7 @@ function Variables({children, ...props}) { } return Array.from(variablesByFile.entries()).map(([path, variables]) => ( - <> + {children}

Defined in {path} @@ -111,7 +110,7 @@ function Variables({children, ...props}) { - {variables.map(({name, computed, values, source, refs}) => ( + {variables.map(({name, computed, source, refs}) => ( @@ -139,7 +138,7 @@ function Variables({children, ...props}) { ))} - + )) } @@ -168,7 +167,7 @@ Swatch.defaultProps = { function RefList({refs}) { const last = refs.length - 1 return refs.map((ref, i) => [ - + {ref} , i < last ? ', ' : '' From e7b10d24f0ae4e4dad8c89f98e7d31a79702e11f Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 14:23:13 -0800 Subject: [PATCH 28/35] :art: --- docs/src/variables.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/variables.js b/docs/src/variables.js index 9bd52c82..f4eba56f 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -60,11 +60,11 @@ function useVariables() { return a.deprecated - b.deprecated || a.source.line - b.source.line }) } - - return variablesByFile } catch (err) { - return new Map() + // do nothing } + + return variablesByFile }, []) } From aff87ba94d464c8decaa87322115c85259013313 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 14:44:22 -0800 Subject: [PATCH 29/35] Remove unused imports --- docs/src/variables.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/src/variables.js b/docs/src/variables.js index f4eba56f..2ec88f23 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -1,6 +1,5 @@ import React from 'react' -import mdx from '@mdx-js/mdx' -import {Box, Flex, Link, Text, Tooltip} from '@primer/components' +import {Flex, Link, Text, Tooltip} from '@primer/components' import Octicon, {Alert} from '@primer/octicons-react' import themeGet from '@styled-system/theme-get' import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table' From 5a3d18a0a8aa295bd345559a16b0c0881f807061 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 14:54:44 -0800 Subject: [PATCH 30/35] Improve error in dev mode when no variables exist --- docs/src/variables.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/variables.js b/docs/src/variables.js index 2ec88f23..3bbbb9e5 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -1,5 +1,5 @@ import React from 'react' -import {Flex, Link, Text, Tooltip} from '@primer/components' +import {Flex, Link, Text, Tooltip, Flash} from '@primer/components' import Octicon, {Alert} from '@primer/octicons-react' import themeGet from '@styled-system/theme-get' import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table' @@ -82,15 +82,15 @@ function Variables({children, ...props}) { const variablesByFile = useVariables() if (variablesByFile.size === 0) { return ( -
+ <>

No data available

{__DEV__ && ( -

+ This probably means that the root project has not been built; run `npm run dist` and restart your development server. -

+ )} -
+ ) } From d2c1351ff59afdbcb29e59f97ac23e543097622a Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 17 Dec 2019 09:11:56 +0900 Subject: [PATCH 31/35] npm version minor --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index ce41d4eb..2df9b95c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@primer/css", - "version": "14.0.0", + "version": "14.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 97a589d4..85956f34 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/css", - "version": "14.0.0", + "version": "14.1.0", "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.", "homepage": "https://primer.style/css", "author": "GitHub, Inc.", From 1dbbf81b7247774bdb62075ed04bcaa30b4de7b0 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 16 Dec 2019 16:27:30 -0800 Subject: [PATCH 32/35] Don't repeat explanatory text --- docs/src/variables.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/src/variables.js b/docs/src/variables.js index 3bbbb9e5..db872526 100644 --- a/docs/src/variables.js +++ b/docs/src/variables.js @@ -80,6 +80,7 @@ function useDeprecations() { function Variables({children, ...props}) { const variablesByFile = useVariables() + if (variablesByFile.size === 0) { return ( <> @@ -94,9 +95,17 @@ function Variables({children, ...props}) { ) } + return ( + <> + {children} + + + ) +} + +function VariablesDetails({variablesByFile, ...props}) { return Array.from(variablesByFile.entries()).map(([path, variables]) => ( - {children}

Defined in {path}

@@ -186,7 +195,7 @@ function DeprecationFlag({variable, ...rest}) { ) : null } -function DeprecationIcon(props) { +function DeprecationIcon() { return ( From 3fb4b5dd6bcfd9b9898d69691b14e3ef29465322 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 17 Dec 2019 11:00:44 +0900 Subject: [PATCH 33/35] Add selectors back Will be deprecated in 15.0.0 --- src/select-menu/select-menu.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 519174be..bf3b103d 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -1,7 +1,13 @@ // stylelint-disable selector-max-type - // selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles. -// TODO: Introduce an additional .intent-keyboard class + +// TODO@15.0.0: remove styles below +@media (hover: hover) { + .SelectMenu-tab:not([aria-checked="true"]):hover, + .SelectMenu-tab:not([aria-checked="true"]):active { + background-color: $bg-white; + } +} $SelectMenu-max-height: 480px !default; From 8146b66a42c0d10840ee03a24fdcfafaaedfb10a Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 17 Dec 2019 11:38:06 +0900 Subject: [PATCH 34/35] Update contributing.md This is the same as https://github.com/primer/css/pull/941/files including the suggestions. Co-Authored-By: francisfuzz Co-Authored-By: Shawn Allen --- docs/content/getting-started/contributing.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/content/getting-started/contributing.md b/docs/content/getting-started/contributing.md index ece93dc4..cdd720da 100644 --- a/docs/content/getting-started/contributing.md +++ b/docs/content/getting-started/contributing.md @@ -3,13 +3,15 @@ title: Contributing description: Guidelines for contributing to GitHub's CSS --- +While this contributing guide is for GitHub employees, all contributions from the community are welcome. + ## Decision process for adding new styles ### Components [Components](/css/components) are frequently used visual patterns we've abstracted into a set of convenient styles, that would be otherwise difficult to achieve with utilities and layout objects. -Making a decision on whether new components should be added is done on a case by case basis. It's not always easy to make that decision but here are some questions you should ask yourself before moving forward with a pull request. The design systems team will help you make this decision. +Decisions to add new components are made on a case-by-case basis, with help from the GitHub Design Systems team. Some questions that we use to guide these decisions include: - How often is this pattern used across the site? - Could these styles be achieved with existing components, objects, and utilities? @@ -39,7 +41,7 @@ Many of the same questions can be applied to objects and utilities, however the It's usually better to open an issue before investing time in spiking out a new pattern. This gives the design systems team a heads up and allows other designers to share thoughts. Here's an outline of what's helpful to include in a new style issue: -1. What the pattern is and how it's being used across the site - post screenshots and urls where possible. If you need help identifying where the pattern is being used, call that out here and cc the relevant team and/or cc `@product-design` to help. +1. What the pattern is, and how it's being used on GitHub.com. Post screenshots and/or URLs whenever possible. If you need help identifying where the pattern is used, call that out in the issue. 2. Why you think a new pattern is needed (this should answer the relevant questions above). 3. If you intend to work on these new styles yourself, let us know what your timeline and next steps are. If you need help and this is a dependency for shipping another project, please make that clear here and what the timeline is. 4. Add the appropriate label(s): @@ -66,7 +68,7 @@ New styles we add should be used in as many places as makes sense to in producti If you get to this step you've helped contribute to a style guide that many of your colleagues use on a daily basis, you've contributed to an open source project that's referenced and used by many others, and you've helped improve the usability and consistency of GitHub for our users. Thank you! -Let the [design systems team](https://github.com/github/design-systems) know if we can improve these guidelines and make following this process any easier. +[Please open an issue](#step-1-open-an-issue) if we can improve these guidelines and make following this process any easier. ## Removing styles and variables @@ -161,7 +163,7 @@ Check out Doctocat's [live code](https://primer.style/doctocat/usage/live-code) Primer CSS follows [semantic versioning](http://semver.org/) conventions. This helps others know when a change is a patch, minor, or breaking change. -To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so I recommend reviewing [semver](http://semver.org/) and/or ask in [#design-systems](https://github.slack.com/archives/design-systems) or and experienced open-source contributor. +To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so we recommend reviewing [semver](http://semver.org/) and/or asking the team by [opening an issue](#step-1-open-an-issue). [semantic versioning]: https://semver.org [script/test-deprecations.js]: https://github.com/primer/css/tree/master/script/test-deprecations.js From 3b34fb0280008dd0b5e1fe4fd71bfed4b9ee5df8 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 17 Dec 2019 20:11:52 +0900 Subject: [PATCH 35/35] Update CHANGELOG.md --- CHANGELOG.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1bd306c7..d10a4294 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,23 @@ +### :rocket: Enhancements +- [#994](https://github.com/primer/css/pull/994) Responsive line-height utilities +- [#995](https://github.com/primer/css/pull/995) Add bold weight to marketing font variables + +### :bug: Bug fixes +- [#998](https://github.com/primer/css/pull/998) Use a gray background when hovering SelectMenu items + +### :memo: Documentation +- [#989](https://github.com/primer/css/pull/989) Add link to the Stylelint guide +- [#1000](https://github.com/primer/css/pull/1000) Update contributing guide for a general audience +- [#972](https://github.com/primer/css/pull/972) Variables page + +### :house: Internal +- [#997](https://github.com/primer/css/pull/997) Fix CHANGELOG links + +### Committers +- [@shawnbot](https://github.com/shawnbot) +- [@simurai](https://github.com/simurai) +- [@skullface](https://github.com/skullface) + ## 14.0.0 ### :boom: Breaking changes