diff --git a/.changeset/blue-gorillas-lie.md b/.changeset/blue-gorillas-lie.md new file mode 100644 index 00000000000..b6268336b63 --- /dev/null +++ b/.changeset/blue-gorillas-lie.md @@ -0,0 +1,7 @@ +--- +'@primer/react': major +--- + +Update styled-components and related dependencies to v5.x + + diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png index 7c12413d756..461fa542c11 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png index 5620aa7a4b8..d3067608616 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png index 6dff5c66fb3..49ba51696fe 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png index 7c6df16e92a..f0bbabcefff 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png index 55f095a945c..5f00ec41a0e 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png index 08961a37669..1b67c954c02 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png index a2a8dce48f6..3a281c48399 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png index 89d5a9ee3b1..0c9b8bc787b 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png index 1a97382a2ec..0dd5a79c8af 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png index 5207b32b079..c573736482e 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png index 668a6cc90ba..af97f7bc9cd 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png index 32364b59bb3..e3184efba19 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png index 4427de4169b..a887b15dc89 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png index 5207b32b079..c573736482e 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png index 4adc2354afb..8845f33bfac 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png index eb3a4b80d7f..756d6896ea3 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png index 21e890a560a..226d259dbc6 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png index 4adc2354afb..8845f33bfac 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png index 12420c24b7f..aca9f5d3bfd 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png index b6b4c11b5e7..d6764c54ef8 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png index 9af5cce2051..93e291c3a09 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png index 1c45d34c3e2..2d1da2d2695 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png index 8652f5be69f..d01399f1a5e 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png index 7da2310b237..607b13d1d8c 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png index 54f1fcf895b..08378e2ccef 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png index 8589749cc9a..f65ff058f81 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png index 4d52424a967..a1658d954d1 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png index e32bca6a587..02e37f2e574 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png index 8700158a2e7..758b153be92 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png index 36cc6a8692a..7ecf00484fb 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png index 9b52a6555cf..8e05f772f07 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png index e32bca6a587..02e37f2e574 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png index c2725cbd0be..40b0a4fa278 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png index c5585014a8b..9fe38323bcd 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png index 21e00e98a3f..9023125f7c0 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png index c2725cbd0be..40b0a4fa278 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png differ diff --git a/package-lock.json b/package-lock.json index da048af263f..f0aba3ff72c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -89,7 +89,7 @@ "@types/node": "18.16.19", "@types/react": "18.0.28", "@types/react-dom": "18.2.6", - "@types/styled-components": "^5.1.11", + "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "5.59.6", "@typescript-eslint/parser": "5.59.6", "ajv": "8.12.0", @@ -100,7 +100,7 @@ "babel-plugin-dev-expression": "0.2.3", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", - "babel-plugin-styled-components": "2.1.1", + "babel-plugin-styled-components": "2.1.3", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "change-case": "4.1.2", @@ -132,7 +132,7 @@ "jest-environment-jsdom": "29.4.3", "jest-fail-on-console": "3.1.1", "jest-matchmedia-mock": "1.1.0", - "jest-styled-components": "6.3.4", + "jest-styled-components": "7.1.1", "jest-watch-typeahead": "2.2.2", "jscodeshift": "0.14.0", "lint-staged": "13.2.2", @@ -164,7 +164,7 @@ "size-limit": "8.2.4", "storybook": "7.1.0", "storybook-addon-turbo-build": "2.0.1", - "styled-components": "4.4.1", + "styled-components": "5.3.1", "terser": "5.17.6", "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", @@ -186,7 +186,7 @@ "@types/styled-components": "^5.1.11", "react": "^18.0.0", "react-dom": "^18.0.0", - "styled-components": "4.x || 5.x" + "styled-components": "5.x" }, "peerDependenciesMeta": { "@types/react": { @@ -3471,6 +3471,12 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "dev": true }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", + "dev": true + }, "node_modules/@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", @@ -13380,18 +13386,6 @@ "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", "dev": true }, - "node_modules/atob": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "dev": true, - "bin": { - "atob": "bin/atob.js" - }, - "engines": { - "node": ">= 4.5.0" - } - }, "node_modules/autoprefixer": { "version": "10.4.14", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", @@ -13970,16 +13964,16 @@ } }, "node_modules/babel-plugin-styled-components": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz", - "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz", + "integrity": "sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==", "dev": true, "dependencies": { - "@babel/helper-annotate-as-pure": "^7.16.0", - "@babel/helper-module-imports": "^7.16.0", + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-module-imports": "^7.21.4", "babel-plugin-syntax-jsx": "^6.18.0", "lodash": "^4.17.21", - "picomatch": "^2.3.0" + "picomatch": "^2.3.1" }, "peerDependencies": { "styled-components": ">= 2" @@ -14745,10 +14739,13 @@ } }, "node_modules/camelize": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", - "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", - "dev": true + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/can-bind-to-host": { "version": "1.1.2", @@ -15948,18 +15945,6 @@ "node": ">=8" } }, - "node_modules/css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", - "dev": true, - "dependencies": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" - } - }, "node_modules/css-blank-pseudo": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-6.0.0.tgz", @@ -15988,7 +15973,7 @@ "node_modules/css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", "dev": true, "engines": { "node": ">=4" @@ -16098,22 +16083,16 @@ } }, "node_modules/css-to-react-native": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", - "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", "dev": true, "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^3.3.0" + "postcss-value-parser": "^4.0.2" } }, - "node_modules/css-to-react-native/node_modules/postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", - "dev": true - }, "node_modules/css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -16458,15 +16437,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/decode-uri-component": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz", - "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==", - "dev": true, - "engines": { - "node": ">=0.10" - } - }, "node_modules/dedent": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", @@ -26810,15 +26780,18 @@ "dev": true }, "node_modules/jest-styled-components": { - "version": "6.3.4", - "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.4.tgz", - "integrity": "sha512-dc32l0/6n3FtsILODpvKNz6SLg50OmbJ/3r3oRh9jc2VIPPGZT5jWv7BKIcNCYH7E38ZK7uejNl3zJsCOIenng==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-7.1.1.tgz", + "integrity": "sha512-OUq31R5CivBF8oy81dnegNQrRW13TugMol/Dz6ZnFfEyo03exLASod7YGwyHGuayYlKmCstPtz0RQ1+NrAbIIA==", "dev": true, "dependencies": { - "css": "^2.2.4" + "@adobe/css-tools": "^4.0.1" + }, + "engines": { + "node": ">= 12" }, "peerDependencies": { - "styled-components": "^2 || ^3 || ^4" + "styled-components": ">= 5" } }, "node_modules/jest-util": { @@ -31401,12 +31374,6 @@ "node": ">= 4.0.0" } }, - "node_modules/memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==", - "dev": true - }, "node_modules/memoizerific": { "version": "1.11.3", "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", @@ -31441,15 +31408,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/merge-anything": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz", - "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==", - "dev": true, - "dependencies": { - "is-what": "^3.3.1" - } - }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -36179,13 +36137,6 @@ "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" } }, - "node_modules/resolve-url": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", - "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", - "deprecated": "https://github.com/lydell/resolve-url#deprecated", - "dev": true - }, "node_modules/resolve-url-loader": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz", @@ -36876,6 +36827,12 @@ "node": ">=8" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true + }, "node_modules/shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -37092,20 +37049,6 @@ "node": ">=0.10.0" } }, - "node_modules/source-map-resolve": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", - "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==", - "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated", - "dev": true, - "dependencies": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0", - "resolve-url": "^0.2.1", - "source-map-url": "^0.4.0", - "urix": "^0.1.0" - } - }, "node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -37116,13 +37059,6 @@ "source-map": "^0.6.0" } }, - "node_modules/source-map-url": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz", - "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==", - "deprecated": "See https://github.com/lydell/source-map-url#deprecated", - "dev": true - }, "node_modules/space-separated-tokens": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", @@ -37595,37 +37531,35 @@ } }, "node_modules/styled-components": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz", - "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.1.tgz", + "integrity": "sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==", "dev": true, - "hasInstallScript": true, "dependencies": { "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.0.0", - "@emotion/is-prop-valid": "^0.8.1", - "@emotion/unitless": "^0.7.0", - "babel-plugin-styled-components": ">= 1", - "css-to-react-native": "^2.2.2", - "memoize-one": "^5.0.0", - "merge-anything": "^2.2.4", - "prop-types": "^15.5.4", - "react-is": "^16.6.0", - "stylis": "^3.5.0", - "stylis-rule-sheet": "^0.0.10", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", "supports-color": "^5.5.0" }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, "peerDependencies": { - "react": ">= 16.3.0", - "react-dom": ">= 16.3.0" + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" } }, - "node_modules/styled-components/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true - }, "node_modules/styled-system": { "version": "5.1.5", "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz", @@ -37662,21 +37596,6 @@ "postcss": "^8.2.15" } }, - "node_modules/stylis": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", - "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==", - "dev": true - }, - "node_modules/stylis-rule-sheet": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "dev": true, - "peerDependencies": { - "stylis": "^3.5.0" - } - }, "node_modules/stylus": { "version": "0.59.0", "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz", @@ -39267,13 +39186,6 @@ "punycode": "^2.1.0" } }, - "node_modules/urix": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", - "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", - "deprecated": "Please see https://github.com/lydell/urix#deprecated", - "dev": true - }, "node_modules/url": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/url/-/url-0.11.1.tgz", diff --git a/package.json b/package.json index 54e4d5a5dc5..df04bdb3d97 100644 --- a/package.json +++ b/package.json @@ -174,7 +174,7 @@ "@types/node": "18.16.19", "@types/react": "18.0.28", "@types/react-dom": "18.2.6", - "@types/styled-components": "^5.1.11", + "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "5.59.6", "@typescript-eslint/parser": "5.59.6", "ajv": "8.12.0", @@ -185,7 +185,7 @@ "babel-plugin-dev-expression": "0.2.3", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", - "babel-plugin-styled-components": "2.1.1", + "babel-plugin-styled-components": "2.1.3", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "change-case": "4.1.2", @@ -217,7 +217,7 @@ "jest-environment-jsdom": "29.4.3", "jest-fail-on-console": "3.1.1", "jest-matchmedia-mock": "1.1.0", - "jest-styled-components": "6.3.4", + "jest-styled-components": "7.1.1", "jest-watch-typeahead": "2.2.2", "jscodeshift": "0.14.0", "lint-staged": "13.2.2", @@ -249,7 +249,7 @@ "size-limit": "8.2.4", "storybook": "7.1.0", "storybook-addon-turbo-build": "2.0.1", - "styled-components": "4.4.1", + "styled-components": "5.3.1", "terser": "5.17.6", "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", @@ -267,7 +267,7 @@ "@types/styled-components": "^5.1.11", "react": "^18.0.0", "react-dom": "^18.0.0", - "styled-components": "4.x || 5.x" + "styled-components": "5.x" }, "peerDependenciesMeta": { "@types/react": { diff --git a/src/Dialog/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap index f8088f6953b..f49b702d95a 100644 --- a/src/Dialog/__snapshots__/Dialog.test.tsx.snap +++ b/src/Dialog/__snapshots__/Dialog.test.tsx.snap @@ -1,16 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Dialog Dialog.Header renders consistently 1`] = ` -.c1 { +.c0 { + padding: 16px; + background-color: #f6f8fa; +} + +.c2 { font-size: 14px; font-weight: 600; font-family: sans-serif; color: #1F2328; } -.c0 { - padding: 16px; - background-color: #f6f8fa; +.c1 { border-radius: 6px 6px 0px 0px; border-bottom: 1px solid #d0d7de; display: -webkit-box; @@ -20,16 +23,16 @@ exports[`Dialog Dialog.Header renders consistently 1`] = ` } @media screen and (max-width:750px) { - .c0 { + .c1 { border-radius: 0px; } }
, - .c4 { + .c2 { + padding: 16px; + background-color: #f6f8fa; +} + +.c5 { padding: 16px; } @@ -151,8 +171,7 @@ exports[`Dialog renders consistently 1`] = ` } .c1:disabled [data-component=ButtonCounter], -.c1:disabled [data-component="leadingVisual"], -.c1:disabled [data-component="trailingAction"] { +.c1:disabled [data-component="leadingVisual"],.c1:disabled [data-component="trailingAction"] { color: inherit; } @@ -297,14 +316,14 @@ exports[`Dialog renders consistently 1`] = ` right: 16px; } -.c3 { +.c4 { font-size: 14px; font-weight: 600; font-family: sans-serif; color: #1F2328; } -.c5 { +.c6 { font-family: sans-serif; } @@ -325,9 +344,7 @@ exports[`Dialog renders consistently 1`] = ` outline: none; } -.c2 { - padding: 16px; - background-color: #f6f8fa; +.c3 { border-radius: 6px 6px 0px 0px; border-bottom: 1px solid #d0d7de; display: -webkit-box; @@ -352,7 +369,7 @@ exports[`Dialog renders consistently 1`] = ` } @media screen and (max-width:750px) { - .c2 { + .c3 { border-radius: 0px; } } @@ -397,11 +414,11 @@ exports[`Dialog renders consistently 1`] = `
Some content diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 947b5e11074..1038cb86950 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -88,12 +88,11 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c2 { +[data-component="ActionList.Divider"] + .c1 { --divider-color: transparent !important; } -.c2:hover:not([aria-disabled]), -.c2:focus:not([aria-disabled]), +.c2:hover:not([aria-disabled]),.c2:focus:not([aria-disabled]), .c2[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -169,12 +168,11 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c6 { +[data-component="ActionList.Divider"] + .c1 { --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]), -.c6:focus:not([aria-disabled]), +.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]), .c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -362,29 +360,6 @@ exports[`NavList renders a simple list 1`] = ` `; exports[`NavList renders with groups 1`] = ` -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 0; -} - -.c9 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - font-weight: 400; -} - .c1 { height: 1px; background-color: rgba(208,215,222,0.48); @@ -419,6 +394,29 @@ exports[`NavList renders with groups 1`] = ` padding-inline-start: 0; } +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; +} + +.c9 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-weight: 400; +} + .c0 { margin: 0; padding-inline-start: 0; @@ -483,12 +481,11 @@ exports[`NavList renders with groups 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c6 { +[data-component="ActionList.Divider"] + .c5 { --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]), -.c6:focus:not([aria-disabled]), +.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]), .c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -564,12 +561,11 @@ exports[`NavList renders with groups 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c10 { +[data-component="ActionList.Divider"] + .c5 { --divider-color: transparent !important; } -.c10:hover:not([aria-disabled]), -.c10:focus:not([aria-disabled]), +.c10:hover:not([aria-disabled]),.c10:focus:not([aria-disabled]), .c10[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -785,7 +781,11 @@ exports[`NavList renders with groups 1`] = ` `; exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav contains the current item and is open 1`] = ` -.c4 { +.c2 { + list-style: none; +} + +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -801,18 +801,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav } .c6 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - font-weight: 400; -} - -.c1 { - list-style: none; -} - -.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -823,13 +811,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav flex-grow: 1; } -.c9 { - padding: 0; - margin: 0; - display: block; +.c7 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-weight: 400; } -.c7 { +.c8 { height: 20px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -839,11 +829,16 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: initial; } -[data-variant="danger"]:hover .c7, -[data-variant="danger"]:active .c7 { +[data-variant="danger"]:hover .c1,[data-variant="danger"]:active .c8 { color: #1F2328; } +.c10 { + padding: 0; + margin: 0; + display: block; +} + .c0 { margin: 0; padding-inline-start: 0; @@ -851,7 +846,16 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav padding-bottom: 8px; } -.c10 { +[data-component="ActionList.Divider"] + .c3 { + --divider-color: transparent !important; +} + +.c13:hover:not([aria-disabled]) + .c3, +.c13[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c11 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -885,15 +889,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav background-color: rgba(208,215,222,0.24); } -.c10[aria-disabled] { +.c11[aria-disabled] { cursor: not-allowed; } -.c10 [data-component="ActionList.Item--DividerContainer"] { +.c11 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c10 [data-component="ActionList.Item--DividerContainer"]::before { +.c11 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -904,26 +908,25 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--divider-color,transparent); } -.c10:not(:first-of-type) { +.c11:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c10 { +[data-component="ActionList.Divider"] + .c3 { --divider-color: transparent !important; } -.c10:hover:not([aria-disabled]), -.c10:focus:not([aria-disabled]), -.c10[data-focus-visible-added]:not([aria-disabled]) { +.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]), +.c11[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } -.c10:hover:not([aria-disabled]) + .c2, -.c10[data-focus-visible-added] + li { +.c11:hover:not([aria-disabled]) + .c3, +.c11[data-focus-visible-added] + li { --divider-color: transparent; } -.c10::after { +.c11::after { position: absolute; top: calc(50% - 12px); left: -8px; @@ -934,42 +937,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-radius: 6px; } -.c12:hover:not([aria-disabled]) + .c2, -.c12[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c13:hover:not([aria-disabled]) + .c2, -.c13[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c14:hover:not([aria-disabled]) + .c2, -.c14[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c15:hover:not([aria-disabled]) + .c2, -.c15[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c16:hover:not([aria-disabled]) + .c2, -.c16[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c17:hover:not([aria-disabled]) + .c2, -.c17[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c18:hover:not([aria-disabled]) + .c2, -.c18[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c3 { +.c4 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -1001,15 +969,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 600; } -.c3[aria-disabled] { +.c4[aria-disabled] { cursor: not-allowed; } -.c3 [data-component="ActionList.Item--DividerContainer"] { +.c4 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c3 [data-component="ActionList.Item--DividerContainer"]::before { +.c4 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -1020,7 +988,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--divider-color,transparent); } -.c3:not(:first-of-type) { +.c4:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } @@ -1028,23 +996,17 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav --divider-color: transparent !important; } -.c3:hover:not([aria-disabled]), -.c3:focus:not([aria-disabled]), -.c3[data-focus-visible-added]:not([aria-disabled]) { - --divider-color: transparent; -} - -.c3:hover:not([aria-disabled]) + .c2, -.c3[data-focus-visible-added] + li { +.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]), +.c4[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } -.c19:hover:not([aria-disabled]) + .c2, -.c19[data-focus-visible-added] + li { +.c4:hover:not([aria-disabled]) + .c3, +.c4[data-focus-visible-added] + li { --divider-color: transparent; } -.c11 { +.c12 { color: #0969da; -webkit-text-decoration: none; text-decoration: none; @@ -1066,12 +1028,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 400; } -.c11:hover { +.c12:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c11:is(button) { +.c12:is(button) { display: inline-block; padding: 0; font-size: inherit; @@ -1088,64 +1050,72 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav appearance: none; } -.c11:hover { +.c12:hover { color: inherit; -webkit-text-decoration: none; text-decoration: none; } -.c8 { +.c9 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media (hover:hover) and (pointer:fine) { - .c10:hover:not([aria-disabled]) { + +} + +@media (forced-colors:active) { + +} + +@media (hover:hover) and (pointer:fine) { + .c11:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; } - .c10:focus-visible, - .c10 > a:focus-visible { + .c11:focus-visible, + .c11 > a:focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c10:active:not([aria-disabled]) { + .c11:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #1F2328; } } @media (forced-colors:active) { - .c10:focus { + .c11:focus { outline: solid 1px transparent !important; } } @media (hover:hover) and (pointer:fine) { - .c3:hover:not([aria-disabled]) { + .c4:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; } - .c3:focus-visible, - .c3 > a:focus-visible { + .c4:focus-visible, + .c4 > a:focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c3:active:not([aria-disabled]) { + .c4:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #1F2328; } } @media (forced-colors:active) { - .c3:focus { + .c4:focus { outline: solid 1px transparent !important; } } @@ -1159,34 +1129,34 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav >