diff --git a/.changeset/mean-parrots-burn.md b/.changeset/mean-parrots-burn.md new file mode 100644 index 00000000000..85a13e1f1e6 --- /dev/null +++ b/.changeset/mean-parrots-burn.md @@ -0,0 +1,13 @@ +--- +"@primer/react": major +--- + + +- Add a block prop for full width +- Add alignContent prop to align content to center or start +- Use control sizing CSS variables +- Use height over padding for more control over sizing +- Refactor Button.Counter to better align with the other visual props +- Rename visual props to better align with other Primer components +- Deprecate outline variant + diff --git a/package-lock.json b/package-lock.json index 7bd5ab4dffc..88533398978 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@primer/octicons-react": "^17.7.0", "@primer/primitives": "7.10.0", "@react-aria/ssr": "^3.1.0", + "@storybook/addon-storysource": "6.5.12", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", @@ -8021,6 +8022,179 @@ } } }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/addons": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.12.tgz", + "integrity": "sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw==", + "dev": true, + "dependencies": { + "@storybook/api": "6.5.12", + "@storybook/channels": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/core-events": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.12", + "@storybook/theming": "6.5.12", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/api": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.12.tgz", + "integrity": "sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ==", + "dev": true, + "dependencies": { + "@storybook/channels": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/core-events": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.12", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^6.0.8", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/channels": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.12.tgz", + "integrity": "sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/client-logger": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.12.tgz", + "integrity": "sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2", + "global": "^4.4.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/components": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.12.tgz", + "integrity": "sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/core-events": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.12.tgz", + "integrity": "sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/router": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.12.tgz", + "integrity": "sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/source-loader": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.12.tgz", + "integrity": "sha512-4iuILFsKNV70sEyjzIkOqgzgQx7CJ8kTEFz590vkmWXQNKz7YQzjgISIwL7GBw/myJgeb04bl5psVgY0cbG5vg==", + "dev": true, + "dependencies": { + "@storybook/addons": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "core-js": "^3.8.2", + "estraverse": "^5.2.0", + "global": "^4.4.0", + "loader-utils": "^2.0.0", + "lodash": "^4.17.21", + "prettier": ">=2.2.1 <=2.3.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@storybook/addon-storysource/node_modules/@storybook/theming": { "version": "6.5.12", "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.12.tgz", @@ -8064,6 +8238,18 @@ "node": ">=8.9.0" } }, + "node_modules/@storybook/addon-storysource/node_modules/prettier": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz", + "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@storybook/addon-toolbars": { "version": "6.5.12", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.12.tgz", @@ -21750,38 +21936,6 @@ "esbuild-windows-arm64": "0.14.39" } }, - "node_modules/esbuild-android-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.39.tgz", - "integrity": "sha512-EJOu04p9WgZk0UoKTqLId9VnIsotmI/Z98EXrKURGb3LPNunkeffqQIkjS2cAvidh+OK5uVrXaIP229zK6GvhQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-android-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.39.tgz", - "integrity": "sha512-+twajJqO7n3MrCz9e+2lVOnFplRsaGRwsq1KL/uOy7xK7QdRSprRQcObGDeDZUZsacD5gUkk6OiHiYp6RzU3CA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/esbuild-darwin-64": { "version": "0.14.39", "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.39.tgz", @@ -21798,182 +21952,6 @@ "node": ">=12" } }, - "node_modules/esbuild-darwin-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.39.tgz", - "integrity": "sha512-/fcQ5UhE05OiT+bW5v7/up1bDsnvaRZPJxXwzXsMRrr7rZqPa85vayrD723oWMT64dhrgWeA3FIneF8yER0XTw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-freebsd-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.39.tgz", - "integrity": "sha512-oMNH8lJI4wtgN5oxuFP7BQ22vgB/e3Tl5Woehcd6i2r6F3TszpCnNl8wo2d/KvyQ4zvLvCWAlRciumhQg88+kQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-freebsd-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.39.tgz", - "integrity": "sha512-1GHK7kwk57ukY2yI4ILWKJXaxfr+8HcM/r/JKCGCPziIVlL+Wi7RbJ2OzMcTKZ1HpvEqCTBT/J6cO4ZEwW4Ypg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-32": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.39.tgz", - "integrity": "sha512-g97Sbb6g4zfRLIxHgW2pc393DjnkTRMeq3N1rmjDUABxpx8SjocK4jLen+/mq55G46eE2TA0MkJ4R3SpKMu7dg==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.39.tgz", - "integrity": "sha512-4tcgFDYWdI+UbNMGlua9u1Zhu0N5R6u9tl5WOM8aVnNX143JZoBZLpCuUr5lCKhnD0SCO+5gUyMfupGrHtfggQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-arm": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.39.tgz", - "integrity": "sha512-t0Hn1kWVx5UpCzAJkKRfHeYOLyFnXwYynIkK54/h3tbMweGI7dj400D1k0Vvtj2u1P+JTRT9tx3AjtLEMmfVBQ==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.39.tgz", - "integrity": "sha512-23pc8MlD2D6Px1mV8GMglZlKgwgNKAO8gsgsLLcXWSs9lQsCYkIlMo/2Ycfo5JrDIbLdwgP8D2vpfH2KcBqrDQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-mips64le": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.39.tgz", - "integrity": "sha512-epwlYgVdbmkuRr5n4es3B+yDI0I2e/nxhKejT9H0OLxFAlMkeQZxSpxATpDc9m8NqRci6Kwyb/SfmD1koG2Zuw==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-ppc64le": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.39.tgz", - "integrity": "sha512-W/5ezaq+rQiQBThIjLMNjsuhPHg+ApVAdTz2LvcuesZFMsJoQAW2hutoyg47XxpWi7aEjJGrkS26qCJKhRn3QQ==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-riscv64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.39.tgz", - "integrity": "sha512-IS48xeokcCTKeQIOke2O0t9t14HPvwnZcy+5baG13Z1wxs9ZrC5ig5ypEQQh4QMKxURD5TpCLHw2W42CLuVZaA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-s390x": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.39.tgz", - "integrity": "sha512-zEfunpqR8sMomqXhNTFEKDs+ik7HC01m3M60MsEjZOqaywHu5e5682fMsqOlZbesEAAaO9aAtRBsU7CHnSZWyA==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/esbuild-loader": { "version": "2.19.0", "resolved": "https://registry.npmjs.org/esbuild-loader/-/esbuild-loader-2.19.0.tgz", @@ -22039,102 +22017,6 @@ "node": ">=10.13.0" } }, - "node_modules/esbuild-netbsd-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.39.tgz", - "integrity": "sha512-Uo2suJBSIlrZCe4E0k75VDIFJWfZy+bOV6ih3T4MVMRJh1lHJ2UyGoaX4bOxomYN3t+IakHPyEoln1+qJ1qYaA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-openbsd-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.39.tgz", - "integrity": "sha512-secQU+EpgUPpYjJe3OecoeGKVvRMLeKUxSMGHnK+aK5uQM3n1FPXNJzyz1LHFOo0WOyw+uoCxBYdM4O10oaCAA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-sunos-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.39.tgz", - "integrity": "sha512-qHq0t5gePEDm2nqZLb+35p/qkaXVS7oIe32R0ECh2HOdiXXkj/1uQI9IRogGqKkK+QjDG+DhwiUw7QoHur/Rwg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-windows-32": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.39.tgz", - "integrity": "sha512-XPjwp2OgtEX0JnOlTgT6E5txbRp6Uw54Isorm3CwOtloJazeIWXuiwK0ONJBVb/CGbiCpS7iP2UahGgd2p1x+Q==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-windows-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.39.tgz", - "integrity": "sha512-E2wm+5FwCcLpKsBHRw28bSYQw0Ikxb7zIMxw3OPAkiaQhLVr3dnVO8DofmbWhhf6b97bWzg37iSZ45ZDpLw7Ow==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-windows-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.39.tgz", - "integrity": "sha512-sBZQz5D+Gd0EQ09tZRnz/PpVdLwvp/ufMtJ1iDFYddDaPpZXKqPyaxfYBLs3ueiaksQ26GGa7sci0OqFzNs7KA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -48549,6 +48431,127 @@ "regenerator-runtime": "^0.13.7" }, "dependencies": { + "@storybook/addons": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.12.tgz", + "integrity": "sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw==", + "dev": true, + "requires": { + "@storybook/api": "6.5.12", + "@storybook/channels": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/core-events": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.12", + "@storybook/theming": "6.5.12", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/api": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.12.tgz", + "integrity": "sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ==", + "dev": true, + "requires": { + "@storybook/channels": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/core-events": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.12", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^6.0.8", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/channels": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.12.tgz", + "integrity": "sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-logger": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.12.tgz", + "integrity": "sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "global": "^4.4.0" + } + }, + "@storybook/components": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.12.tgz", + "integrity": "sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig==", + "dev": true, + "requires": { + "@storybook/client-logger": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/core-events": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.12.tgz", + "integrity": "sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg==", + "dev": true, + "requires": { + "core-js": "^3.8.2" + } + }, + "@storybook/router": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.12.tgz", + "integrity": "sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w==", + "dev": true, + "requires": { + "@storybook/client-logger": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/source-loader": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.12.tgz", + "integrity": "sha512-4iuILFsKNV70sEyjzIkOqgzgQx7CJ8kTEFz590vkmWXQNKz7YQzjgISIwL7GBw/myJgeb04bl5psVgY0cbG5vg==", + "dev": true, + "requires": { + "@storybook/addons": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "core-js": "^3.8.2", + "estraverse": "^5.2.0", + "global": "^4.4.0", + "loader-utils": "^2.0.0", + "lodash": "^4.17.21", + "prettier": ">=2.2.1 <=2.3.0", + "regenerator-runtime": "^0.13.7" + } + }, "@storybook/theming": { "version": "6.5.12", "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.12.tgz", @@ -48577,6 +48580,12 @@ "emojis-list": "^3.0.0", "json5": "^2.1.2" } + }, + "prettier": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz", + "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==", + "dev": true } } }, @@ -59152,20 +59161,6 @@ "esbuild-windows-arm64": "0.14.39" } }, - "esbuild-android-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.39.tgz", - "integrity": "sha512-EJOu04p9WgZk0UoKTqLId9VnIsotmI/Z98EXrKURGb3LPNunkeffqQIkjS2cAvidh+OK5uVrXaIP229zK6GvhQ==", - "dev": true, - "optional": true - }, - "esbuild-android-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.39.tgz", - "integrity": "sha512-+twajJqO7n3MrCz9e+2lVOnFplRsaGRwsq1KL/uOy7xK7QdRSprRQcObGDeDZUZsacD5gUkk6OiHiYp6RzU3CA==", - "dev": true, - "optional": true - }, "esbuild-darwin-64": { "version": "0.14.39", "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.39.tgz", @@ -59173,83 +59168,6 @@ "dev": true, "optional": true }, - "esbuild-darwin-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.39.tgz", - "integrity": "sha512-/fcQ5UhE05OiT+bW5v7/up1bDsnvaRZPJxXwzXsMRrr7rZqPa85vayrD723oWMT64dhrgWeA3FIneF8yER0XTw==", - "dev": true, - "optional": true - }, - "esbuild-freebsd-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.39.tgz", - "integrity": "sha512-oMNH8lJI4wtgN5oxuFP7BQ22vgB/e3Tl5Woehcd6i2r6F3TszpCnNl8wo2d/KvyQ4zvLvCWAlRciumhQg88+kQ==", - "dev": true, - "optional": true - }, - "esbuild-freebsd-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.39.tgz", - "integrity": "sha512-1GHK7kwk57ukY2yI4ILWKJXaxfr+8HcM/r/JKCGCPziIVlL+Wi7RbJ2OzMcTKZ1HpvEqCTBT/J6cO4ZEwW4Ypg==", - "dev": true, - "optional": true - }, - "esbuild-linux-32": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.39.tgz", - "integrity": "sha512-g97Sbb6g4zfRLIxHgW2pc393DjnkTRMeq3N1rmjDUABxpx8SjocK4jLen+/mq55G46eE2TA0MkJ4R3SpKMu7dg==", - "dev": true, - "optional": true - }, - "esbuild-linux-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.39.tgz", - "integrity": "sha512-4tcgFDYWdI+UbNMGlua9u1Zhu0N5R6u9tl5WOM8aVnNX143JZoBZLpCuUr5lCKhnD0SCO+5gUyMfupGrHtfggQ==", - "dev": true, - "optional": true - }, - "esbuild-linux-arm": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.39.tgz", - "integrity": "sha512-t0Hn1kWVx5UpCzAJkKRfHeYOLyFnXwYynIkK54/h3tbMweGI7dj400D1k0Vvtj2u1P+JTRT9tx3AjtLEMmfVBQ==", - "dev": true, - "optional": true - }, - "esbuild-linux-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.39.tgz", - "integrity": "sha512-23pc8MlD2D6Px1mV8GMglZlKgwgNKAO8gsgsLLcXWSs9lQsCYkIlMo/2Ycfo5JrDIbLdwgP8D2vpfH2KcBqrDQ==", - "dev": true, - "optional": true - }, - "esbuild-linux-mips64le": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.39.tgz", - "integrity": "sha512-epwlYgVdbmkuRr5n4es3B+yDI0I2e/nxhKejT9H0OLxFAlMkeQZxSpxATpDc9m8NqRci6Kwyb/SfmD1koG2Zuw==", - "dev": true, - "optional": true - }, - "esbuild-linux-ppc64le": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.39.tgz", - "integrity": "sha512-W/5ezaq+rQiQBThIjLMNjsuhPHg+ApVAdTz2LvcuesZFMsJoQAW2hutoyg47XxpWi7aEjJGrkS26qCJKhRn3QQ==", - "dev": true, - "optional": true - }, - "esbuild-linux-riscv64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.39.tgz", - "integrity": "sha512-IS48xeokcCTKeQIOke2O0t9t14HPvwnZcy+5baG13Z1wxs9ZrC5ig5ypEQQh4QMKxURD5TpCLHw2W42CLuVZaA==", - "dev": true, - "optional": true - }, - "esbuild-linux-s390x": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.39.tgz", - "integrity": "sha512-zEfunpqR8sMomqXhNTFEKDs+ik7HC01m3M60MsEjZOqaywHu5e5682fMsqOlZbesEAAaO9aAtRBsU7CHnSZWyA==", - "dev": true, - "optional": true - }, "esbuild-loader": { "version": "2.19.0", "resolved": "https://registry.npmjs.org/esbuild-loader/-/esbuild-loader-2.19.0.tgz", @@ -59299,48 +59217,6 @@ } } }, - "esbuild-netbsd-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.39.tgz", - "integrity": "sha512-Uo2suJBSIlrZCe4E0k75VDIFJWfZy+bOV6ih3T4MVMRJh1lHJ2UyGoaX4bOxomYN3t+IakHPyEoln1+qJ1qYaA==", - "dev": true, - "optional": true - }, - "esbuild-openbsd-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.39.tgz", - "integrity": "sha512-secQU+EpgUPpYjJe3OecoeGKVvRMLeKUxSMGHnK+aK5uQM3n1FPXNJzyz1LHFOo0WOyw+uoCxBYdM4O10oaCAA==", - "dev": true, - "optional": true - }, - "esbuild-sunos-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.39.tgz", - "integrity": "sha512-qHq0t5gePEDm2nqZLb+35p/qkaXVS7oIe32R0ECh2HOdiXXkj/1uQI9IRogGqKkK+QjDG+DhwiUw7QoHur/Rwg==", - "dev": true, - "optional": true - }, - "esbuild-windows-32": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.39.tgz", - "integrity": "sha512-XPjwp2OgtEX0JnOlTgT6E5txbRp6Uw54Isorm3CwOtloJazeIWXuiwK0ONJBVb/CGbiCpS7iP2UahGgd2p1x+Q==", - "dev": true, - "optional": true - }, - "esbuild-windows-64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.39.tgz", - "integrity": "sha512-E2wm+5FwCcLpKsBHRw28bSYQw0Ikxb7zIMxw3OPAkiaQhLVr3dnVO8DofmbWhhf6b97bWzg37iSZ45ZDpLw7Ow==", - "dev": true, - "optional": true - }, - "esbuild-windows-arm64": { - "version": "0.14.39", - "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.39.tgz", - "integrity": "sha512-sBZQz5D+Gd0EQ09tZRnz/PpVdLwvp/ufMtJ1iDFYddDaPpZXKqPyaxfYBLs3ueiaksQ26GGa7sci0OqFzNs7KA==", - "dev": true, - "optional": true - }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", diff --git a/package.json b/package.json index bb2dbeb3253..b4830cbbb07 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0", "lint:fix": "npm run lint -- --fix", "test": "jest", + "test:watch": "jest --watch", "test:storybook": "test-storybook", "test:update": "npm run test -- --updateSnapshot", "test:watch": "npm run test -- --watch", @@ -88,6 +89,7 @@ "@primer/octicons-react": "^17.7.0", "@primer/primitives": "7.10.0", "@react-aria/ssr": "^3.1.0", + "@storybook/addon-storysource": "6.5.12", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 50e4d5ff5e8..2f9b8dc0438 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -1,245 +1,60 @@ -import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, TriangleRightIcon} from '@primer/octicons-react' -import {Meta} from '@storybook/react' -import React, {useState, forwardRef} from 'react' -import {Button, ButtonProps, IconButton} from '.' -import Box from '../Box' +import React from 'react' +import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import {Button} from '.' +import {OcticonArgType} from '../utils/story-helpers' export default { title: 'Components/Button', argTypes: { size: { control: { - type: 'radio', + type: 'radio' }, - options: ['small', 'medium', 'large'], + options: ['small', 'medium', 'large'] }, disabled: { control: { - type: 'boolean', - default: false, - }, + type: 'boolean' + } }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible'] + } + }, + alignContent: { + control: { + type: 'radio', + options: ['center', 'start'] + } + }, + block: { + control: { + type: 'boolean' + } + }, + leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingAction: OcticonArgType([TriangleDownIcon]), + trailingVisualCount: { + control: { + type: 'number' + } + } }, -} as Meta - -export const defaultButton = (args: ButtonProps) => { - return -} - -export const primaryButton = (args: ButtonProps) => { - return ( - - ) -} - -export const dangerButton = (args: ButtonProps) => { - return ( - - ) -} - -export const invisibleButton = (args: ButtonProps) => { - return ( - - ) -} - -export const outlineButton = (args: ButtonProps) => { - return ( - - ) -} - -export const iconBeforeButton = (args: ButtonProps) => { - return ( - - ) -} - -export const iconButton = ({...args}: ButtonProps) => { - return ( - <> - - - - - - - - - - - - - - - - - ) -} - -export const WatchCounterButton = ({...args}: ButtonProps) => { - const [count, setCount] = useState(0) - return ( - <> - - - - - - - - - - - - - - - - - ) -} - -export const WatchIconButton = ({...args}: ButtonProps) => { - const [watching, setWatching] = useState(false) - const icon = watching ? EyeClosedIcon : () => - return ( - - ) -} - -export const caretButton = ({...args}: ButtonProps) => { - return ( - - ) -} - -export const blockButton = ({...args}: ButtonProps) => { - return ( - - ) -} - -export const DisabledButton = ({...args}: ButtonProps) => { - const [count, setCount] = useState(0) - return ( - <> - - - - - - - - - - - - - - - - - - - - } aria-label="Close" {...args} /> - - - ) -} - -type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} -const ReactRouterLikeLink = forwardRef( - ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { - // eslint-disable-next-line jsx-a11y/anchor-has-content - return - }, -) - -export const linkButton = ({...args}: ButtonProps) => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - ) -} + args: { + block: false, + size: 'medium', + disabled: false, + variant: 'default', + alignContent: 'center', + trailingVisual: null, + leadingVisual: null, + trailingAction: null, + trailingVisualCount: undefined + } +} as Meta + +export const Playground: Story = args => diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 01840e098d6..8b14be210b4 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -4,44 +4,64 @@ import Box from '../Box' import {merge, SxProp} from '../sx' import {useTheme} from '../ThemeProvider' import {ButtonProps, StyledButton} from './types' -import {getVariantStyles, getSizeStyles, getButtonStyles} from './styles' - -const defaultSxProp = {} -const iconWrapStyles = { - display: 'inline-block', -} -const trailingIconStyles = { - ...iconWrapStyles, - ml: 2, -} +import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles' +import CounterLabel from '../CounterLabel' const ButtonBase = forwardRef( - ({children, as: Component = 'button', sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => { - const {leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium', ...rest} = props + ({children, as: Component = 'button', sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => { + const { + leadingVisual: LeadingVisual, + trailingVisual: TrailingVisual, + trailingAction: TrailingAction, + trailingVisualCount: trailingVisualCount, + variant = 'default', + size = 'medium', + alignContent = 'center', + block = false + } = props const {theme} = useTheme() - const baseStyles = useMemo(() => { - return merge.all([getButtonStyles(theme), getSizeStyles(size, variant, false), getVariantStyles(variant, theme)]) - }, [theme, size, variant]) + const iconWrapStyles = { + display: 'flex', + pointerEvents: 'none' + } const sxStyles = useMemo(() => { - return merge(baseStyles, sxProp as SxProp) - }, [baseStyles, sxProp]) + return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)]) + }, [theme, variant]) return ( - - {LeadingIcon && ( - - - - )} - {children && {children}} - {TrailingIcon && ( - - + + + {LeadingVisual && ( + + + + )} + {children && {children}} + {trailingVisualCount !== undefined ? ( + + {trailingVisualCount} + + ) : TrailingVisual ? ( + + + + ) : null} + + {TrailingAction && ( + + )} ) - }, + } ) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps> export type ButtonBaseProps = ComponentPropsWithRef diff --git a/src/Button/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx deleted file mode 100644 index bc386530d08..00000000000 --- a/src/Button/ButtonCounter.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import {SxProp} from '../sx' -import CounterLabel from '../CounterLabel' - -export type CounterProps = { - children: number -} & SxProp - -const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => { - return ( - - {children} - - ) -} - -export {Counter} diff --git a/src/Button/ButtonFeatures.stories.tsx b/src/Button/ButtonFeatures.stories.tsx new file mode 100644 index 00000000000..d501248d1db --- /dev/null +++ b/src/Button/ButtonFeatures.stories.tsx @@ -0,0 +1,40 @@ +import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react' +import React, {useState} from 'react' +import {Button} from '.' + +export default { + title: 'Components/Button/Features' +} + +export const Default = () => + +export const Primary = () => + +export const Danger = () => + +export const Invisible = () => + +export const LeadingVisual = () => + +export const TrailingVisual = () => + +export const TrailingCounter = () => { + const [count, setCount] = useState(0) + return ( + + ) +} + +export const TrailingAction = () => + +export const Block = () => + +export const Disabled = () => + +export const Small = () => + +export const Medium = () => + +export const Large = () => diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx new file mode 100644 index 00000000000..0f8f60624ce --- /dev/null +++ b/src/Button/IconButton.stories.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import {IconButton} from '.' +import {OcticonArgType} from '../utils/story-helpers' + +export default { + title: 'Components/IconButton', + argTypes: { + size: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + control: { + type: 'boolean' + } + }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible'] + } + }, + icon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]) + }, + args: { + size: 'medium', + disabled: false, + variant: 'default', + 'aria-label': 'Icon button description', + icon: XIcon + } +} as Meta + +export const Playground: Story = args => diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx index 57fa37ec2b7..9b8c79f4478 100644 --- a/src/Button/IconButton.tsx +++ b/src/Button/IconButton.tsx @@ -1,24 +1,22 @@ import React, {forwardRef} from 'react' import {merge, SxProp} from '../sx' import {useTheme} from '../ThemeProvider' -import Box from '../Box' import {IconButtonProps, StyledButton} from './types' -import {getBaseStyles, getSizeStyles, getVariantStyles} from './styles' +import {getBaseStyles, getVariantStyles} from './styles' const IconButton = forwardRef((props, forwardedRef): JSX.Element => { const {variant = 'default', size = 'medium', sx: sxProp = {}, icon: Icon, ...rest} = props const {theme} = useTheme() - const sxStyles = merge.all([ - getBaseStyles(theme), - getSizeStyles(size, variant, true), - getVariantStyles(variant, theme), - sxProp as SxProp, - ]) + const sxStyles = merge.all([getBaseStyles(theme), getVariantStyles(variant, theme), sxProp as SxProp]) return ( - - - - + + ) }) diff --git a/src/Button/IconButtonFeatures.stories.tsx b/src/Button/IconButtonFeatures.stories.tsx new file mode 100644 index 00000000000..f712788c5ba --- /dev/null +++ b/src/Button/IconButtonFeatures.stories.tsx @@ -0,0 +1,23 @@ +import {HeartIcon} from '@primer/octicons-react' +import React from 'react' +import {IconButton} from '.' + +export default { + title: 'Components/IconButton/Features' +} + +export const Default = () => + +export const Primary = () => + +export const Danger = () => + +export const Invisible = () => + +export const Disabled = () => + +export const Small = () => + +export const Medium = () => + +export const Large = () => diff --git a/src/Button/LinkButton.stories.tsx b/src/Button/LinkButton.stories.tsx new file mode 100644 index 00000000000..d5be57fd2d0 --- /dev/null +++ b/src/Button/LinkButton.stories.tsx @@ -0,0 +1,58 @@ +import React from 'react' +import {EyeClosedIcon, EyeIcon, SearchIcon, ChevronRightIcon, XIcon, HeartIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import {Button} from '.' +import {OcticonArgType} from '../utils/story-helpers' + +export default { + title: 'Components/LinkButton', + argTypes: { + size: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'] + } + }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible'] + } + }, + alignContent: { + control: { + type: 'radio', + options: ['center', 'start'] + } + }, + block: { + control: { + type: 'boolean' + } + }, + leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingAction: OcticonArgType([ChevronRightIcon]), + trailingVisualCount: { + control: { + type: 'number' + } + }, + href: {control: 'text'} + }, + args: { + block: false, + size: 'medium', + variant: 'default', + alignContent: 'center', + trailingVisual: null, + leadingVisual: null, + href: '/' + } +} as Meta + +export const Playground: Story = args => ( + +) diff --git a/src/Button/LinkButton.tsx b/src/Button/LinkButton.tsx index e8aed6d4b8d..948cb43f3e9 100644 --- a/src/Button/LinkButton.tsx +++ b/src/Button/LinkButton.tsx @@ -8,26 +8,13 @@ type MyProps = LinkButtonProps & ButtonBaseProps const LinkButton = forwardRef( ({children, as: Component = 'a', sx = {}, ...props}, forwardedRef): JSX.Element => { - const style = { - width: 'fit-content', - '&:hover:not([disabled])': { - textDecoration: 'underline', - }, - // focus must come before :active so that the active box shadow overrides - '&:focus:not([disabled])': { - textDecoration: 'underline', - }, - '&:active:not([disabled])': { - textDecoration: 'underline', - }, - } - const sxStyle = merge.all([style, sx as SxProp]) + const sxStyle = merge.all([sx as SxProp]) return ( {children} ) - }, + } ) as PolymorphicForwardRefComponent<'a', ButtonBaseProps> export {LinkButton} diff --git a/src/Button/LinkButtonFeatures.stories.tsx b/src/Button/LinkButtonFeatures.stories.tsx new file mode 100644 index 00000000000..b2d2c1cae2f --- /dev/null +++ b/src/Button/LinkButtonFeatures.stories.tsx @@ -0,0 +1,87 @@ +import {EyeIcon, ChevronRightIcon, HeartIcon} from '@primer/octicons-react' +import React, {forwardRef} from 'react' +import {Button} from '.' + +export default { + title: 'Components/LinkButton/Features' +} + +export const Default = () => ( + +) + +export const Primary = () => ( + +) + +export const Danger = () => ( + +) + +export const Invisible = () => ( + +) + +export const LeadingVisual = () => ( + +) + +export const TrailingVisual = () => ( + +) + +export const TrailingAction = () => ( + +) + +export const Block = () => ( + +) + +export const Small = () => ( + +) + +export const Medium = () => ( + +) + +export const Large = () => ( + +) + +type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} +const ReactRouterLikeLink = forwardRef( + ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { + // eslint-disable-next-line jsx-a11y/anchor-has-content + return + } +) + +export const WithReactRouter = () => ( + +) diff --git a/src/Button/index.ts b/src/Button/index.ts index d0519b22e70..85c1d2bb2bf 100644 --- a/src/Button/index.ts +++ b/src/Button/index.ts @@ -1,10 +1,7 @@ import {ButtonComponent} from './Button' -import {Counter} from './ButtonCounter' import {IconButton} from './IconButton' import {LinkButton} from './LinkButton' export type {ButtonProps, IconButtonProps} from './types' export {IconButton, LinkButton} -export const Button = Object.assign(ButtonComponent, { - Counter, -}) +export const Button = Object.assign(ButtonComponent) diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 8603860dec5..7f61c7dc915 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -1,4 +1,4 @@ -import {VariantType} from './types' +import {VariantType, AlignContent} from './types' import {Theme} from '../ThemeProvider' export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale @@ -11,56 +11,57 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`, '&:hover:not([disabled])': { backgroundColor: 'btn.hoverBg', + borderColor: 'btn.hoverBorder' }, '&:active:not([disabled])': { backgroundColor: 'btn.activeBg', - borderColor: 'btn.activeBorder', + borderColor: 'btn.activeBorder' }, '&:disabled': { color: 'primer.fg.disabled', '[data-component=ButtonCounter]': { - color: 'inherit', - }, + color: 'inherit' + } }, '&[aria-expanded=true]': { backgroundColor: 'btn.activeBg', - borderColor: 'btn.activeBorder', - }, + borderColor: 'btn.activeBorder' + } }, primary: { color: 'btn.primary.text', backgroundColor: 'btn.primary.bg', - borderColor: 'border.subtle', + borderColor: 'btn.primary.border', boxShadow: `${theme?.shadows.btn.primary.shadow}`, '&:hover:not([disabled])': { color: 'btn.primary.hoverText', - backgroundColor: 'btn.primary.hoverBg', + backgroundColor: 'btn.primary.hoverBg' }, '&:focus:not([disabled])': { - boxShadow: 'inset 0 0 0 3px', + boxShadow: 'inset 0 0 0 3px' }, '&:focus-visible:not([disabled])': { - boxShadow: 'inset 0 0 0 3px', + boxShadow: 'inset 0 0 0 3px' }, '&:active:not([disabled])': { backgroundColor: 'btn.primary.selectedBg', - boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`, + boxShadow: `${theme?.shadows.btn.primary.selectedShadow}` }, '&:disabled': { color: 'btn.primary.disabledText', backgroundColor: 'btn.primary.disabledBg', '[data-component=ButtonCounter]': { - color: 'inherit', - }, + color: 'inherit' + } }, '[data-component=ButtonCounter]': { backgroundColor: 'btn.primary.counterBg', - color: 'btn.primary.text', + color: 'btn.primary.text' }, '&[aria-expanded=true]': { backgroundColor: 'btn.primary.selectedBg', - boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`, - }, + boxShadow: `${theme?.shadows.btn.primary.selectedShadow}` + } }, danger: { color: 'btn.danger.text', @@ -73,14 +74,14 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`, '[data-component=ButtonCounter]': { backgroundColor: 'btn.danger.hoverCounterBg', - color: 'btn.danger.hoverText', - }, + color: 'btn.danger.hoverText' + } }, '&:active:not([disabled])': { color: 'btn.danger.selectedText', backgroundColor: 'btn.danger.selectedBg', boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`, - borderColor: 'btn.danger.selectedBorder', + borderColor: 'btn.danger.selectedBorder' }, '&:disabled': { color: 'btn.danger.disabledText', @@ -88,178 +89,182 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme borderColor: 'btn.danger.disabledBorder', '[data-component=ButtonCounter]': { color: 'inherit', - backgroundColor: 'btn.danger.disabledCounterBg', - }, + backgroundColor: 'btn.danger.disabledCounterBg' + } }, '[data-component=ButtonCounter]': { color: 'btn.danger.text', - backgroundColor: 'btn.danger.counterBg', + backgroundColor: 'btn.danger.counterBg' }, '&[aria-expanded=true]': { color: 'btn.danger.selectedText', backgroundColor: 'btn.danger.selectedBg', boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`, - borderColor: 'btn.danger.selectedBorder', - }, + borderColor: 'btn.danger.selectedBorder' + } }, invisible: { color: 'accent.fg', backgroundColor: 'transparent', - border: '0', + borderColor: 'transparent', boxShadow: 'none', '&:hover:not([disabled])': { - backgroundColor: 'btn.hoverBg', + backgroundColor: `actionListItem.default.hoverBg` }, '&:active:not([disabled])': { - backgroundColor: 'btn.selectedBg', + backgroundColor: 'actionListItem.default.activeBg' }, '&:disabled': { color: 'primer.fg.disabled', '[data-component=ButtonCounter]': { - color: 'inherit', - }, - }, - '&[aria-expanded=true]': { - backgroundColor: 'btn.selectedBg', - }, - }, - outline: { - color: 'btn.outline.text', - boxShadow: `${theme?.shadows.btn.shadow}`, - borderColor: 'btn.border', - backgroundColor: 'btn.bg', - - '&:hover:not([disabled])': { - color: 'btn.outline.hoverText', - backgroundColor: 'btn.outline.hoverBg', - borderColor: 'btn.outline.hoverBorder', - boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.hoverCounterBg', - color: 'inherit', - }, - }, - '&:active:not([disabled])': { - color: 'btn.outline.selectedText', - backgroundColor: 'btn.outline.selectedBg', - boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, - borderColor: 'btn.outline.selectedBorder', - }, - - '&:disabled': { - color: 'btn.outline.disabledText', - backgroundColor: 'btn.outline.disabledBg', - borderColor: 'btn.border', - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.disabledCounterBg', - color: 'inherit', - }, - }, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.counterBg', - color: 'btn.outline.text', + color: 'inherit' + } }, '&[aria-expanded=true]': { - color: 'btn.outline.selectedText', - backgroundColor: 'btn.outline.selectedBg', - boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, - borderColor: 'btn.outline.selectedBorder', + backgroundColor: 'actionListItem.default.selectedBg' }, - }, + svg: { + color: 'fg.muted' + } + } } return style[variant] } -/* The button heights have to amount to - small - 28 - medium - 32 - large - 34 - In icon these have to be square. -*/ -export const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOnly: boolean) => { - let paddingY, paddingX, fontSize - switch (size) { - case 'small': - paddingY = 3 - paddingX = 12 - fontSize = 0 - break - case 'large': - paddingY = 9 - paddingX = 20 - fontSize = 2 - break - case 'medium': - default: - paddingY = 5 - paddingX = 16 - fontSize = 1 - } - if (iconOnly) { - // when `size !== 'medium'`, vertical alignment of the icon is thrown off - // because changing the font size draws an em-box that does not match the - // bounding box of the SVG - fontSize = 1 - paddingX = paddingY + 3 // to make it a square - } - if (variant === 'invisible') { - paddingY = paddingY + 1 // to make up for absence of border - } - return { - paddingY: `${paddingY}px`, - paddingX: `${paddingX}px`, - fontSize, - '[data-component=ButtonCounter]': { - fontSize, - }, - } -} - export const getBaseStyles = (theme?: Theme) => ({ borderRadius: '2', border: '1px solid', borderColor: theme?.colors.btn.border, fontFamily: 'inherit', - fontWeight: 'bold', - lineHeight: TEXT_ROW_HEIGHT, - whiteSpace: 'nowrap', - verticalAlign: 'middle', + fontWeight: 'var(--base-text-weight-medium, 500)', + fontSize: 'var(--primer-text-body-size-medium, 14px)', cursor: 'pointer', appearance: 'none', userSelect: 'none', textDecoration: 'none', textAlign: 'center', - '&:disabled': { - cursor: 'default', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + height: 'var(--primer-control-medium-size, 32px)', + padding: '0 var(--primer-control-medium-paddingInline-normal, 12px)', + gap: 'var(--primer-control-medium-gap, 8px)', + minWidth: 'max-content', + transition: '80ms cubic-bezier(0.65, 0, 0.35, 1)', + transitionProperty: 'color, fill, background-color, border-color', + '&[href]': { + display: 'inline-flex', + '&:hover': { + textDecoration: 'none' + } }, - '&:disabled svg': { - opacity: '0.6', + '&:hover': { + transitionDuration: '80ms' + }, + '&:active': { + transition: 'none' + }, + '&:disabled': { + cursor: 'not-allowed', + boxShadow: 'none' }, '@media (forced-colors: active)': { '&:focus': { // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips - outline: 'solid 1px transparent', + outline: 'solid 1px transparent' + } + }, + '[data-component=ButtonCounter]': { + fontSize: 'var(--primer-text-body-size-medium, 14px)' + }, + '&[data-component=IconButton]': { + display: 'grid', + padding: 'unset', + placeContent: 'center', + width: 'var(--primer-control-medium-size, 32px)' + }, + '&[data-size="small"]': { + padding: '0 var(--primer-control-small-paddingInline-condensed, 8px)', + height: 'var(--primer-control-small-size, 28px)', + gap: 'var(--primer-control-small-gap, 4px)', + fontSize: 'var(--primer-text-body-size-small, 12px)', + + '[data-component="text"]': { + lineHeight: 'var(--primer-text-body-lineHeight-small, calc(20 / 12))' + }, + + '[data-component=ButtonCounter]': { + fontSize: 'var(--primer-text-body-size-small, 12px)' }, + + '[data-component="buttonContent"] > :not(:last-child)': { + mr: 'var(--primer-control-small-gap, 4px)' + }, + + '&[data-component=IconButton]': { + width: 'var(--primer-control-small-size, 28px)', + padding: 'unset' + } }, + '&[data-size="large"]': { + padding: '0 var(--primer-control-large-paddingInline-spacious, 16px)', + height: 'var(--primer-control-large-size, 40px)', + gap: 'var(--primer-control-large-gap, 8px)', + + '[data-component="buttonContent"] > :not(:last-child)': { + mr: 'var(--primer-control-large-gap, 8px)' + }, + + '&[data-component=IconButton]': { + width: 'var(--primer-control-large-size, 40px)', + padding: 'unset' + } + } }) export const getButtonStyles = (theme?: Theme) => { const styles = { ...getBaseStyles(theme), - display: 'grid', - gridTemplateAreas: '"leadingIcon text trailingIcon"', - '& > :not(:last-child)': { - mr: '2', + '&[data-component="block"]': { + width: '100%' }, - '[data-component="leadingIcon"]': { - gridArea: 'leadingIcon', + '[data-component="leadingVisual"]': { + gridArea: 'leadingVisual' }, '[data-component="text"]': { gridArea: 'text', + lineHeight: 'var(--primer-text-body-lineHeight-medium, calc(20/14))', + whiteSpace: 'nowrap' }, - '[data-component="trailingIcon"]': { - gridArea: 'trailingIcon', + '[data-component="trailingVisual"]': { + gridArea: 'trailingVisual' }, + '[data-component="trailingAction"]': { + marginRight: 'calc(var(--base-size-4, 4px) * -1)' + }, + '[data-component="buttonContent"]': { + flex: '1 0 auto', + display: 'grid', + gridTemplateAreas: '"leadingVisual text trailingVisual"', + gridTemplateColumns: 'min-content minmax(0, auto) min-content', + alignItems: 'center', + alignContent: 'center' + }, + '[data-component="buttonContent"] > :not(:last-child)': { + mr: 'var(--primer-control-medium-gap, 8px)' + } } return styles } + +export const getAlignContentSize = (alignContent: AlignContent = 'center') => { + const style = { + center: { + justifyContent: 'center' + }, + start: { + justifyContent: 'flex-start' + } + } + return style[alignContent] +} diff --git a/src/Button/types.ts b/src/Button/types.ts index 629809b6f1b..cb8bcc0b4e0 100644 --- a/src/Button/types.ts +++ b/src/Button/types.ts @@ -9,10 +9,12 @@ export const StyledButton = styled.button` ${sx}; ` -export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline' +export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' export type Size = 'small' | 'medium' | 'large' +export type AlignContent = 'start' | 'center' + /** * Remove styled-components polymorphic as prop, which conflicts with radix's */ @@ -33,6 +35,10 @@ export type ButtonBaseProps = { * Items that are disabled can not be clicked, selected, or navigated through. */ disabled?: boolean + /** + * Allow button width to fill its container. + */ + block?: boolean } & SxProp & React.ButtonHTMLAttributes & StyledButtonProps @@ -41,11 +47,19 @@ export type ButtonProps = { /** * The leading icon comes before button content */ - leadingIcon?: React.FunctionComponent> + alignContent?: AlignContent + /** + * The leading icon comes before button content + */ + leadingVisual?: React.FunctionComponent> /** * The trailing icon comes after button content */ - trailingIcon?: React.FunctionComponent> + trailingVisual?: React.FunctionComponent> + /** + * Trailing action appears to the right of the trailing visual and is always locked to the end + */ + trailingAction?: React.FunctionComponent> children: React.ReactNode } & ButtonBaseProps diff --git a/src/__tests__/Button.test.tsx b/src/__tests__/Button.test.tsx index aaa887cdbfa..90e77fc963f 100644 --- a/src/__tests__/Button.test.tsx +++ b/src/__tests__/Button.test.tsx @@ -29,10 +29,10 @@ describe('Button', () => { expect(onClick).toHaveBeenCalledTimes(1) }) - it('respects width props', () => { - const container = render() + it('respects block prop', () => { + const container = render() const button = container.getByRole('button') - expect(button).toHaveStyleRule('width', '200px') + expect(button).toMatchSnapshot() }) it('respects the "disabled" prop', () => { @@ -40,7 +40,7 @@ describe('Button', () => { const container = render( , + ) const button = container.getByRole('button') expect(button.hasAttribute('disabled')).toEqual(true) @@ -48,20 +48,16 @@ describe('Button', () => { expect(onClick).toHaveBeenCalledTimes(0) }) - it('respects the "variant" prop', () => { + it('respects the small size prop', () => { const container = render() const button = container.getByRole('button') - expect(button).toHaveStyleRule('font-size', '12px') + expect(button).toMatchSnapshot() }) - it('respects the "fontSize" prop over the "variant" prop', () => { - const container = render( - , - ) + it('respects the large size prop', () => { + const container = render() const button = container.getByRole('button') - expect(button).toHaveStyleRule('font-size', '20px') + expect(button).toMatchSnapshot() }) it('styles primary button appropriately', () => { @@ -82,22 +78,15 @@ describe('Button', () => { expect(button).toMatchSnapshot() }) - it('styles outline button appropriately', () => { - const container = render() - const button = container.getByRole('button') - expect(button).toMatchSnapshot() - }) - - it('styles icon only button to make it a square', () => { - const container = render() - const IconOnlyButton = container.getByRole('button') - expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px') - expect(IconOnlyButton).toMatchSnapshot() - }) - it('makes sure icon button has an aria-label', () => { const container = render() const IconOnlyButton = container.getByLabelText('Search button') expect(IconOnlyButton).toBeTruthy() }) + + it('respects the alignContent prop', () => { + const container = render() + const button = container.getByRole('button') + expect(button).toMatchSnapshot() + }) }) diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index b326c15a119..383915538a4 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -8,8 +8,10 @@ exports[`ActionMenu renders consistently 1`] = ` } .c2 { - display: inline-block; - margin-left: 8px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } .c1 { @@ -17,10 +19,8 @@ exports[`ActionMenu renders consistently 1`] = ` border: 1px solid; border-color: rgba(27,31,36,0.15); font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -32,13 +32,28 @@ exports[`ActionMenu renders consistently 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: #f6f8fa; box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); @@ -60,8 +75,31 @@ exports[`ActionMenu renders consistently 1`] = ` outline-offset: -2px; } +.c1[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c1:active { + -webkit-transition: none; + transition: none; +} + .c1:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: #8c959f; } @@ -69,32 +107,101 @@ exports[`ActionMenu renders consistently 1`] = ` color: inherit; } -.c1:disabled svg { - opacity: 0.6; +.c1 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c1[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c1[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c1[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c1[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c1[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c1[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c1[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c1[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c1[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; } -.c1 > :not(:last-child) { - margin-right: 8px; +.c1[data-component="block"] { + width: 100%; } -.c1 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c1 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c1 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c1 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c1 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c1 [data-component=ButtonCounter] { - font-size: 14px; +.c1 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c1 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c1 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c1:hover:not([disabled]) { background-color: #f3f4f6; + border-color: rgba(27,31,36,0.15); } .c1:active:not([disabled]) { @@ -127,20 +234,16 @@ exports[`ActionMenu renders consistently 1`] = ` `; -exports[`Button styles danger button appropriately 1`] = ` +exports[`Button respects the large size prop 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 2; border: 1px solid; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -127,16 +250,31 @@ exports[`Button styles danger button appropriately 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: btn.danger.text; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; + color: btn.text; background-color: btn.bg; - box-shadow: undefined; + box-shadow: undefined,undefined; } .c0:focus:not(:disabled) { @@ -155,68 +293,143 @@ exports[`Button styles danger button appropriately 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; - color: btn.danger.disabledText; - background-color: btn.danger.disabledBg; - border-color: btn.danger.disabledBorder; + cursor: not-allowed; + box-shadow: none; + color: primer.fg.disabled; } .c0:disabled [data-component=ButtonCounter] { color: inherit; - background-color: btn.danger.disabledCounterBg; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component=ButtonCounter] { - font-size: 14px; - color: btn.danger.text; - background-color: btn.danger.counterBg; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); } -.c0:hover:not([disabled]) { - color: btn.danger.hoverText; - background-color: btn.danger.hoverBg; - border-color: btn.danger.hoverBorder; - box-shadow: undefined; +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; } -.c0:hover:not([disabled]) [data-component=ButtonCounter] { - background-color: btn.danger.hoverCounterBg; - color: btn.danger.hoverText; +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); +} + +.c0:hover:not([disabled]) { + background-color: btn.hoverBg; + border-color: btn.hoverBorder; } .c0:active:not([disabled]) { - color: btn.danger.selectedText; - background-color: btn.danger.selectedBg; - box-shadow: undefined; - border-color: btn.danger.selectedBorder; + background-color: btn.activeBg; + border-color: btn.activeBorder; } .c0[aria-expanded=true] { - color: btn.danger.selectedText; - background-color: btn.danger.selectedBg; - box-shadow: undefined; - border-color: btn.danger.selectedBorder; + background-color: btn.activeBg; + border-color: btn.activeBorder; } @media (forced-colors:active) { @@ -227,28 +440,35 @@ exports[`Button styles danger button appropriately 1`] = ` `; -exports[`Button styles icon only button to make it a square 1`] = ` +exports[`Button respects the small size prop 1`] = ` .c1 { - display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } .c0 { border-radius: 2; border: 1px solid; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -260,11 +480,28 @@ exports[`Button styles icon only button to make it a square 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 8px; - padding-right: 8px; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: btn.text; background-color: btn.bg; box-shadow: undefined,undefined; @@ -286,8 +523,31 @@ exports[`Button styles icon only button to make it a square 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: primer.fg.disabled; } @@ -295,16 +555,101 @@ exports[`Button styles icon only button to make it a square 1`] = ` color: inherit; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); } -.c0 [data-component=ButtonCounter] { - font-size: 14px; +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; +} + +.c0 [data-component="text"] { + grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; +} + +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; +} + +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { background-color: btn.hoverBg; + border-color: btn.hoverBorder; } .c0:active:not([disabled]) { @@ -324,41 +669,36 @@ exports[`Button styles icon only button to make it a square 1`] = ` } `; -exports[`Button styles invisible button appropriately 1`] = ` +exports[`Button respects width prop 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 2; - border: 0; + border: 1px solid; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -370,16 +710,31 @@ exports[`Button styles invisible button appropriately 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 6px; - padding-bottom: 6px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: accent.fg; - background-color: transparent; - box-shadow: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; + color: btn.text; + background-color: btn.bg; + box-shadow: undefined,undefined; } .c0:focus:not(:disabled) { @@ -398,8 +753,31 @@ exports[`Button styles invisible button appropriately 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: primer.fg.disabled; } @@ -407,40 +785,111 @@ exports[`Button styles invisible button appropriately 1`] = ` color: inherit; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-component="block"] { + width: 100%; } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component=ButtonCounter] { - font-size: 14px; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { background-color: btn.hoverBg; + border-color: btn.hoverBorder; } .c0:active:not([disabled]) { - background-color: btn.selectedBg; + background-color: btn.activeBg; + border-color: btn.activeBorder; } .c0[aria-expanded=true] { - background-color: btn.selectedBg; + background-color: btn.activeBg; + border-color: btn.activeBorder; } @media (forced-colors:active) { @@ -451,25 +900,35 @@ exports[`Button styles invisible button appropriately 1`] = ` `; -exports[`Button styles outline button appropriately 1`] = ` +exports[`Button styles danger button appropriately 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 2; border: 1px solid; - border-color: btn.border; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -481,16 +940,31 @@ exports[`Button styles outline button appropriately 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: btn.outline.text; - box-shadow: undefined; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; + color: btn.danger.text; background-color: btn.bg; + box-shadow: undefined; } .c0:focus:not(:disabled) { @@ -509,42 +983,382 @@ exports[`Button styles outline button appropriately 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; - color: btn.outline.disabledText; - background-color: btn.outline.disabledBg; - border-color: btn.border; + cursor: not-allowed; + box-shadow: none; + color: btn.danger.disabledText; + background-color: btn.danger.disabledBg; + border-color: btn.danger.disabledBorder; } .c0:disabled [data-component=ButtonCounter] { - background-color: btn.outline.disabledCounterBg; color: inherit; + background-color: btn.danger.disabledCounterBg; +} + +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); + color: btn.danger.text; + background-color: btn.danger.counterBg; +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); } -.c0:disabled svg { - opacity: 0.6; +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; +} + +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); +} + +.c0:hover:not([disabled]) { + color: btn.danger.hoverText; + background-color: btn.danger.hoverBg; + border-color: btn.danger.hoverBorder; + box-shadow: undefined; +} + +.c0:hover:not([disabled]) [data-component=ButtonCounter] { + background-color: btn.danger.hoverCounterBg; + color: btn.danger.hoverText; +} + +.c0:active:not([disabled]) { + color: btn.danger.selectedText; + background-color: btn.danger.selectedBg; + box-shadow: undefined; + border-color: btn.danger.selectedBorder; +} + +.c0[aria-expanded=true] { + color: btn.danger.selectedText; + background-color: btn.danger.selectedBg; + box-shadow: undefined; + border-color: btn.danger.selectedBorder; +} + +@media (forced-colors:active) { + .c0:focus { + outline: solid 1px transparent; + } +} + + +`; + +exports[`Button styles invisible button appropriately 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c0 { + border-radius: 2; + border: 1px solid; + border-color: transparent; + font-family: inherit; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); + cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-text-decoration: none; + text-decoration: none; + text-align: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; + color: accent.fg; + background-color: transparent; + box-shadow: none; +} + +.c0:focus:not(:disabled) { + box-shadow: none; + outline: 2px solid; + outline-offset: -2px; +} + +.c0:focus:not(:disabled):not(:focus-visible) { + outline: solid 1px transparent; +} + +.c0:focus-visible:not(:disabled) { + box-shadow: none; + outline: 2px solid; + outline-offset: -2px; +} + +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + +.c0:disabled { + cursor: not-allowed; + box-shadow: none; + color: primer.fg.disabled; +} + +.c0:disabled [data-component=ButtonCounter] { + color: inherit; } .c0 [data-component=ButtonCounter] { - font-size: 14px; - background-color: btn.outline.counterBg; - color: btn.outline.text; + font-size: var(--primer-text-body-size-medium,14px); +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; +} + +.c0 [data-component="text"] { + grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; +} + +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; +} + +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { @@ -560,17 +1374,15 @@ exports[`Button styles outline button appropriately 1`] = ` } .c0:active:not([disabled]) { - color: btn.outline.selectedText; - background-color: btn.outline.selectedBg; - box-shadow: undefined; - border-color: btn.outline.selectedBorder; + background-color: actionListItem.default.activeBg; } .c0[aria-expanded=true] { - color: btn.outline.selectedText; - background-color: btn.outline.selectedBg; - box-shadow: undefined; - border-color: btn.outline.selectedBorder; + background-color: actionListItem.default.selectedBg; +} + +.c0 svg { + color: fg.muted; } @media (forced-colors:active) { @@ -583,23 +1395,33 @@ exports[`Button styles outline button appropriately 1`] = ` class="c0" > - Outline + + Invisible + `; exports[`Button styles primary button appropriately 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 2; border: 1px solid; - border-color: border.subtle; + border-color: btn.primary.border; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -611,13 +1433,28 @@ exports[`Button styles primary button appropriately 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: btn.primary.text; background-color: btn.primary.bg; box-shadow: undefined; @@ -639,8 +1476,31 @@ exports[`Button styles primary button appropriately 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: btn.primary.disabledText; background-color: btn.primary.disabledBg; } @@ -649,30 +1509,98 @@ exports[`Button styles primary button appropriately 1`] = ` color: inherit; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); + background-color: btn.primary.counterBg; + color: btn.primary.text; +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component=ButtonCounter] { - font-size: 14px; - background-color: btn.primary.counterBg; - color: btn.primary.text; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { @@ -708,9 +1636,14 @@ exports[`Button styles primary button appropriately 1`] = ` class="c0" > - Primary + + Primary + `; diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 49415d59c82..8f807541a2f 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1254,19 +1254,13 @@ exports[`TextInput renders trailingAction icon button 1`] = ` margin: 4px; } -.c5 { - display: inline-block; -} - .c4 { border-radius: 6px; - border: 0; - border-color: rgba(27,31,36,0.15); + border: 1px solid; + border-color: transparent; font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -1278,14 +1272,35 @@ exports[`TextInput renders trailingAction icon button 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 4px; - padding-right: 4px; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: transparent; box-shadow: none; + padding-top: 2px; + padding-right: 4px; + padding-bottom: 2px; + padding-left: 4px; position: relative; } @@ -1305,8 +1320,31 @@ exports[`TextInput renders trailingAction icon button 1`] = ` outline-offset: -2px; } +.c4[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c4[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c4:active { + -webkit-transition: none; + transition: none; +} + .c4:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: #8c959f; } @@ -1314,24 +1352,70 @@ exports[`TextInput renders trailingAction icon button 1`] = ` color: inherit; } -.c4:disabled svg { - opacity: 0.6; +.c4 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); } -.c4 [data-component=ButtonCounter] { - font-size: 14px; +.c4[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c4[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c4[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c4[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c4[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c4[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c4[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; } .c4:hover:not([disabled]) { - background-color: #f3f4f6; + background-color: rgba(208,215,222,0.32); } .c4:active:not([disabled]) { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.48); } .c4[aria-expanded=true] { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.24); +} + +.c4 svg { + color: #57606a; } .c0 { @@ -1694,6 +1778,8 @@ exports[`TextInput renders trailingAction icon button 1`] = ` @@ -1982,15 +2194,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` margin: 4px; } +.c5 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c4 { border-radius: 6px; - border: 0; - border-color: rgba(27,31,36,0.15); + border: 1px solid; + border-color: transparent; font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -2002,16 +2219,35 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 4px; - padding-right: 4px; - font-size: 12px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: transparent; box-shadow: none; + padding-top: 2px; + padding-right: 4px; + padding-bottom: 2px; + padding-left: 4px; position: relative; } @@ -2031,8 +2267,31 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` outline-offset: -2px; } +.c4[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c4[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c4:active { + -webkit-transition: none; + transition: none; +} + .c4:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: #8c959f; } @@ -2040,40 +2299,112 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` color: inherit; } -.c4:disabled svg { - opacity: 0.6; +.c4 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); } -.c4 > :not(:last-child) { - margin-right: 8px; +.c4[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); } -.c4 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c4[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c4[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c4[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c4[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c4[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c4[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c4[data-component="block"] { + width: 100%; +} + +.c4 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c4 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c4 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c4 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c4 [data-component=ButtonCounter] { - font-size: 12px; +.c4 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c4 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c4 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c4:hover:not([disabled]) { - background-color: #f3f4f6; + background-color: rgba(208,215,222,0.32); } .c4:active:not([disabled]) { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.48); } .c4[aria-expanded=true] { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.24); +} + +.c4 svg { + color: #57606a; } .c0 { @@ -2436,13 +2767,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` >