From 5f809038a9bbe2ab1d0219b8622b1e562dccafd3 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 29 Aug 2022 10:25:19 -0700 Subject: [PATCH 1/7] Remove focus-visible dependency --- package-lock.json | 9 --------- package.json | 1 - 2 files changed, 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 827e25271..e80bb04ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "12.3.1", "license": "MIT", "dependencies": { - "focus-visible": "5.2.0", "prismjs": "1.28.0" }, "devDependencies": { @@ -22061,10 +22060,6 @@ "node": ">=10" } }, - "node_modules/focus-visible": { - "version": "5.2.0", - "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==" - }, "node_modules/for-in": { "version": "1.0.2", "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", @@ -57730,10 +57725,6 @@ "tslib": "^1.9.3" } }, - "focus-visible": { - "version": "5.2.0", - "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==" - }, "for-in": { "version": "1.0.2", "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", diff --git a/package.json b/package.json index 5fa08d5ca..2bdbef77a 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "!src/index.scss" ], "dependencies": { - "focus-visible": "5.2.0", "prismjs": "1.28.0" }, "devDependencies": { From 74a4698678b3b52d352e8da4ed3cc9406f4d5cd3 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 29 Aug 2022 10:25:39 -0700 Subject: [PATCH 2/7] Remove JS focus-visible CSS class --- src/mixins/_focus.scss | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/mixins/_focus.scss b/src/mixins/_focus.scss index ab36bb6f6..cdf97c853 100644 --- a/src/mixins/_focus.scss +++ b/src/mixins/_focus.scss @@ -1,15 +1,13 @@ @mixin focus-visible { - .js-focus-visible & { - &::-moz-focus-inner { - border: 0; - } + &::-moz-focus-inner { + border: 0; + } - &:focus { - outline: 0; + &:focus { + outline: 0; + } - &.focus-visible { - @content; - } - } + &:focus-visible { + @content; } } From 3c027830d584b5442f54409b47a3e2b2e48ad3a3 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 29 Aug 2022 10:29:37 -0700 Subject: [PATCH 3/7] Add changeset --- .changeset/tasty-points-speak.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tasty-points-speak.md diff --git a/.changeset/tasty-points-speak.md b/.changeset/tasty-points-speak.md new file mode 100644 index 000000000..3bfd65830 --- /dev/null +++ b/.changeset/tasty-points-speak.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': patch +--- + +Remove focus-visible JS dependency From 038d2f192f6bcef1d1ba7f34b8aed7b7d3ae0106 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 29 Aug 2022 10:31:11 -0700 Subject: [PATCH 4/7] Edit changeset message --- .changeset/tasty-points-speak.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tasty-points-speak.md b/.changeset/tasty-points-speak.md index 3bfd65830..7741629ad 100644 --- a/.changeset/tasty-points-speak.md +++ b/.changeset/tasty-points-speak.md @@ -2,4 +2,4 @@ '@cloudfour/patterns': patch --- -Remove focus-visible JS dependency +Remove focus-visible polyfill From 0533776cbc13e2ea07b4e7656df34259c6e4c447 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 29 Aug 2022 10:46:43 -0700 Subject: [PATCH 5/7] Remove focus-visible import --- .storybook/preview.js | 1 - 1 file changed, 1 deletion(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 5e67268e7..6d7711ea7 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -5,7 +5,6 @@ import twig from 'react-syntax-highlighter/dist/esm/languages/prism/twig'; import { withTheme } from './theme-decorator'; import { withTextFlow } from './text-flow-decorator'; import tokens from '../src/compiled/tokens/js/tokens'; -import 'focus-visible'; import '../src/index-with-dependencies.scss'; import './preview.scss'; import { makeTwigInclude } from '../src/make-twig-include'; From 20dffbf204fd9e3b2d1a2169d8473e44d3989d0e Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 29 Aug 2022 10:46:57 -0700 Subject: [PATCH 6/7] Update link --- src/design/defaults.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design/defaults.stories.mdx b/src/design/defaults.stories.mdx index fc4f309df..e526077dd 100644 --- a/src/design/defaults.stories.mdx +++ b/src/design/defaults.stories.mdx @@ -25,7 +25,7 @@ More options are available via [the Heading component](/docs/components-heading- {`

- Progressive Web Apps are awesome, especially when they make the best most of the web! That means using both tried and true HTML techniques like links alongside new techniques like display: grid or focus-visible! You can use ctrl + c on Windows and ⌘ + c on Mac. + Progressive Web Apps are awesome, especially when they make the best most of the web! That means using both tried and true HTML techniques like links alongside new techniques like display: grid or :focus-visible! You can use ctrl + c on Windows and ⌘ + c on Mac.

`} From 2c0ac511e88b8b92b7fc263646bd991b6ceb71ac Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 29 Aug 2022 10:47:43 -0700 Subject: [PATCH 7/7] Update link --- src/design/demo/theme-content.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design/demo/theme-content.twig b/src/design/demo/theme-content.twig index f92fd77d3..690087521 100644 --- a/src/design/demo/theme-content.twig +++ b/src/design/demo/theme-content.twig @@ -1,7 +1,7 @@ {% embed '@cloudfour/objects/rhythm/rhythm.twig' %} {% block content %}

- Progressive Web Apps are awesome, especially when they make the best most of the web! That means using both tried and true HTML techniques like links alongside new techniques like display: grid or focus-visible! + Progressive Web Apps are awesome, especially when they make the best most of the web! That means using both tried and true HTML techniques like links alongside new techniques like display: grid or :focus-visible!