From 3871a7f29abcbe24e6d2c88b79758023e416f0a7 Mon Sep 17 00:00:00 2001 From: Duma Date: Thu, 26 Oct 2023 05:39:23 +0200 Subject: [PATCH 1/6] Rework `DatePickerInput` type to extend `HTMLInputElement` instead of div (#14987) Co-authored-by: Andrea N. Cardona --- .../react/src/components/DatePickerInput/DatePickerInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx index e9d1d8eb6d63..79362d76ee90 100644 --- a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx +++ b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx @@ -29,7 +29,7 @@ export type ReactNodeLike = export type func = (...args: any[]) => any; interface DatePickerInputProps - extends Omit, ExcludedAttributes> { + extends Omit, ExcludedAttributes> { /** * The type of the date picker: * From ef000682cb2d41f63b595d0767eb0b2a5bc71daa Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 25 Oct 2023 22:49:15 -0500 Subject: [PATCH 2/6] chore(deps): bump @babel/traverse (#14911) Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.1.5 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .../icons-vue/examples/storybook/yarn.lock | 165 ++++++++++++++++-- 1 file changed, 153 insertions(+), 12 deletions(-) diff --git a/packages/icons-vue/examples/storybook/yarn.lock b/packages/icons-vue/examples/storybook/yarn.lock index 8c0935bf16ea..2639e76fa209 100644 --- a/packages/icons-vue/examples/storybook/yarn.lock +++ b/packages/icons-vue/examples/storybook/yarn.lock @@ -9,6 +9,14 @@ dependencies: "@babel/highlight" "^7.0.0" +"@babel/code-frame@^7.22.13": + version "7.22.13" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e" + integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w== + dependencies: + "@babel/highlight" "^7.22.13" + chalk "^2.4.2" + "@babel/core@^7.1.5": version "7.1.5" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.5.tgz#abb32d7aa247a91756469e788998db6a72b93090" @@ -40,6 +48,16 @@ source-map "^0.5.0" trim-right "^1.0.1" +"@babel/generator@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420" + integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g== + dependencies: + "@babel/types" "^7.23.0" + "@jridgewell/gen-mapping" "^0.3.2" + "@jridgewell/trace-mapping" "^0.3.17" + jsesc "^2.5.1" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -73,6 +91,11 @@ "@babel/types" "^7.0.0" lodash "^4.17.10" +"@babel/helper-environment-visitor@^7.22.20": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167" + integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA== + "@babel/helper-explode-assignable-expression@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6" @@ -90,6 +113,14 @@ "@babel/template" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-function-name@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759" + integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw== + dependencies: + "@babel/template" "^7.22.15" + "@babel/types" "^7.23.0" + "@babel/helper-get-function-arity@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3" @@ -104,6 +135,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-hoist-variables@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb" + integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-member-expression-to-functions@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0.tgz#8cd14b0a0df7ff00f009e7d7a436945f47c7a16f" @@ -185,6 +223,23 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-split-export-declaration@^7.22.6": + version "7.22.6" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c" + integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g== + dependencies: + "@babel/types" "^7.22.5" + +"@babel/helper-string-parser@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" + integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== + +"@babel/helper-validator-identifier@^7.22.20": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0" + integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A== + "@babel/helper-wrap-function@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.1.0.tgz#8cf54e9190706067f016af8f75cb3df829cc8c66" @@ -213,11 +268,25 @@ esutils "^2.0.2" js-tokens "^4.0.0" +"@babel/highlight@^7.22.13": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54" + integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg== + dependencies: + "@babel/helper-validator-identifier" "^7.22.20" + chalk "^2.4.2" + js-tokens "^4.0.0" + "@babel/parser@^7.1.2", "@babel/parser@^7.1.5": version "7.1.5" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.5.tgz#20b7d5e7e1811ba996f8a868962ea7dd2bfcd2fc" integrity sha512-WXKf5K5HT6X0kKiCOezJZFljsfxKV1FpU8Tf1A7ZpGvyd/Q4hlrJm2EwoH2onaUq3O4tLDp+4gk0hHPsMyxmOg== +"@babel/parser@^7.22.15", "@babel/parser@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719" + integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw== + "@babel/plugin-proposal-async-generator-functions@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.1.0.tgz#41c1a702e10081456e23a7b74d891922dd1bb6ce" @@ -595,20 +664,30 @@ "@babel/parser" "^7.1.2" "@babel/types" "^7.1.2" -"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5": - version "7.1.5" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.5.tgz#5aafca2039aa058c104cf2bfeb9fc4a857ccbca9" - integrity sha512-eU6XokWypl0MVJo+MTSPUtlfPePkrqsF26O+l1qFGlCKWwmiYAYy2Sy44Qw8m2u/LbPCsxYt90rghmqhYMGpPA== +"@babel/template@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" + integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w== dependencies: - "@babel/code-frame" "^7.0.0" - "@babel/generator" "^7.1.5" - "@babel/helper-function-name" "^7.1.0" - "@babel/helper-split-export-declaration" "^7.0.0" - "@babel/parser" "^7.1.5" - "@babel/types" "^7.1.5" - debug "^3.1.0" + "@babel/code-frame" "^7.22.13" + "@babel/parser" "^7.22.15" + "@babel/types" "^7.22.15" + +"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8" + integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.23.0" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-function-name" "^7.23.0" + "@babel/helper-hoist-variables" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/parser" "^7.23.0" + "@babel/types" "^7.23.0" + debug "^4.1.0" globals "^11.1.0" - lodash "^4.17.10" "@babel/types@^7.0.0", "@babel/types@^7.1.2", "@babel/types@^7.1.5": version "7.1.5" @@ -619,6 +698,15 @@ lodash "^4.17.10" to-fast-properties "^2.0.0" +"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb" + integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg== + dependencies: + "@babel/helper-string-parser" "^7.22.5" + "@babel/helper-validator-identifier" "^7.22.20" + to-fast-properties "^2.0.0" + "@carbon/icon-helpers@^0.0.1-alpha.20": version "0.0.1-alpha.20" resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-0.0.1-alpha.20.tgz#3e9ceb79996bf3161984de1941c329d6d210802c" @@ -728,6 +816,38 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.1.3.tgz#b700d97385fa91affed60c71dfd51c67e9dad762" integrity sha512-QsYGKdhhuDFNq7bjm2r44y0mp5xW3uO3csuTPDWZc0OIiMQv+AIY5Cqwd4mJiC5N8estVl7qlvOx1hbtOuUWbw== +"@jridgewell/gen-mapping@^0.3.2": + version "0.3.3" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098" + integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ== + dependencies: + "@jridgewell/set-array" "^1.0.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721" + integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA== + +"@jridgewell/set-array@^1.0.1": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" + integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== + +"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": + version "1.4.15" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32" + integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== + +"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9": + version "0.3.20" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f" + integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -2087,6 +2207,15 @@ chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" +chalk@^2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" + integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== + dependencies: + ansi-styles "^3.2.1" + escape-string-regexp "^1.0.5" + supports-color "^5.3.0" + chardet@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" @@ -2522,6 +2651,13 @@ debug@^3.1.0: dependencies: ms "^2.1.1" +debug@^4.1.0: + version "4.3.4" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" + integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== + dependencies: + ms "2.1.2" + decode-uri-component@^0.2.0: version "0.2.2" resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" @@ -4333,6 +4469,11 @@ ms@2.1.1, ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a" integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg== +ms@2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" + integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== + ms@2.1.3: version "2.1.3" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" From 754056fb419c2e31c04719074d9581f5372b9e13 Mon Sep 17 00:00:00 2001 From: Alex Lewitt <48691328+alewitt2@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:31:41 -0400 Subject: [PATCH 3/6] fix(Tile): `ClickableTile` should focus when no href prop (#15029) * fix(ClickableTile): focus when no href prop If no href is defined, clickableTile should still be able to gain focus. Also removes the duplicate onKeyDown call which causes the callback to run twice, which is undesirable when a user is trying to do something with the enter/space key. * docs: add alewitt2 to contributors --- .all-contributorsrc | 11 ++++++++++- README.md | 5 ++++- packages/react/src/components/Tile/Tile.tsx | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 27193f542099..3ad5829a13ef 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1277,7 +1277,7 @@ "contributions": [ "code", "doc" - ] + ] }, { "login": "amanlajpal", @@ -1297,6 +1297,15 @@ "contributions": [ "code" ] + }, + { + "login": "alewitt2", + "name": "Alex Lewitt", + "avatar_url": "https://avatars.githubusercontent.com/u/48691328?v=4", + "profile": "https://github.com/alewitt2", + "contributions": [ + "code" + ] } ], "commitConvention": "none" diff --git a/README.md b/README.md index cc8c88fc5293..4c8a7b4f3040 100644 --- a/README.md +++ b/README.md @@ -254,9 +254,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
cordesmj
πŸ’»
Aziz Chebbi
πŸ’»
MichaΕ‚ Konopski
πŸ’» -
Omkar Ajagunde
πŸ’» +
Omkar Ajagunde
πŸ’» πŸ“–
Aman Lajpal
πŸ’» πŸ“– + +
Allison Ishida
πŸ’» +
Alex Lewitt
πŸ’» diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx index 53b339a27d12..3f84d76105d4 100644 --- a/packages/react/src/components/Tile/Tile.tsx +++ b/packages/react/src/components/Tile/Tile.tsx @@ -164,7 +164,6 @@ export const ClickableTile = React.forwardRef< evt?.persist?.(); if (matches(evt, [keys.Enter, keys.Space])) { setIsSelected(!isSelected); - onKeyDown(evt); } onKeyDown(evt); } @@ -190,6 +189,7 @@ export const ClickableTile = React.forwardRef< Date: Thu, 26 Oct 2023 10:44:01 -0400 Subject: [PATCH 4/6] feat(Slug): implement AI Slug (#14998) * feat(Slug): scaffold out AI Slug component * feat(slug): add gradient tokens to themes, hover styles * feat(slug): add focus styles, cleanup storybook * fix(Theme): adjust small slug hover tokens * feat(Slug): add hollow slug * feat(Slug): initial inline styles * chore(snapshot): update snapshots * feat(Slug): add inline styles * fix(Slug): refactor inline variant * style(Slug): tweak inline styles * style(Slug): add hover styles to inline variant * style(Slug): add initial callout styles * style(Slug): tokenize gradients * style(Slug): adjust padding * chore: udpate snapshots * style(Slug): adjust padding with hollow dot, fix text colors * fix(Slug): fix hover styles when focused * refactor(Slug): remove ai from prefix --------- Co-authored-by: Andrea N. Cardona --- .../scss/components/slug/_index.scss | 9 + .../scss/components/slug/_slug.scss | 9 + .../scss/components/slug/_index.scss | 9 + .../scss/components/slug/_slug.scss | 9 + .../__snapshots__/PublicAPI-test.js.snap | 9 + .../__snapshots__/PublicAPI-test.js.snap | 3 + .../react/scss/components/slug/_index.scss | 9 + .../react/scss/components/slug/_slug.scss | 9 + packages/react/src/components/Slug/Slug.js | 136 +++++++ packages/react/src/components/Slug/Slug.mdx | 1 + .../react/src/components/Slug/Slug.stories.js | 148 ++++++++ packages/react/src/components/Slug/index.js | 10 + .../react/src/components/Slug/slug-story.scss | 36 ++ .../react/src/components/Toggletip/index.tsx | 10 +- packages/react/src/index.js | 1 + .../__snapshots__/styles-test.js.snap | 10 + packages/styles/files.js | 2 + packages/styles/scss/__tests__/theme-test.js | 9 + packages/styles/scss/components/_index.scss | 1 + .../styles/scss/components/slug/_index.scss | 4 + .../styles/scss/components/slug/_slug.scss | 346 ++++++++++++++++++ packages/themes/src/g10.js | 13 + packages/themes/src/g100.js | 16 +- packages/themes/src/g90.js | 20 +- .../__tests__/__snapshots__/v11-test.js.snap | 9 + .../src/tokens/__tests__/metadata-test.js | 36 ++ packages/themes/src/tokens/v11TokenGroup.js | 17 + packages/themes/src/white.js | 17 +- 28 files changed, 901 insertions(+), 7 deletions(-) create mode 100644 packages/carbon-components-react/scss/components/slug/_index.scss create mode 100644 packages/carbon-components-react/scss/components/slug/_slug.scss create mode 100644 packages/carbon-components/scss/components/slug/_index.scss create mode 100644 packages/carbon-components/scss/components/slug/_slug.scss create mode 100644 packages/react/scss/components/slug/_index.scss create mode 100644 packages/react/scss/components/slug/_slug.scss create mode 100644 packages/react/src/components/Slug/Slug.js create mode 100644 packages/react/src/components/Slug/Slug.mdx create mode 100644 packages/react/src/components/Slug/Slug.stories.js create mode 100644 packages/react/src/components/Slug/index.js create mode 100644 packages/react/src/components/Slug/slug-story.scss create mode 100644 packages/styles/scss/components/slug/_index.scss create mode 100644 packages/styles/scss/components/slug/_slug.scss diff --git a/packages/carbon-components-react/scss/components/slug/_index.scss b/packages/carbon-components-react/scss/components/slug/_index.scss new file mode 100644 index 000000000000..31a8cf757be0 --- /dev/null +++ b/packages/carbon-components-react/scss/components/slug/_index.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components-react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/slug'; diff --git a/packages/carbon-components-react/scss/components/slug/_slug.scss b/packages/carbon-components-react/scss/components/slug/_slug.scss new file mode 100644 index 000000000000..d6162f1062ab --- /dev/null +++ b/packages/carbon-components-react/scss/components/slug/_slug.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components-react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/slug/slug'; diff --git a/packages/carbon-components/scss/components/slug/_index.scss b/packages/carbon-components/scss/components/slug/_index.scss new file mode 100644 index 000000000000..4890b6233e19 --- /dev/null +++ b/packages/carbon-components/scss/components/slug/_index.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/slug'; diff --git a/packages/carbon-components/scss/components/slug/_slug.scss b/packages/carbon-components/scss/components/slug/_slug.scss new file mode 100644 index 000000000000..cbb522cf1937 --- /dev/null +++ b/packages/carbon-components/scss/components/slug/_slug.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/slug/slug'; diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap index f7038f43f48c..15e4371eb5ae 100644 --- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -271,6 +271,15 @@ Array [ "skeletonElement", "slow01", "slow02", + "slugBackground", + "slugBackgroundHover", + "slugCalloutAuraEnd", + "slugCalloutAuraStart", + "slugCalloutGradientBottom", + "slugCalloutGradientTop", + "slugGradient", + "slugGradientHover", + "slugHollowHover", "spacing", "spacing01", "spacing02", diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 6ed50979cacb..0e53df0816fd 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -8781,6 +8781,9 @@ Map { "as": Object { "type": "elementType", }, + "autoAlign": Object { + "type": "bool", + }, "children": Object { "type": "node", }, diff --git a/packages/react/scss/components/slug/_index.scss b/packages/react/scss/components/slug/_index.scss new file mode 100644 index 000000000000..aa5abf7f12ed --- /dev/null +++ b/packages/react/scss/components/slug/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/slug'; diff --git a/packages/react/scss/components/slug/_slug.scss b/packages/react/scss/components/slug/_slug.scss new file mode 100644 index 000000000000..fb30c2c834ec --- /dev/null +++ b/packages/react/scss/components/slug/_slug.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/slug/slug'; diff --git a/packages/react/src/components/Slug/Slug.js b/packages/react/src/components/Slug/Slug.js new file mode 100644 index 000000000000..f2ebf4ac5a30 --- /dev/null +++ b/packages/react/src/components/Slug/Slug.js @@ -0,0 +1,136 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; + +import { usePrefix } from '../../internal/usePrefix'; +import { + Toggletip, + ToggletipButton, + ToggletipContent, + ToggletipActions, +} from '../Toggletip'; + +const Slug = React.forwardRef(function Slug( + { + aiText = 'AI', + aiTextLabel, + align, + autoAlign = false, + className, + dotType, + kind, + size = 'xs', + slugContent, + }, + ref +) { + const prefix = usePrefix(); + + const slugClasses = cx(className, { + [`${prefix}--slug`]: true, + [`${prefix}--slug--hollow`]: kind === 'hollow' || dotType === 'hollow', + // Need to come up with a better name; explainable? + // Need to be able to target the non-hollow variant another way + // other than using `:not` all over the styles + [`${prefix}--slug--enabled`]: kind !== 'hollow' && dotType !== 'hollow', + }); + + const slugButtonClasses = cx({ + [`${prefix}--slug__button`]: true, + [`${prefix}--slug__button--${size}`]: size, + [`${prefix}--slug__button--${kind}`]: kind, + [`${prefix}--slug__button--inline-with-content`]: + kind === 'inline' && aiTextLabel, + }); + + return ( +
+ + + {aiText} + {aiTextLabel && ( + + {aiTextLabel} + + )} + + + {slugContent} + + + +
+ ); +}); + +Slug.propTypes = { + /** + * Specify the correct translation of the AI text + */ + aiText: PropTypes.string, + + /** + * Specify additional text to be rendered next to the AI label in the inline variant + */ + aiTextLabel: PropTypes.string, + + /** + * Specify how the popover should align with the button + */ + align: PropTypes.oneOf([ + 'top', + 'top-left', + 'top-right', + + 'bottom', + 'bottom-left', + 'bottom-right', + + 'left', + 'left-bottom', + 'left-top', + + 'right', + 'right-bottom', + 'right-top', + ]), + + /** + * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes. + */ + autoAlign: PropTypes.bool, + + /** + * Specify an optional className to be added to the AI slug + */ + className: PropTypes.string, + + /** + * Specify the type of dot that should be rendered in front of the inline variant + */ + dotType: PropTypes.oneOf(['default', 'hollow']), + + /** + * Specify the type of Slug, from the following list of types: + */ + kind: PropTypes.oneOf(['default', 'hollow', 'inline']), + + /** + * Specify the size of the button, from the following list of sizes: + */ + size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']), + + /** + * Specify the content you want rendered inside the slug ToggleTip + */ + slugContent: PropTypes.node, +}; + +export default Slug; diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx new file mode 100644 index 000000000000..e965047ad7c5 --- /dev/null +++ b/packages/react/src/components/Slug/Slug.mdx @@ -0,0 +1 @@ +Hello diff --git a/packages/react/src/components/Slug/Slug.stories.js b/packages/react/src/components/Slug/Slug.stories.js new file mode 100644 index 000000000000..5c2c7c4722b4 --- /dev/null +++ b/packages/react/src/components/Slug/Slug.stories.js @@ -0,0 +1,148 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* eslint-disable no-console */ + +import React from 'react'; + +import Slug from '.'; +import Button from '../Button'; +import mdx from './Slug.mdx'; +import './slug-story.scss'; + +export default { + title: 'Experimental/unstable__Slug', + component: Slug, + parameters: { + docs: { + page: mdx, + }, + }, +}; + +const aiContent = ( +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+); + +const content = AI was used to generate this content; + +export const Default = () => ( + <> +
+ + + + + + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+ +); + +export const Playground = (args) => ( + <> +
+ +
+ + + +); diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js new file mode 100644 index 000000000000..b93fe751c330 --- /dev/null +++ b/packages/react/src/components/Slug/index.js @@ -0,0 +1,10 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ +import Slug from './Slug'; + +export default Slug; +export { Slug }; diff --git a/packages/react/src/components/Slug/slug-story.scss b/packages/react/src/components/Slug/slug-story.scss new file mode 100644 index 000000000000..51e6c697d200 --- /dev/null +++ b/packages/react/src/components/Slug/slug-story.scss @@ -0,0 +1,36 @@ +@use '@carbon/styles/scss/type'; +@use '@carbon/styles/scss/theme'; + +.slug-container { + display: flex; + margin-bottom: 6rem; + align-items: flex-start; + + & > * { + margin-left: 2rem; + } +} + +.slug-container .cds--toggletip-content p { + @include type.type-style('body-compact-01'); +} + +.slug-container .cds--toggletip-content .bold { + font-weight: 600; +} + +.slug-container .cds--toggletip-content .secondary { + color: theme.$text-secondary; +} + +.slug-container .cds--toggletip-content h1 { + margin-bottom: 1rem; +} + +.slug-container .cds--toggletip-content hr { + border: 0; + height: 1px; + background: theme.$border-subtle; + margin-top: 2rem; + margin-bottom: 2rem; +} diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx index f63c66391c35..83e154064617 100644 --- a/packages/react/src/components/Toggletip/index.tsx +++ b/packages/react/src/components/Toggletip/index.tsx @@ -82,6 +82,7 @@ function useToggletip() { interface ToggletipProps { align?: PopoverAlignment | undefined; as?: E | undefined; + autoAlign?: boolean | undefined; className?: string | undefined; children?: ReactNode; defaultOpen?: boolean | undefined; @@ -95,6 +96,7 @@ interface ToggletipProps { export function Toggletip({ align, as, + autoAlign, className: customClassName, children, defaultOpen = false, @@ -173,7 +175,8 @@ export function Toggletip({ open={open} onKeyDown={onKeyDown} onBlur={handleBlur} - ref={ref}> + ref={ref} + autoAlign={autoAlign}> {children} @@ -208,6 +211,11 @@ Toggletip.propTypes = { */ as: PropTypes.elementType, + /** + * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes. + */ + autoAlign: PropTypes.bool, + /** * Custom children to be rendered as the content of the label */ diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 588ad07ad0ec..14e20ee01f13 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -298,3 +298,4 @@ export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip'; export { GlobalTheme, Theme, useTheme } from './components/Theme'; export { usePrefix } from './internal/usePrefix'; export { useIdPrefix } from './internal/useIdPrefix'; +export { Slug as unstable__Slug } from './components/Slug'; diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap index a617c2aa9aeb..60aebb2849cd 100644 --- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap +++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap @@ -617,6 +617,16 @@ Array [ "importPath": "@carbon/styles/scss/components/slider/slider", "relativePath": "scss/components/slider/slider", }, + Object { + "filepath": "scss/components/slug/_index.scss", + "importPath": "@carbon/styles/scss/components/slug", + "relativePath": "scss/components/slug", + }, + Object { + "filepath": "scss/components/slug/_slug.scss", + "importPath": "@carbon/styles/scss/components/slug/slug", + "relativePath": "scss/components/slug/slug", + }, Object { "filepath": "scss/components/stack/_index.scss", "importPath": "@carbon/styles/scss/components/stack", diff --git a/packages/styles/files.js b/packages/styles/files.js index 54f7afee4156..54d722c22a6a 100644 --- a/packages/styles/files.js +++ b/packages/styles/files.js @@ -142,6 +142,8 @@ const files = [ 'scss/components/skeleton-styles/_skeleton-styles.scss', 'scss/components/slider/_index.scss', 'scss/components/slider/_slider.scss', + 'scss/components/slug/_index.scss', + 'scss/components/slug/_slug.scss', 'scss/components/stack/_index.scss', 'scss/components/stack/_stack.scss', 'scss/components/structured-list/_index.scss', diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js index 8fc597209eaf..f9641a633e5d 100644 --- a/packages/styles/scss/__tests__/theme-test.js +++ b/packages/styles/scss/__tests__/theme-test.js @@ -127,6 +127,15 @@ describe('@carbon/styles/scss/theme', () => { "support-caution-major", "support-caution-minor", "support-caution-undefined", + "slug-background", + "slug-gradient", + "slug-background-hover", + "slug-gradient-hover", + "slug-hollow-hover", + "slug-callout-gradient-top", + "slug-callout-gradient-bottom", + "slug-callout-aura-start", + "slug-callout-aura-end", "highlight", "overlay", "toggle-off", diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss index b8ebb05f418a..9d5f88bb42db 100644 --- a/packages/styles/scss/components/_index.scss +++ b/packages/styles/scss/components/_index.scss @@ -58,6 +58,7 @@ @use 'select'; @use 'skeleton-styles'; @use 'slider'; +@use 'slug'; @use 'stack'; @use 'structured-list'; @use 'tabs'; diff --git a/packages/styles/scss/components/slug/_index.scss b/packages/styles/scss/components/slug/_index.scss new file mode 100644 index 000000000000..6cca55ef4a50 --- /dev/null +++ b/packages/styles/scss/components/slug/_index.scss @@ -0,0 +1,4 @@ +@forward 'slug'; +@use 'slug'; + +@include slug.slug; diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss new file mode 100644 index 000000000000..fd625e4a4f0f --- /dev/null +++ b/packages/styles/scss/components/slug/_slug.scss @@ -0,0 +1,346 @@ +@use '../../config' as *; +@use '../../colors' as *; +@use '../../motion' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert'; + +$sizes: ( + mini: ( + height: convert.to-rem(16px), + width: convert.to-rem(16px), + font-size: convert.to-rem(9px), + line-height: convert.to-rem(12px), + background: $slug-background, + ), + 2xs: ( + height: convert.to-rem(20px), + width: convert.to-rem(20px), + font-size: convert.to-rem(12px), + line-height: convert.to-rem(16px), + background: $slug-background, + ), + xs: ( + height: convert.to-rem(24px), + width: convert.to-rem(24px), + font-size: convert.to-rem(12px), + line-height: convert.to-rem(16px), + background: $slug-gradient, + ), + sm: ( + height: convert.to-rem(32px), + width: convert.to-rem(32px), + font-size: convert.to-rem(16px), + line-height: convert.to-rem(21px), + background: $slug-gradient, + ), + md: ( + height: convert.to-rem(40px), + width: convert.to-rem(40px), + font-size: convert.to-rem(16px), + line-height: convert.to-rem(21px), + background: $slug-gradient, + ), + lg: ( + height: convert.to-rem(48px), + width: convert.to-rem(48px), + font-size: convert.to-rem(16px), + line-height: convert.to-rem(21px), + background: $slug-gradient, + ), + xl: ( + height: convert.to-rem(64px), + width: convert.to-rem(64px), + font-size: convert.to-rem(20px), + line-height: convert.to-rem(26px), + background: $slug-gradient, + ), +); + +/// Slug styles +/// @access public +/// @group slider +@mixin slug { + .#{$prefix}--slug { + display: flex; + } + + .#{$prefix}--slug .#{$prefix}--slug__button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + color: $text-inverse; + font-weight: 600; + transition: color $duration-fast-01 motion(entrance, productive), + border-color $duration-fast-01 motion(entrance, productive), + box-shadow $duration-fast-01 motion(entrance, productive); + + @each $group, $size in $sizes { + // Create a class for each size slug + &--#{$group} { + @each $property, $value in $size { + // Set correct properties for each size + #{$property}: $value; + } + } + } + } + + .#{$prefix}--slug .#{$prefix}--slug__button:focus { + box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset; + outline: none; + } + + .#{$prefix}--slug__text { + position: relative; + z-index: 1; + } + + // pseudo element to animate the hover transition + .#{$prefix}--slug__button::before { + position: absolute; + background: $slug-gradient-hover; + block-size: 100%; + content: ''; + inline-size: 100%; + opacity: 0; + transition: opacity $duration-fast-01 motion(entrance, productive); + } + + .#{$prefix}--slug__button:hover::before { + opacity: 1; + } + + // Focus styles + .#{$prefix}--slug .#{$prefix}--slug__button:focus::before { + block-size: calc(100% - 6px); + inline-size: calc(100% - 6px); + } + + .#{$prefix}--slug__button.#{$prefix}--slug__button--mini::before, + .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs::before { + background: $slug-background-hover; + } + + .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus, + .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus { + box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset; + } + + .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus::before, + .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus::before { + block-size: calc(100% - 4px); + inline-size: calc(100% - 4px); + } + + // Hollow slug + // Only allow mini, 2xs, and xs sizes + .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--sm, + .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--md, + .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--lg, + .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--xl { + block-size: convert.to-rem(24px); + font-size: convert.to-rem(12px); + inline-size: convert.to-rem(24px); + line-height: convert.to-rem(16px); + } + + .#{$prefix}--slug__button--hollow::before { + display: none; + } + + .#{$prefix}--slug .#{$prefix}--slug__button--hollow { + border: 1px solid $border-inverse; + background: transparent; + color: $text-primary; + } + + .#{$prefix}--slug__button--hollow:hover { + border-color: $slug-hollow-hover; + color: $slug-hollow-hover; + } + + .#{$prefix}--slug__button--hollow:focus { + border-color: $focus; + box-shadow: inset 0 0 0 1px $focus; + } + + // Inline slug + .#{$prefix}--slug .#{$prefix}--slug__button--inline { + border: 1px solid transparent; + border-radius: convert.to-rem(1px); + background: transparent; + block-size: initial; + color: $text-primary; + font-size: convert.to-rem(14px); + inline-size: initial; + line-height: initial; + padding-inline: convert.to-rem(4px); + } + + .#{$prefix}--slug__button--inline::before { + display: none; + } + + .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus { + border-color: $focus; + box-shadow: none; + } + + .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover { + border-color: $icon-secondary; + color: $text-secondary; + } + + .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus:hover { + border-color: $focus; + } + + .#{$prefix}--slug + .#{$prefix}--slug__button--inline:hover + .#{$prefix}--slug__text::before { + background: $icon-secondary; + } + + .#{$prefix}--slug--hollow + .#{$prefix}--slug__button--inline:hover + .#{$prefix}--slug__text::before { + background: transparent; + box-shadow: inset 0 0 0 1px $icon-secondary; + } + + .#{$prefix}--slug__button--inline .#{$prefix}--slug__text { + padding-inline-start: convert.to-rem(8px); + } + + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg + .#{$prefix}--slug__text { + padding-inline-start: convert.to-rem(12px); + } + + .#{$prefix}--slug__button--inline .#{$prefix}--slug__text::before { + position: absolute; + display: inline-block; + background: $icon-primary; + block-size: convert.to-rem(4px); + content: ''; + inline-size: convert.to-rem(4px); + inset-block-start: 50%; + inset-inline-start: 0; + opacity: 1; + transform: translateY(-50%); + transition: background $duration-fast-01 motion(entrance, productive), + box-shadow $duration-fast-01 motion(entrance, productive); + } + + // Inline slug hollow dot + .#{$prefix}--slug--hollow .#{$prefix}--slug__text::before { + background: transparent; + block-size: convert.to-rem(6px); + box-shadow: inset 0 0 0 1px $icon-primary; + inline-size: convert.to-rem(6px); + } + + .#{$prefix}--slug--hollow + .#{$prefix}--slug__button--sm + .#{$prefix}--slug__text, + .#{$prefix}--slug--hollow + .#{$prefix}--slug__button--md + .#{$prefix}--slug__text { + padding-inline-start: convert.to-rem(9px); + } + + .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before, + .#{$prefix}--slug--hollow + .#{$prefix}--slug__button--lg + .#{$prefix}--slug__text::before { + block-size: convert.to-rem(8px); + inline-size: convert.to-rem(8px); + } + + // Only allow sm, md, and lg sizes + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini, + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini + .#{$prefix}--slug__additional-text, + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--2xs, + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--2xs + .#{$prefix}--slug__additional-text, + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xs, + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xs + .#{$prefix}--slug__additional-text, + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--sm, + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--sm + .#{$prefix}--slug__additional-text { + font-size: convert.to-rem(12px); + } + + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg, + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xl { + font-size: convert.to-rem(16px); + } + + // Inline slug with text + .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content { + border: 1px solid $border-inverse; + padding-block: convert.to-rem(2px); + padding-inline: convert.to-rem(8px); + } + + .#{$prefix}--slug__button--inline-with-content + .#{$prefix}--slug__additional-text { + @include type-style('body-compact-02'); + + padding-inline-start: convert.to-rem(4px); + } + + .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--md + .#{$prefix}--slug__additional-text { + font-size: convert.to-rem(14px); + } + + .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus { + box-shadow: inset 0 0 0 1px $focus; + } + + // Default callout styles + .#{$prefix}--slug.#{$prefix}--slug--hollow .#{$prefix}--toggletip-content { + row-gap: 0; + } + + // Slug callout styles + .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--popover-content { + border: 1px solid $border-subtle; + border-radius: 16px; + // 84px seems to make this fully opaque? + backdrop-filter: blur(25px); + background: linear-gradient( + 0deg, + $slug-callout-aura-start 0%, + $slug-callout-aura-end 33%, + transparent 100% + ), + linear-gradient( + 180deg, + $slug-callout-gradient-top 0%, + $slug-callout-gradient-bottom 100% + ) + rgba(0, 0, 0, 0.01); + // box-shadow seems to match the spec better + // than the same values plugged into `drop-shadow` + // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2)); + box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2); + color: $text-primary; + min-inline-size: convert.to-rem(280px); + } + + .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--popover-caret { + background: $border-subtle; + } + + .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--toggletip-content { + padding-block-end: convert.to-rem(80px); + padding-block-start: convert.to-rem(32px); + padding-inline: convert.to-rem(32px); + } +} diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js index e4b052420d76..981f780163ad 100644 --- a/packages/themes/src/g10.js +++ b/packages/themes/src/g10.js @@ -7,6 +7,7 @@ import { // Blue + blue10, blue20, blue30, blue40, @@ -40,6 +41,7 @@ import { // Constants white, whiteHover, + rgba, } from '@carbon/colors'; import { adjustAlpha } from './tools'; @@ -200,6 +202,17 @@ export const overlay = 'rgba(22, 22, 22, 0.5)'; export const toggleOff = gray50; export const shadow = 'rgba(0, 0, 0, 0.3)'; +// AI +export const slugBackground = gray70; +export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rgba(${white}, 0) 100%)`; +export const slugBackgroundHover = gray60; +export const slugGradientHover = `${gray100} linear-gradient(135deg, ${gray20Hover} 0%, rgba(${white}, 0) 100%)`; +export const slugHollowHover = gray80Hover; +export const slugCalloutGradientTop = rgba(gray10, 0.85); +export const slugCalloutGradientBottom = rgba(gray20, 0.85); +export const slugCalloutAuraStart = rgba(blue10, 0.6); +export const slugCalloutAuraEnd = rgba(white, 0); + export { // Type caption01, diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js index 23d342a6eebc..8e940589c1e6 100644 --- a/packages/themes/src/g100.js +++ b/packages/themes/src/g100.js @@ -7,6 +7,7 @@ import { // Blue + blue20, blue40, blue60, blue70, @@ -14,7 +15,10 @@ import { // Gray gray10, + gray10Hover, + gray20, gray30, + gray30Hover, gray40, gray50, gray60, @@ -46,7 +50,6 @@ import { // Tools rgba, - gray10Hover, } from '@carbon/colors'; import { adjustLightness, adjustAlpha } from './tools'; @@ -207,6 +210,17 @@ export const overlay = rgba(black, 0.65); export const toggleOff = gray60; export const shadow = rgba(black, 0.8); +// AI +export const slugBackground = gray30; +export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgba(${white}, 0) 100%)`; +export const slugBackgroundHover = gray20; +export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`; +export const slugHollowHover = gray30Hover; +export const slugCalloutGradientTop = rgba(gray100, 0.85); +export const slugCalloutGradientBottom = rgba(gray90, 0.85); +export const slugCalloutAuraStart = rgba(blue20, 0.2); +export const slugCalloutAuraEnd = rgba(gray100, 0); + export { // Type caption01, diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js index c980dab52609..3475b9edf253 100644 --- a/packages/themes/src/g90.js +++ b/packages/themes/src/g90.js @@ -7,13 +7,17 @@ import { // Blue + blue20, blue40, blue60, blue70, // Gray gray10, + gray10Hover, + gray20, gray30, + gray30Hover, gray40, gray50, gray50Hover, @@ -22,7 +26,9 @@ import { gray70, gray70Hover, gray80, + gray80Hover, gray90, + gray90Hover, gray100, // Support @@ -44,9 +50,6 @@ import { // Tools rgba, - gray90Hover, - gray10Hover, - gray80Hover, } from '@carbon/colors'; import { adjustAlpha } from './tools'; @@ -207,6 +210,17 @@ export const overlay = rgba(black, 0.65); export const toggleOff = gray50; export const shadow = rgba(black, 0.8); +// AI +export const slugBackground = gray30; +export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgba(${white}, 0) 100%)`; +export const slugBackgroundHover = gray20; +export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`; +export const slugHollowHover = gray30Hover; +export const slugCalloutGradientTop = rgba(gray100, 0.85); +export const slugCalloutGradientBottom = rgba(gray90, 0.85); +export const slugCalloutAuraStart = rgba(blue20, 0.2); +export const slugCalloutAuraEnd = rgba(gray100, 0); + export { // Type caption01, diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap index 0a0e4b075078..9beb5856cf4b 100644 --- a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap +++ b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap @@ -238,6 +238,15 @@ Array [ "support-caution-major", "support-caution-minor", "support-caution-undefined", + "slug-background", + "slug-gradient", + "slug-background-hover", + "slug-gradient-hover", + "slug-hollow-hover", + "slug-callout-gradient-top", + "slug-callout-gradient-bottom", + "slug-callout-aura-start", + "slug-callout-aura-end", "highlight", "overlay", "toggle-off", diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js index cd5790f3602b..2d82f7afdb34 100644 --- a/packages/themes/src/tokens/__tests__/metadata-test.js +++ b/packages/themes/src/tokens/__tests__/metadata-test.js @@ -925,6 +925,42 @@ test('metadata', () => { "name": "support-caution-undefined", "type": "color", }, + Object { + "name": "slug-background", + "type": "color", + }, + Object { + "name": "slug-gradient", + "type": "color", + }, + Object { + "name": "slug-background-hover", + "type": "color", + }, + Object { + "name": "slug-gradient-hover", + "type": "color", + }, + Object { + "name": "slug-hollow-hover", + "type": "color", + }, + Object { + "name": "slug-callout-gradient-top", + "type": "color", + }, + Object { + "name": "slug-callout-gradient-bottom", + "type": "color", + }, + Object { + "name": "slug-callout-aura-start", + "type": "color", + }, + Object { + "name": "slug-callout-aura-end", + "type": "color", + }, Object { "name": "highlight", "type": "color", diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js index 1793c14eb4bf..dd11e68e3f1c 100644 --- a/packages/themes/src/tokens/v11TokenGroup.js +++ b/packages/themes/src/tokens/v11TokenGroup.js @@ -341,6 +341,22 @@ export const contextual = TokenGroup.create({ ], }); +export const ai = TokenGroup.create({ + name: 'AI', + properties: ['background'], + tokens: [ + 'slug-background', + 'slug-gradient', + 'slug-background-hover', + 'slug-gradient-hover', + 'slug-hollow-hover', + 'slug-callout-gradient-top', + 'slug-callout-gradient-bottom', + 'slug-callout-aura-start', + 'slug-callout-aura-end', + ], +}); + export const group = TokenGroup.create({ name: 'All', tokens: [ @@ -359,6 +375,7 @@ export const group = TokenGroup.create({ link, icon, support, + ai, // Misc { diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js index 4c81a7758835..e4e4b818c879 100644 --- a/packages/themes/src/white.js +++ b/packages/themes/src/white.js @@ -7,6 +7,7 @@ import { // Blue + blue10, blue20, blue30, blue40, @@ -15,6 +16,7 @@ import { // Gray gray10, + gray10Hover, gray20, gray20Hover, gray30, @@ -23,6 +25,7 @@ import { gray60, gray70, gray80, + gray80Hover, gray100, // Support @@ -38,8 +41,7 @@ import { // Constants white, whiteHover, - gray80Hover, - gray10Hover, + rgba, } from '@carbon/colors'; import { adjustAlpha } from './tools'; @@ -200,6 +202,17 @@ export const overlay = 'rgba(22, 22, 22, 0.5)'; export const toggleOff = gray50; export const shadow = 'rgba(0, 0, 0, 0.3)'; +// AI +export const slugBackground = gray70; +export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rgba(${white}, 0) 100%)`; +export const slugBackgroundHover = gray60; +export const slugGradientHover = `${gray100} linear-gradient(135deg, ${gray20Hover} 0%, rgba(${white}, 0) 100%)`; +export const slugHollowHover = gray80Hover; +export const slugCalloutGradientTop = rgba(gray10, 0.85); +export const slugCalloutGradientBottom = rgba(gray20, 0.85); +export const slugCalloutAuraStart = rgba(blue10, 0.6); +export const slugCalloutAuraEnd = rgba(white, 0); + // Type export { caption01, From 7d2cc285050fedaa689d44427f23816e14395e78 Mon Sep 17 00:00:00 2001 From: Rajat Date: Thu, 26 Oct 2023 22:27:57 +0530 Subject: [PATCH 5/6] fix: useLayoutEffect SSR warning fix (#15025) --- packages/react/src/components/DataTable/Table.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/DataTable/Table.tsx b/packages/react/src/components/DataTable/Table.tsx index 9e82aaf81856..4eac61c1db49 100644 --- a/packages/react/src/components/DataTable/Table.tsx +++ b/packages/react/src/components/DataTable/Table.tsx @@ -10,7 +10,6 @@ import React, { PropsWithChildren, useRef, useCallback, - useLayoutEffect, useState, } from 'react'; import PropTypes from 'prop-types'; @@ -19,6 +18,7 @@ import debounce from 'lodash.debounce'; import { usePrefix } from '../../internal/usePrefix'; import { TableContext } from './TableContext'; import { useWindowEvent } from '../../internal/useEvent'; +import useIsomorphicEffect from '../../internal/useIsomorphicEffect'; interface TableProps { experimentalAutoAlign?: boolean; @@ -203,7 +203,7 @@ export const Table = ({ useWindowEvent('resize', debouncedSetTabIndex); - useLayoutEffect(() => { + useIsomorphicEffect(() => { setTabIndex(); }, [setTabIndex]); @@ -218,7 +218,7 @@ export const Table = ({ }); } - useLayoutEffect(() => { + useIsomorphicEffect(() => { setTableAlignment(); }, [setTableAlignment, size]); From 34c12d69d547b78d3f9eeeea3384b5e265b336ac Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Thu, 26 Oct 2023 15:00:36 -0300 Subject: [PATCH 6/6] fix: fixed open state with auto size (#14938) --- .../styles/scss/components/ui-shell/side-nav/_side-nav.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss index 1287cd00bf16..51ca4d49b4f2 100644 --- a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss +++ b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss @@ -180,7 +180,7 @@ } .#{$prefix}--side-nav__item--large { - block-size: mini-units(6); + block-size: auto; } //----------------------------------------------------------------------------