diff --git a/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png index 24a93416b37..782e83b5e64 100644 Binary files a/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/component/firefox/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/firefox/DBBadge-should-match-screenshot.png index 9e5675ef818..92978f0d70b 100644 Binary files a/__snapshots__/badge/component/firefox/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/component/firefox/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png index 24a93416b37..782e83b5e64 100644 Binary files a/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/patternhub/badge-overview-should-match-screenshot.png b/__snapshots__/badge/patternhub/badge-overview-should-match-screenshot.png index 204388a0c51..84643c2e3f8 100644 Binary files a/__snapshots__/badge/patternhub/badge-overview-should-match-screenshot.png and b/__snapshots__/badge/patternhub/badge-overview-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index a8a0e003dfe..e014d5143b8 100644 Binary files a/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index 9bd34b16a5d..9f0b7af7152 100644 --- a/__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -3,9 +3,9 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Size arrow_up_right\" / \"" - text: (Default) Small Medium - link "Content arrow_up_right\" / \"" diff --git a/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index f954a4996ab..72d64254e01 100644 Binary files a/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index 9bd34b16a5d..9f0b7af7152 100644 --- a/__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -3,9 +3,9 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Size arrow_up_right\" / \"" - text: (Default) Small Medium - link "Content arrow_up_right\" / \"" diff --git a/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index a50625ad17e..bbc4475bfb4 100644 Binary files a/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/firefox/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/firefox/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index c0ebbfb9291..60931cb68f6 100644 --- a/__snapshots__/badge/showcase/firefox/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/firefox/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -3,9 +3,9 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Size arrow_up_right\" / \"" - text: (Default) Small Medium - link "Content arrow_up_right\" / \"" diff --git a/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index 9c3c5c0eeaa..6b60d966278 100644 Binary files a/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index 9bd34b16a5d..9f0b7af7152 100644 --- a/__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -3,9 +3,9 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Size arrow_up_right\" / \"" - text: (Default) Small Medium - link "Content arrow_up_right\" / \"" diff --git a/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index 7c4b264be86..936f177d3ff 100644 Binary files a/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index 9bd34b16a5d..9f0b7af7152 100644 --- a/__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -3,9 +3,9 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Size arrow_up_right\" / \"" - text: (Default) Small Medium - link "Content arrow_up_right\" / \"" diff --git a/__snapshots__/badge/showcase/webkit/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/webkit/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index 6e8c6ac9b37..787b2ca1db1 100644 Binary files a/__snapshots__/badge/showcase/webkit/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/webkit/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index 9bd34b16a5d..9f0b7af7152 100644 --- a/__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -3,9 +3,9 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Size arrow_up_right\" / \"" - text: (Default) Small Medium - link "Content arrow_up_right\" / \"" diff --git a/__snapshots__/foundations/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/__snapshots__/foundations/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png index 78aaf842685..3030a530622 100644 Binary files a/__snapshots__/foundations/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png and b/__snapshots__/foundations/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png differ diff --git a/__snapshots__/foundations/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/__snapshots__/foundations/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png index db12982707f..67fe6d03a95 100644 Binary files a/__snapshots__/foundations/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png and b/__snapshots__/foundations/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png differ diff --git a/__snapshots__/foundations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/__snapshots__/foundations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png index 78321014aab..8f522ffc512 100644 Binary files a/__snapshots__/foundations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png and b/__snapshots__/foundations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-button.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-button.png index 6e7f7640cb8..2616cd3c785 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-button.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-button.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png index 6227a51bbbf..a51170ee71a 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png index abd2b32a07f..2a846b1fc0e 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-link.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-link.png index 6e7f7640cb8..2616cd3c785 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-link.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-link.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-radio-checked.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-radio-checked.png index 6e7f7640cb8..1cd4992d2a7 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-radio-checked.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-radio-checked.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-radio.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-radio.png index abd2b32a07f..2a846b1fc0e 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-radio.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-radio.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-critical.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-critical.png index f1c022566fa..f198f31d5c2 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-critical.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-critical.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-informational.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-informational.png index 8879324c29e..760eecba522 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-informational.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-informational.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-successful.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-successful.png index 1774ccc1fac..df3f32c901c 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-successful.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-successful.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-warning.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-warning.png index 85f307745a8..8d4bc2a895c 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-warning.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-semantic-warning.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot.png index 6e7f7640cb8..2616cd3c785 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-button.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-button.png index 56bb54c1b64..f0aa547d552 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-button.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-button.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png index a5de37ceea9..4dcb57f878a 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png index ef1c3e77217..d4f82499935 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-link.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-link.png index 56bb54c1b64..f0aa547d552 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-link.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-link.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-radio-checked.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-radio-checked.png index 56bb54c1b64..f5b33a6a475 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-radio-checked.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-radio-checked.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-radio.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-radio.png index ef1c3e77217..d4f82499935 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-radio.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-radio.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-critical.png b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-critical.png index ad86570e550..3a9109b40e6 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-critical.png and b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-critical.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-informational.png b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-informational.png index 86b64b50615..896bd7ac242 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-informational.png and b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-informational.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-successful.png b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-successful.png index 0e818a421e6..6d3318d6ecd 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-successful.png and b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-successful.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-warning.png b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-warning.png index cbaca03a77c..9f8e9412c0e 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-warning.png and b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot-for-semantic-warning.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot.png b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot.png index 56bb54c1b64..f0aa547d552 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot.png and b/__snapshots__/tag/component/firefox/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-button.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-button.png index 6e7f7640cb8..2616cd3c785 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-button.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-button.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png index 6227a51bbbf..a51170ee71a 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png index abd2b32a07f..2a846b1fc0e 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-link.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-link.png index 6e7f7640cb8..2616cd3c785 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-link.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-link.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio-checked.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio-checked.png index 6e7f7640cb8..1cd4992d2a7 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio-checked.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio-checked.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio.png index abd2b32a07f..2a846b1fc0e 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-critical.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-critical.png index f1c022566fa..f198f31d5c2 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-critical.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-critical.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-informational.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-informational.png index 8879324c29e..760eecba522 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-informational.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-informational.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-successful.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-successful.png index 1774ccc1fac..df3f32c901c 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-successful.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-successful.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-warning.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-warning.png index 85f307745a8..8d4bc2a895c 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-warning.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-semantic-warning.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot.png index 6e7f7640cb8..2616cd3c785 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/patternhub/tag-overview-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-overview-should-match-screenshot.png index 4369cef0acd..91ee1c27c52 100644 Binary files a/__snapshots__/tag/patternhub/tag-overview-should-match-screenshot.png and b/__snapshots__/tag/patternhub/tag-overview-should-match-screenshot.png differ diff --git a/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png index 280d4ab2eae..49e5ae76bfd 100644 Binary files a/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png and b/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/chromium-highContrast/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/chromium-highContrast/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png index bf807d2934e..f15ceb05a16 100644 Binary files a/__snapshots__/tag/showcase/chromium-highContrast/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/chromium-highContrast/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml b/__snapshots__/tag/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml index 2b137f3ba60..2b75fb6b4cc 100644 --- a/__snapshots__/tag/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/tag/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml @@ -3,43 +3,67 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Behaviour arrow_up_right\" / \"" - group "Behaviour": - - text: (Default) Static - - button "Interactive Button" - - link "Interactive Link" - - checkbox "Interactive Checkbox" - - text: Interactive Checkbox - - radio "Interactive Radio 1" - - text: Interactive Radio 1 - - radio "Interactive Radio 2" - - text: Interactive Radio 2 Removeable + - text: (Default) Static Removable - button "cross\" / \" Remove tag" - - link "State arrow_up_right\" / \"" - - group "State": - - checkbox "(Default) Unchecked" - - text: (Default) Unchecked - - checkbox "Checked" [checked] - - text: Checked - - checkbox "Disabled" [checked] [disabled] - - text: Disabled - - link "Content arrow_up_right\" / \"" - - text: (Default) Text x_placeholder" / " Icon x_placeholder" / " Icon & Text + - button "Interactive (Button)" + - link "Interactive (Link)" + - checkbox "Interactive (Checkbox) circle\" / \"" + - text: Interactive (Checkbox) circle" / " + - radio "Interactive (Radio) circle\" / \"" + - text: Interactive (Radio) circle" / " + - link "Checked arrow_up_right\" / \"" + - group "Checked": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True check_circle\" / \"" [checked] + - text: True check_circle" / " + - link "Disabled arrow_up_right\" / \"" + - group "Disabled": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True circle\" / \"" [disabled] + - text: True circle" / " + - link "Show Icon arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " True + - link "No Text arrow_up_right\" / \"" + - text: x_placeholder" / " (Default) False x_placeholder" / " True + - link "Show Slot arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " Swap Slot True + - link "Show Check State arrow_up_right\" / \"" + - checkbox "(Default) True circle\" / \"" + - text: (Default) True circle" / " + - checkbox "False" + - text: "False" - link "Overflow arrow_up_right\" / \"" - - text: (Default) No Overflow With Overflow (max-width) - - link "Example arrow_up_right\" / \"" - - group "Example": + - text: (Default) False True - lorem ipsum dolor + - link "Example Strong arrow_up_right\" / \"" + - group "Example Strong": - text: x_placeholder" / " - button "Interactive Strong Button with Icon" - text: x_placeholder" / " - link "Interactive Strong Link with Icon" - text: x_placeholder" / " - - checkbox "Interactive Strong Checkbox with Icon" - - text: Interactive Strong Checkbox with Icon x_placeholder" / " - - radio "Interactive Strong Radio 1 with Icon" - - text: Interactive Strong Radio 1 with Icon x_placeholder" / " - - radio "Interactive Strong Radio 2 with Icon" - - text: Interactive Strong Radio 2 with Icon \ No newline at end of file + - checkbox "Interactive Strong Checkbox with Icon circle\" / \"" + - text: Interactive Strong Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 1 with Icon circle\" / \"" + - text: Interactive Strong Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 2 with Icon circle\" / \"" + - text: Interactive Strong Radio 2 with Icon circle" / " + - link "Example Origin arrow_up_right\" / \"" + - group "Example Origin": + - text: x_placeholder" / " + - button "Interactive Origin Button with Icon" + - text: x_placeholder" / " + - link "Interactive Origin Link with Icon" + - text: x_placeholder" / " + - checkbox "Interactive Origin Checkbox with Icon circle\" / \"" + - text: Interactive Origin Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 1 with Icon circle\" / \"" + - text: Interactive Origin Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 2 with Icon circle\" / \"" + - text: Interactive Origin Radio 2 with Icon circle" / " \ No newline at end of file diff --git a/__snapshots__/tag/showcase/chromium/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/chromium/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png index 5dce7f02b74..8604a8f7a31 100644 Binary files a/__snapshots__/tag/showcase/chromium/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/chromium/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/chromium/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml b/__snapshots__/tag/showcase/chromium/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml index 2b137f3ba60..2b75fb6b4cc 100644 --- a/__snapshots__/tag/showcase/chromium/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/tag/showcase/chromium/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml @@ -3,43 +3,67 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Behaviour arrow_up_right\" / \"" - group "Behaviour": - - text: (Default) Static - - button "Interactive Button" - - link "Interactive Link" - - checkbox "Interactive Checkbox" - - text: Interactive Checkbox - - radio "Interactive Radio 1" - - text: Interactive Radio 1 - - radio "Interactive Radio 2" - - text: Interactive Radio 2 Removeable + - text: (Default) Static Removable - button "cross\" / \" Remove tag" - - link "State arrow_up_right\" / \"" - - group "State": - - checkbox "(Default) Unchecked" - - text: (Default) Unchecked - - checkbox "Checked" [checked] - - text: Checked - - checkbox "Disabled" [checked] [disabled] - - text: Disabled - - link "Content arrow_up_right\" / \"" - - text: (Default) Text x_placeholder" / " Icon x_placeholder" / " Icon & Text + - button "Interactive (Button)" + - link "Interactive (Link)" + - checkbox "Interactive (Checkbox) circle\" / \"" + - text: Interactive (Checkbox) circle" / " + - radio "Interactive (Radio) circle\" / \"" + - text: Interactive (Radio) circle" / " + - link "Checked arrow_up_right\" / \"" + - group "Checked": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True check_circle\" / \"" [checked] + - text: True check_circle" / " + - link "Disabled arrow_up_right\" / \"" + - group "Disabled": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True circle\" / \"" [disabled] + - text: True circle" / " + - link "Show Icon arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " True + - link "No Text arrow_up_right\" / \"" + - text: x_placeholder" / " (Default) False x_placeholder" / " True + - link "Show Slot arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " Swap Slot True + - link "Show Check State arrow_up_right\" / \"" + - checkbox "(Default) True circle\" / \"" + - text: (Default) True circle" / " + - checkbox "False" + - text: "False" - link "Overflow arrow_up_right\" / \"" - - text: (Default) No Overflow With Overflow (max-width) - - link "Example arrow_up_right\" / \"" - - group "Example": + - text: (Default) False True - lorem ipsum dolor + - link "Example Strong arrow_up_right\" / \"" + - group "Example Strong": - text: x_placeholder" / " - button "Interactive Strong Button with Icon" - text: x_placeholder" / " - link "Interactive Strong Link with Icon" - text: x_placeholder" / " - - checkbox "Interactive Strong Checkbox with Icon" - - text: Interactive Strong Checkbox with Icon x_placeholder" / " - - radio "Interactive Strong Radio 1 with Icon" - - text: Interactive Strong Radio 1 with Icon x_placeholder" / " - - radio "Interactive Strong Radio 2 with Icon" - - text: Interactive Strong Radio 2 with Icon \ No newline at end of file + - checkbox "Interactive Strong Checkbox with Icon circle\" / \"" + - text: Interactive Strong Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 1 with Icon circle\" / \"" + - text: Interactive Strong Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 2 with Icon circle\" / \"" + - text: Interactive Strong Radio 2 with Icon circle" / " + - link "Example Origin arrow_up_right\" / \"" + - group "Example Origin": + - text: x_placeholder" / " + - button "Interactive Origin Button with Icon" + - text: x_placeholder" / " + - link "Interactive Origin Link with Icon" + - text: x_placeholder" / " + - checkbox "Interactive Origin Checkbox with Icon circle\" / \"" + - text: Interactive Origin Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 1 with Icon circle\" / \"" + - text: Interactive Origin Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 2 with Icon circle\" / \"" + - text: Interactive Origin Radio 2 with Icon circle" / " \ No newline at end of file diff --git a/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png index 2bb150f0792..bd775760ae8 100644 Binary files a/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/firefox/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml b/__snapshots__/tag/showcase/firefox/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml index a6de34350ef..f246cea944b 100644 --- a/__snapshots__/tag/showcase/firefox/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/tag/showcase/firefox/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml @@ -3,40 +3,61 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Behaviour arrow_up_right\" / \"" - group "Behaviour": - - text: (Default) Static - - button "Interactive Button" - - link "Interactive Link" - - checkbox "Interactive Checkbox" - - text: Interactive Checkbox - - radio "Interactive Radio 1" - - text: Interactive Radio 1 - - radio "Interactive Radio 2" - - text: Interactive Radio 2 Removeable + - text: (Default) Static Removable - button "Remove tag" - - link "State arrow_up_right\" / \"" - - group "State": - - checkbox "(Default) Unchecked" - - text: (Default) Unchecked - - checkbox "Checked" [checked] - - text: Checked - - checkbox "Disabled" [checked] [disabled] - - text: Disabled - - link "Content arrow_up_right\" / \"" - - text: (Default) Text Icon Icon & Text + - button "Interactive (Button)" + - link "Interactive (Link)" + - checkbox "Interactive (Checkbox) circle\" / \"" + - text: Interactive (Checkbox) circle" / " + - radio "Interactive (Radio) circle\" / \"" + - text: Interactive (Radio) circle" / " + - link "Checked arrow_up_right\" / \"" + - group "Checked": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True check_circle\" / \"" [checked] + - text: True check_circle" / " + - link "Disabled arrow_up_right\" / \"" + - group "Disabled": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True circle\" / \"" [disabled] + - text: True circle" / " + - link "Show Icon arrow_up_right\" / \"" + - text: (Default) False True + - link "No Text arrow_up_right\" / \"" + - text: (Default) False True + - link "Show Slot arrow_up_right\" / \"" + - text: (Default) False Swap Slot True + - link "Show Check State arrow_up_right\" / \"" + - checkbox "(Default) True circle\" / \"" + - text: (Default) True circle" / " + - checkbox "False" + - text: "False" - link "Overflow arrow_up_right\" / \"" - - text: (Default) No Overflow With Overflow (max-width) - - link "Example arrow_up_right\" / \"" - - group "Example": + - text: (Default) False True - lorem ipsum dolor + - link "Example Strong arrow_up_right\" / \"" + - group "Example Strong": - button "Interactive Strong Button with Icon" - link "Interactive Strong Link with Icon" - - checkbox "Interactive Strong Checkbox with Icon" - - text: Interactive Strong Checkbox with Icon - - radio "Interactive Strong Radio 1 with Icon" - - text: Interactive Strong Radio 1 with Icon - - radio "Interactive Strong Radio 2 with Icon" - - text: Interactive Strong Radio 2 with Icon \ No newline at end of file + - checkbox "Interactive Strong Checkbox with Icon circle\" / \"" + - text: Interactive Strong Checkbox with Icon circle" / " + - radio "Interactive Strong Radio 1 with Icon circle\" / \"" + - text: Interactive Strong Radio 1 with Icon circle" / " + - radio "Interactive Strong Radio 2 with Icon circle\" / \"" + - text: Interactive Strong Radio 2 with Icon circle" / " + - link "Example Origin arrow_up_right\" / \"" + - group "Example Origin": + - button "Interactive Origin Button with Icon" + - link "Interactive Origin Link with Icon" + - checkbox "Interactive Origin Checkbox with Icon circle\" / \"" + - text: Interactive Origin Checkbox with Icon circle" / " + - radio "Interactive Origin Radio 1 with Icon circle\" / \"" + - text: Interactive Origin Radio 1 with Icon circle" / " + - radio "Interactive Origin Radio 2 with Icon circle\" / \"" + - text: Interactive Origin Radio 2 with Icon circle" / " \ No newline at end of file diff --git a/__snapshots__/tag/showcase/mobile-chrome/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/mobile-chrome/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png index 6d46b61e03b..33826900ed0 100644 Binary files a/__snapshots__/tag/showcase/mobile-chrome/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/mobile-chrome/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/mobile-chrome/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml b/__snapshots__/tag/showcase/mobile-chrome/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml index 2b137f3ba60..2b75fb6b4cc 100644 --- a/__snapshots__/tag/showcase/mobile-chrome/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/tag/showcase/mobile-chrome/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml @@ -3,43 +3,67 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Behaviour arrow_up_right\" / \"" - group "Behaviour": - - text: (Default) Static - - button "Interactive Button" - - link "Interactive Link" - - checkbox "Interactive Checkbox" - - text: Interactive Checkbox - - radio "Interactive Radio 1" - - text: Interactive Radio 1 - - radio "Interactive Radio 2" - - text: Interactive Radio 2 Removeable + - text: (Default) Static Removable - button "cross\" / \" Remove tag" - - link "State arrow_up_right\" / \"" - - group "State": - - checkbox "(Default) Unchecked" - - text: (Default) Unchecked - - checkbox "Checked" [checked] - - text: Checked - - checkbox "Disabled" [checked] [disabled] - - text: Disabled - - link "Content arrow_up_right\" / \"" - - text: (Default) Text x_placeholder" / " Icon x_placeholder" / " Icon & Text + - button "Interactive (Button)" + - link "Interactive (Link)" + - checkbox "Interactive (Checkbox) circle\" / \"" + - text: Interactive (Checkbox) circle" / " + - radio "Interactive (Radio) circle\" / \"" + - text: Interactive (Radio) circle" / " + - link "Checked arrow_up_right\" / \"" + - group "Checked": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True check_circle\" / \"" [checked] + - text: True check_circle" / " + - link "Disabled arrow_up_right\" / \"" + - group "Disabled": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True circle\" / \"" [disabled] + - text: True circle" / " + - link "Show Icon arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " True + - link "No Text arrow_up_right\" / \"" + - text: x_placeholder" / " (Default) False x_placeholder" / " True + - link "Show Slot arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " Swap Slot True + - link "Show Check State arrow_up_right\" / \"" + - checkbox "(Default) True circle\" / \"" + - text: (Default) True circle" / " + - checkbox "False" + - text: "False" - link "Overflow arrow_up_right\" / \"" - - text: (Default) No Overflow With Overflow (max-width) - - link "Example arrow_up_right\" / \"" - - group "Example": + - text: (Default) False True - lorem ipsum dolor + - link "Example Strong arrow_up_right\" / \"" + - group "Example Strong": - text: x_placeholder" / " - button "Interactive Strong Button with Icon" - text: x_placeholder" / " - link "Interactive Strong Link with Icon" - text: x_placeholder" / " - - checkbox "Interactive Strong Checkbox with Icon" - - text: Interactive Strong Checkbox with Icon x_placeholder" / " - - radio "Interactive Strong Radio 1 with Icon" - - text: Interactive Strong Radio 1 with Icon x_placeholder" / " - - radio "Interactive Strong Radio 2 with Icon" - - text: Interactive Strong Radio 2 with Icon \ No newline at end of file + - checkbox "Interactive Strong Checkbox with Icon circle\" / \"" + - text: Interactive Strong Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 1 with Icon circle\" / \"" + - text: Interactive Strong Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 2 with Icon circle\" / \"" + - text: Interactive Strong Radio 2 with Icon circle" / " + - link "Example Origin arrow_up_right\" / \"" + - group "Example Origin": + - text: x_placeholder" / " + - button "Interactive Origin Button with Icon" + - text: x_placeholder" / " + - link "Interactive Origin Link with Icon" + - text: x_placeholder" / " + - checkbox "Interactive Origin Checkbox with Icon circle\" / \"" + - text: Interactive Origin Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 1 with Icon circle\" / \"" + - text: Interactive Origin Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 2 with Icon circle\" / \"" + - text: Interactive Origin Radio 2 with Icon circle" / " \ No newline at end of file diff --git a/__snapshots__/tag/showcase/mobile-safari/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/mobile-safari/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png index e7bd84e93cf..ce7d247a71e 100644 Binary files a/__snapshots__/tag/showcase/mobile-safari/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/mobile-safari/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/mobile-safari/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml b/__snapshots__/tag/showcase/mobile-safari/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml index 2b137f3ba60..2b75fb6b4cc 100644 --- a/__snapshots__/tag/showcase/mobile-safari/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/tag/showcase/mobile-safari/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml @@ -3,43 +3,67 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Behaviour arrow_up_right\" / \"" - group "Behaviour": - - text: (Default) Static - - button "Interactive Button" - - link "Interactive Link" - - checkbox "Interactive Checkbox" - - text: Interactive Checkbox - - radio "Interactive Radio 1" - - text: Interactive Radio 1 - - radio "Interactive Radio 2" - - text: Interactive Radio 2 Removeable + - text: (Default) Static Removable - button "cross\" / \" Remove tag" - - link "State arrow_up_right\" / \"" - - group "State": - - checkbox "(Default) Unchecked" - - text: (Default) Unchecked - - checkbox "Checked" [checked] - - text: Checked - - checkbox "Disabled" [checked] [disabled] - - text: Disabled - - link "Content arrow_up_right\" / \"" - - text: (Default) Text x_placeholder" / " Icon x_placeholder" / " Icon & Text + - button "Interactive (Button)" + - link "Interactive (Link)" + - checkbox "Interactive (Checkbox) circle\" / \"" + - text: Interactive (Checkbox) circle" / " + - radio "Interactive (Radio) circle\" / \"" + - text: Interactive (Radio) circle" / " + - link "Checked arrow_up_right\" / \"" + - group "Checked": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True check_circle\" / \"" [checked] + - text: True check_circle" / " + - link "Disabled arrow_up_right\" / \"" + - group "Disabled": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True circle\" / \"" [disabled] + - text: True circle" / " + - link "Show Icon arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " True + - link "No Text arrow_up_right\" / \"" + - text: x_placeholder" / " (Default) False x_placeholder" / " True + - link "Show Slot arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " Swap Slot True + - link "Show Check State arrow_up_right\" / \"" + - checkbox "(Default) True circle\" / \"" + - text: (Default) True circle" / " + - checkbox "False" + - text: "False" - link "Overflow arrow_up_right\" / \"" - - text: (Default) No Overflow With Overflow (max-width) - - link "Example arrow_up_right\" / \"" - - group "Example": + - text: (Default) False True - lorem ipsum dolor + - link "Example Strong arrow_up_right\" / \"" + - group "Example Strong": - text: x_placeholder" / " - button "Interactive Strong Button with Icon" - text: x_placeholder" / " - link "Interactive Strong Link with Icon" - text: x_placeholder" / " - - checkbox "Interactive Strong Checkbox with Icon" - - text: Interactive Strong Checkbox with Icon x_placeholder" / " - - radio "Interactive Strong Radio 1 with Icon" - - text: Interactive Strong Radio 1 with Icon x_placeholder" / " - - radio "Interactive Strong Radio 2 with Icon" - - text: Interactive Strong Radio 2 with Icon \ No newline at end of file + - checkbox "Interactive Strong Checkbox with Icon circle\" / \"" + - text: Interactive Strong Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 1 with Icon circle\" / \"" + - text: Interactive Strong Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 2 with Icon circle\" / \"" + - text: Interactive Strong Radio 2 with Icon circle" / " + - link "Example Origin arrow_up_right\" / \"" + - group "Example Origin": + - text: x_placeholder" / " + - button "Interactive Origin Button with Icon" + - text: x_placeholder" / " + - link "Interactive Origin Link with Icon" + - text: x_placeholder" / " + - checkbox "Interactive Origin Checkbox with Icon circle\" / \"" + - text: Interactive Origin Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 1 with Icon circle\" / \"" + - text: Interactive Origin Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 2 with Icon circle\" / \"" + - text: Interactive Origin Radio 2 with Icon circle" / " \ No newline at end of file diff --git a/__snapshots__/tag/showcase/webkit/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/webkit/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png index 62acfdb3a63..6ae70900a19 100644 Binary files a/__snapshots__/tag/showcase/webkit/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png and b/__snapshots__/tag/showcase/webkit/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/webkit/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml b/__snapshots__/tag/showcase/webkit/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml index 2b137f3ba60..2b75fb6b4cc 100644 --- a/__snapshots__/tag/showcase/webkit/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/tag/showcase/webkit/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml @@ -3,43 +3,67 @@ - link "Density arrow_up_right\" / \"" - text: Functional (Default) Regular Expressive - link "Emphasis arrow_up_right\" / \"" - - text: (Default) Weak Strong + - text: (Default) Weak Origin Strong - link "Semantic arrow_up_right\" / \"" - - text: (Default) Adaptive Neutral Critical Informational Successful Warning Adaptive Strong Neutral Strong Critical Strong Informational Strong Successful Strong Warning Strong + - text: (Default) Adaptive Critical Informational Neutral Successful Warning Adaptive Origin Critical Origin Informational Origin Neutral Origin Successful Origin Warning Origin Adaptive Strong Critical Strong Informational Strong Neutral Strong Successful Strong Warning Strong - link "Behaviour arrow_up_right\" / \"" - group "Behaviour": - - text: (Default) Static - - button "Interactive Button" - - link "Interactive Link" - - checkbox "Interactive Checkbox" - - text: Interactive Checkbox - - radio "Interactive Radio 1" - - text: Interactive Radio 1 - - radio "Interactive Radio 2" - - text: Interactive Radio 2 Removeable + - text: (Default) Static Removable - button "cross\" / \" Remove tag" - - link "State arrow_up_right\" / \"" - - group "State": - - checkbox "(Default) Unchecked" - - text: (Default) Unchecked - - checkbox "Checked" [checked] - - text: Checked - - checkbox "Disabled" [checked] [disabled] - - text: Disabled - - link "Content arrow_up_right\" / \"" - - text: (Default) Text x_placeholder" / " Icon x_placeholder" / " Icon & Text + - button "Interactive (Button)" + - link "Interactive (Link)" + - checkbox "Interactive (Checkbox) circle\" / \"" + - text: Interactive (Checkbox) circle" / " + - radio "Interactive (Radio) circle\" / \"" + - text: Interactive (Radio) circle" / " + - link "Checked arrow_up_right\" / \"" + - group "Checked": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True check_circle\" / \"" [checked] + - text: True check_circle" / " + - link "Disabled arrow_up_right\" / \"" + - group "Disabled": + - checkbox "(Default) False circle\" / \"" + - text: (Default) False circle" / " + - checkbox "True circle\" / \"" [disabled] + - text: True circle" / " + - link "Show Icon arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " True + - link "No Text arrow_up_right\" / \"" + - text: x_placeholder" / " (Default) False x_placeholder" / " True + - link "Show Slot arrow_up_right\" / \"" + - text: (Default) False x_placeholder" / " Swap Slot True + - link "Show Check State arrow_up_right\" / \"" + - checkbox "(Default) True circle\" / \"" + - text: (Default) True circle" / " + - checkbox "False" + - text: "False" - link "Overflow arrow_up_right\" / \"" - - text: (Default) No Overflow With Overflow (max-width) - - link "Example arrow_up_right\" / \"" - - group "Example": + - text: (Default) False True - lorem ipsum dolor + - link "Example Strong arrow_up_right\" / \"" + - group "Example Strong": - text: x_placeholder" / " - button "Interactive Strong Button with Icon" - text: x_placeholder" / " - link "Interactive Strong Link with Icon" - text: x_placeholder" / " - - checkbox "Interactive Strong Checkbox with Icon" - - text: Interactive Strong Checkbox with Icon x_placeholder" / " - - radio "Interactive Strong Radio 1 with Icon" - - text: Interactive Strong Radio 1 with Icon x_placeholder" / " - - radio "Interactive Strong Radio 2 with Icon" - - text: Interactive Strong Radio 2 with Icon \ No newline at end of file + - checkbox "Interactive Strong Checkbox with Icon circle\" / \"" + - text: Interactive Strong Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 1 with Icon circle\" / \"" + - text: Interactive Strong Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Strong Radio 2 with Icon circle\" / \"" + - text: Interactive Strong Radio 2 with Icon circle" / " + - link "Example Origin arrow_up_right\" / \"" + - group "Example Origin": + - text: x_placeholder" / " + - button "Interactive Origin Button with Icon" + - text: x_placeholder" / " + - link "Interactive Origin Link with Icon" + - text: x_placeholder" / " + - checkbox "Interactive Origin Checkbox with Icon circle\" / \"" + - text: Interactive Origin Checkbox with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 1 with Icon circle\" / \"" + - text: Interactive Origin Radio 1 with Icon circle" / " x_placeholder" / " + - radio "Interactive Origin Radio 2 with Icon circle\" / \"" + - text: Interactive Origin Radio 2 with Icon circle" / " \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1c24065a786..ccbf2aca652 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42135,6 +42135,7 @@ } }, "packages/stylelint": { + "name": "@db-ui/stylelint", "version": "0.0.0", "license": "Apache-2.0", "devDependencies": { diff --git a/packages/components/src/components/badge/model.ts b/packages/components/src/components/badge/model.ts index 3773cfe1936..e0b703b7df6 100644 --- a/packages/components/src/components/badge/model.ts +++ b/packages/components/src/components/badge/model.ts @@ -1,10 +1,10 @@ import { - EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, + TagEmphasisProps, TextProps } from '../../shared/model'; @@ -35,7 +35,7 @@ export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & - EmphasisProps & + TagEmphasisProps & TextProps; export type DBBadgeDefaultState = {}; diff --git a/packages/components/src/components/tag/model.ts b/packages/components/src/components/tag/model.ts index 1a6b94cf68f..636ace1871d 100644 --- a/packages/components/src/components/tag/model.ts +++ b/packages/components/src/components/tag/model.ts @@ -1,12 +1,13 @@ import { - EmphasisProps, + ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, - ShowIconProps + ShowIconProps, + TagEmphasisProps } from '../../shared/model'; export const TagBehaviourList = ['static', 'removable'] as const; @@ -18,7 +19,7 @@ export type DBTagDefaultProps = { * - static: default behaviour without remove button * - removable: add a remove button at the end of the tag */ - behaviour?: TagBehaviourType; + behaviour?: TagBehaviourType | string; /** * @deprecated Disable tag @@ -36,10 +37,15 @@ export type DBTagDefaultProps = { * The removeButton attribute shows the cancel button. */ removeButton?: string; + /** + * Enable/Disable icon for checkbox/radio inside tag. + */ + showCheckState?: boolean; /** * Alternative for children to set content as property. */ text?: string; + /** * If "interactive" is set to true, you can pass a value to the underlying checkbox or radio input. */ @@ -51,8 +57,9 @@ export type DBTagProps = DBTagDefaultProps & IconProps & SemanticProps & OverflowProps & - EmphasisProps & - ShowIconProps; + TagEmphasisProps & + ShowIconProps & + ContentSlotProps; export type DBTagDefaultState = { getRemoveButtonText: () => string; diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx index b0495d84a38..f46b7a004ef 100644 --- a/packages/components/src/components/tag/tag.lite.tsx +++ b/packages/components/src/components/tag/tag.lite.tsx @@ -2,6 +2,7 @@ import { onInit, onUpdate, Show, + Slot, useDefaultProps, useMetadata, useRef, @@ -59,9 +60,14 @@ export default function DBTag(props: DBTagProps) { data-semantic={props.semantic} data-emphasis={props.emphasis} data-icon={props.icon} + data-show-check-state={getBooleanAsString( + props.showCheckState ?? true + )} data-hide-icon={getHideProp(props.showIcon)} data-no-text={getBooleanAsString(props.noText)} data-overflow={getBooleanAsString(props.overflow)}> + + {props.children} {props.text} diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss index d548b0c7b69..4ed34a1f967 100644 --- a/packages/components/src/components/tag/tag.scss +++ b/packages/components/src/components/tag/tag.scss @@ -17,6 +17,7 @@ @include icons.is-icon-text-replace(); padding: 0; + gap: 0; label { @include icons.is-icon-text-replace(); @@ -45,7 +46,7 @@ } %db-tag { - --db-icon-margin-end: #{variables.$db-spacing-fixed-2xs}; + --db-icon-margin-end: 0; @extend %default-interactive-component; @extend %db-overwrite-font-size-sm; @@ -57,6 +58,7 @@ min-inline-size: variables.$db-sizing-sm; inline-size: fit-content; position: relative; + gap: variables.$db-spacing-fixed-2xs; &:not(:has(#{tag-components.$interactive-selectors})), &:has(.db-tab-remove-button) { @@ -66,6 +68,8 @@ } &:has(#{tag-components.$interactive-selectors}) { + --db-icon-margin-end: #{variables.$db-spacing-fixed-2xs}; + @include icon-passing.icon-passing(variables.$db-spacing-fixed-2xs); @include tag-components.get-tag-colors-interactive(); } @@ -89,7 +93,17 @@ .db-tag { @extend %db-tag; - position: relative; + &[data-show-check-state="true"] { + label { + --db-icon-margin-start: #{variables.$db-spacing-fixed-2xs}; + + @include icons.set-icon("circle", "after"); + + &:has(input:checked) { + @include icons.set-icon("check_circle", "after"); + } + } + } label { @extend %default-transition; @@ -105,6 +119,10 @@ } } + &::after { + @include fonts.set-component-variables("xs"); + } + &:has(input:checked) { border-width: variables.$db-border-height-3xs; @@ -127,11 +145,6 @@ aspect-ratio: unset; &:checked { - &, - &:not(:disabled):is(:hover, :focus, :active) { - background-color: colors.$db-brand-bg-basic-transparent-full-default; - } - &:not([data-hide-icon-before="true"]) { &::before { content: none; @@ -214,7 +227,7 @@ button { // overwrite to transparent background-color: colors.$db-adaptive-bg-basic-transparent-full-default; - margin-inline-start: variables.$db-spacing-fixed-2xs; + color: currentcolor; border: 0; aspect-ratio: 1 / 1; } diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts index dc9dd016781..3359b3dbe1d 100644 --- a/packages/components/src/shared/model.ts +++ b/packages/components/src/shared/model.ts @@ -214,6 +214,13 @@ export type PopoverState = { handleAutoPlacement: () => void; }; +export type ContentSlotProps = { + /** + * Default slot which is used to pass in additional content. + */ + content?: any; +}; + export const SizeList = ['small', 'medium'] as const; export type SizeType = (typeof SizeList)[number]; export type SizeProps = { @@ -232,6 +239,15 @@ export type EmphasisProps = { emphasis?: EmphasisType; }; +export const TagEmphasisList = [...EmphasisList, 'origin'] as const; +export type TagEmphasisType = (typeof TagEmphasisList)[number]; +export type TagEmphasisProps = { + /** + * The emphasis attribute divides in between a weak, strong or origin appearance. + */ + emphasis?: TagEmphasisType; +}; + export const ValidationList = ['invalid', 'valid', 'no-validation'] as const; export type ValidationType = (typeof ValidationList)[number]; export type FormProps = { diff --git a/packages/components/src/styles/internal/_tag-components.scss b/packages/components/src/styles/internal/_tag-components.scss index 9eef5b0f01d..311d753632c 100644 --- a/packages/components/src/styles/internal/_tag-components.scss +++ b/packages/components/src/styles/internal/_tag-components.scss @@ -6,8 +6,17 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; +%set-adaptive-weak-tag { + border-color: colors.$db-adaptive-on-bg-basic-emphasis-60-default; + + @include colors.set-current-colors( + colors.$db-adaptive-bg-basic-level-1-default, + colors.$db-adaptive-on-bg-basic-emphasis-80-default + ); +} + %set-adaptive-strong-tag { - --db-adaptive-on-bg-basic-emphasis-60-default: #{colors.$db-adaptive-bg-inverted-contrast-high-default}; + border-color: colors.$db-adaptive-on-bg-basic-emphasis-80-default; @include colors.set-current-colors( colors.$db-adaptive-bg-inverted-contrast-high-default, @@ -15,20 +24,74 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; ); } +%set-adaptive-origin-tag { + border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default; + + @include colors.set-current-colors( + colors.$db-adaptive-origin-default, + colors.$db-adaptive-on-origin-default + ); +} + +%set-interactive-weak { + @extend %set-adaptive-weak-tag; + + @include helpers.hover { + background-color: colors.$db-adaptive-bg-basic-level-1-hovered; + } + + @include helpers.active { + background-color: colors.$db-adaptive-bg-basic-level-1-pressed; + } +} + +%set-interactive-strong { + @extend %set-adaptive-strong-tag; + + @include helpers.hover { + background-color: colors.$db-adaptive-bg-inverted-contrast-high-hovered; + } + + @include helpers.active { + background-color: colors.$db-adaptive-bg-inverted-contrast-high-pressed; + } +} + +%set-interactive-origin { + @extend %set-adaptive-origin-tag; + + @include helpers.hover { + background-color: colors.$db-adaptive-origin-hovered; + } + + @include helpers.active { + background-color: colors.$db-adaptive-origin-pressed; + } +} + @mixin get-tag-colors() { - background-color: colors.$db-adaptive-bg-basic-level-3-default; + @extend %set-adaptive-weak-tag; &[data-emphasis="strong"] { @extend %set-adaptive-strong-tag; } + &[data-emphasis="origin"] { + @extend %set-adaptive-origin-tag; + } + @each $name in colors.$variant-colors { &[data-semantic="#{$name}"] { - @extend %db-#{$name}-bg-basic-level-3; + border-color: var(--db-#{$name}-on-bg-basic-emphasis-60-default); + + @include colors.set-current-colors( + var(--db-#{$name}-bg-basic-level-1-default), + var(--db-#{$name}-on-bg-basic-emphasis-80-default) + ); &[data-emphasis="strong"] { - --db-adaptive-on-bg-basic-emphasis-60-default: var( - --db-#{$name}-bg-inverted-contrast-high-default + border-color: var( + --db-#{$name}-on-bg-basic-emphasis-80-default ); @include colors.set-current-colors( @@ -36,6 +99,17 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; var(--db-#{$name}-on-bg-inverted-default) ); } + + &[data-emphasis="origin"] { + border-color: var( + --db-#{$name}-on-bg-basic-emphasis-70-default + ); + + @include colors.set-current-colors( + var(--db-#{$name}-origin-default), + var(--db-#{$name}-on-origin-default) + ); + } } } } @@ -80,18 +154,6 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; background-color: transparent; } } - - a { - color: currentcolor; - - @include helpers.hover { - color: currentcolor; - } - - @include helpers.active { - color: currentcolor; - } - } } @mixin get-tag-colors-interactive() { @@ -104,81 +166,61 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; } } - label:has(input) { - background-color: colors.$db-adaptive-bg-basic-level-1-default; - - @include helpers.hover { - background-color: colors.$db-adaptive-bg-basic-level-1-hovered; - } - - @include helpers.active { - background-color: colors.$db-adaptive-bg-basic-level-1-pressed; - } - } - &:not([data-emphasis]), &[data-emphasis="weak"] { - // buttons and links should have bg-basic-level-2 + // buttons and links @include get-interactive-selectors() { - background-color: colors.$db-adaptive-bg-basic-level-3-default; - - @include helpers.hover { - background-color: colors.$db-adaptive-bg-basic-level-3-hovered; - } + @extend %set-interactive-weak; + } - @include helpers.active { - background-color: colors.$db-adaptive-bg-basic-level-3-pressed; - } + label:has(input) { + @extend %set-interactive-weak; } - // checkbox should have bg-basic-level-3 (checked) label:has(input[type="checkbox"]:checked) { - background-color: colors.$db-adaptive-bg-basic-level-3-default; - - @include helpers.hover { - background-color: colors.$db-adaptive-bg-basic-level-3-hovered; - } - - @include helpers.active { - background-color: colors.$db-adaptive-bg-basic-level-3-pressed; - } + @extend %set-interactive-strong; } - // radio should have bg-basic-level-3 (checked) without hover/pressed + // radio (checked) without hover/pressed label:has(input[type="radio"]:checked) { &, &:is(:hover, :focus, :active) { - background-color: colors.$db-adaptive-bg-basic-level-3-default; + @extend %set-adaptive-strong-tag; } } } &[data-emphasis="strong"] { + @extend %set-interactive-strong; + + // buttons and links @include get-interactive-selectors() { @extend %set-interactive-strong; } label:has(input[type="radio"]:checked) { @extend %set-adaptive-strong-tag; + } - /* Revert this for checked radio button (it's not clickable again) */ - @include helpers.hover { - background-color: colors.$db-adaptive-bg-inverted-contrast-high-default; - } + &:has(input):not(:has(input:checked)) { + @extend %set-interactive-weak; + } + } - @include helpers.active { - cursor: default; - background-color: colors.$db-adaptive-bg-inverted-contrast-high-default; - } + &[data-emphasis="origin"] { + @extend %set-interactive-origin; + + // buttons and links + @include get-interactive-selectors() { + @extend %set-interactive-origin; } - label:has(input[type="checkbox"]:checked) { - @extend %set-interactive-strong; + label:has(input[type="radio"]:checked) { + @extend %set-adaptive-origin-tag; } - &:has(a), - &:has(input:checked) { - @extend %set-adaptive-strong-tag; + &:has(input):not(:has(input:checked)) { + @extend %set-interactive-weak; } } } diff --git a/packages/foundations/assets/icons/LICENCES.json b/packages/foundations/assets/icons/LICENCES.json index 80d5bfb7edf..e780edf4827 100644 --- a/packages/foundations/assets/icons/LICENCES.json +++ b/packages/foundations/assets/icons/LICENCES.json @@ -59,6 +59,18 @@ "licence": "https://lucide.dev/license#lucide-license", "origin": "clock" }, + { + "name": "check-circle.svg", + "type": "lucide", + "licence": "https://lucide.dev/license#lucide-license", + "origin": "circle-check" + }, + { + "name": "circle.svg", + "type": "lucide", + "licence": "https://lucide.dev/license#lucide-license", + "origin": "circle" + }, { "name": "calendar.svg", "type": "lucide", diff --git a/packages/foundations/assets/icons/check-circle.svg b/packages/foundations/assets/icons/check-circle.svg new file mode 100644 index 00000000000..4f7d4c7d1c3 --- /dev/null +++ b/packages/foundations/assets/icons/check-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/foundations/assets/icons/circle.svg b/packages/foundations/assets/icons/circle.svg new file mode 100644 index 00000000000..bb5df0c70ed --- /dev/null +++ b/packages/foundations/assets/icons/circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/foundations/assets/icons/fonts/all/db-ux.woff2 b/packages/foundations/assets/icons/fonts/all/db-ux.woff2 index 3004eeb6779..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/all/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/all/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default/db-ux.woff2 index 3004eeb6779..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_12/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_12/db-ux.woff2 index 3004eeb6779..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_12/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_12/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_14/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_14/db-ux.woff2 index 3004eeb6779..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_14/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_14/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_16/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_16/db-ux.woff2 index 3004eeb6779..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_16/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_16/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_20/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_20/db-ux.woff2 index 3004eeb6779..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_20/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_20/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_24/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_24/db-ux.woff2 index 3004eeb6779..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_24/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_24/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_28/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_28/db-ux.woff2 index 3004eeb6779..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_28/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_28/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_32/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_32/db-ux.woff2 index 6e069ac40d7..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_32/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_32/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_48/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_48/db-ux.woff2 index 6e069ac40d7..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_48/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_48/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/default_64/db-ux.woff2 b/packages/foundations/assets/icons/fonts/default_64/db-ux.woff2 index 6e069ac40d7..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/default_64/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/default_64/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled/db-ux.woff2 index 6e069ac40d7..256a75dcb12 100644 Binary files a/packages/foundations/assets/icons/fonts/filled/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_12/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_12/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_12/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_12/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_14/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_14/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_14/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_14/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_16/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_16/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_16/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_16/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_20/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_20/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_20/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_20/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_24/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_24/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_24/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_24/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_28/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_28/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_28/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_28/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_32/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_32/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_32/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_32/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_48/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_48/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_48/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_48/db-ux.woff2 differ diff --git a/packages/foundations/assets/icons/fonts/filled_64/db-ux.woff2 b/packages/foundations/assets/icons/fonts/filled_64/db-ux.woff2 index 6e069ac40d7..8523f42d0ea 100644 Binary files a/packages/foundations/assets/icons/fonts/filled_64/db-ux.woff2 and b/packages/foundations/assets/icons/fonts/filled_64/db-ux.woff2 differ diff --git a/packages/foundations/dev/icons.html b/packages/foundations/dev/icons.html index f9f781861ca..9f59b87e78d 100644 --- a/packages/foundations/dev/icons.html +++ b/packages/foundations/dev/icons.html @@ -1,334 +1,297 @@ - - - Icon Overview - - - - - + + + Icon Overview + + + + + - -
-
- arrow_down -
+ +
+
+ arrow_down +
-
- arrow_left -
+
+ arrow_left +
-
- arrow_right -
+
+ arrow_right +
-
- arrow_up -
+
+ arrow_up +
-
- arrow_up_right -
+
+ arrow_up_right +
-
- brand -
+
+ brand +
-
- calendar -
+
+ calendar +
-
- check -
+
+ check +
-
- check_circle -
+
+ check_circle +
-
- chevron_down -
+
+ chevron_down +
-
- chevron_left -
+
+ chevron_left +
-
- chevron_right -
+
+ chevron_right +
-
- chevron_up -
+
+ chevron_up +
-
- clock -
+
+ clock +
-
- cross -
+
+ cross +
-
- cross_circle -
+
+ cross_circle +
-
- exclamation_mark_circle -
+
+ exclamation_mark_circle +
-
- exclamation_mark_triangle -
+
+ exclamation_mark_triangle +
-
- information_circle -
+
+ information_circle +
-
- magnifying_glass -
+
+ magnifying_glass +
-
- menu -
+
+ menu +
-
- minus -
+
+ minus +
-
- plus -
+
+ plus +
-
- resize_handle_corner -
+
+ resize_handle_corner +
-
- x_placeholder -
-
- +
+ x_placeholder +
+
+ diff --git a/packages/stylelint/src/rules/use-border-color.ts b/packages/stylelint/src/rules/use-border-color.ts index 349aa2e2d01..ff0a85f4d46 100644 --- a/packages/stylelint/src/rules/use-border-color.ts +++ b/packages/stylelint/src/rules/use-border-color.ts @@ -31,7 +31,7 @@ const allowedValues: AllowedType = { includes: [ { include: 'on-bg-basic-emphasis', - or: ['100', '70', '60', '50'] + or: ['100', '90', '80', '70', '60', '50'] }, { include: 'on-bg-inverted' } ], diff --git a/showcases/angular-showcase/src/app/components/tag/tag.component.html b/showcases/angular-showcase/src/app/components/tag/tag.component.html index 20a01ec4719..1e99fc8ec36 100644 --- a/showcases/angular-showcase/src/app/components/tag/tag.component.html +++ b/showcases/angular-showcase/src/app/components/tag/tag.component.html @@ -8,50 +8,61 @@ let-exampleProps="exampleProps" let-exampleName="exampleName" > - - @if (exampleProps?.component === "button") { - - } - @if (exampleProps?.component === "link") { - + @if (exampleProps?.lineBreak) { + + } @else { + + @if (exampleProps?.content) { +
+ Swap Slot +
+ } + @if (exampleProps?.component === "button") { + + } + @if (exampleProps?.component === "link") { + + {{ exampleName }} + + } + @if (exampleProps?.component === "checkbox") { + + } + @if (exampleProps?.component === "radio") { + + } + @if (!exampleProps?.component && !exampleProps?.overflow) { {{ exampleName }} - - } - @if (exampleProps?.component === "checkbox") { - - } - @if (exampleProps?.component === "radio") { - - } - @if (!exampleProps?.component && !exampleProps?.overflow) { - {{ exampleName }} - } - @if (!exampleProps?.component && exampleProps?.overflow) { - {{ exampleName }} - } - + } + @if (!exampleProps?.component && exampleProps?.overflow) { + {{ exampleName }} + } + + } diff --git a/showcases/react-showcase/src/components/tag/index.tsx b/showcases/react-showcase/src/components/tag/index.tsx index 94464f7908e..f39d4ab4e74 100644 --- a/showcases/react-showcase/src/components/tag/index.tsx +++ b/showcases/react-showcase/src/components/tag/index.tsx @@ -18,13 +18,23 @@ const getTag = ({ removeButton, checked, component, - identifier + identifier, + content, + showCheckState, + lineBreak, + showIcon }: DBTagProps & { checked?: boolean; component?: 'button' | 'link' | 'radio' | 'checkbox'; identifier?: string; + lineBreak?: boolean; }) => { const [checkedState, setCheckedState] = useState(checked ?? false); + + if (lineBreak) { + return ; + } + return ( Swap Slot + ) : undefined + } onRemove={() => { // eslint-disable-next-line no-alert alert(children.toString()); diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBTag-behaviour-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBTag-behaviour-1.txt index 4f3f8b16c7a..650c2b7ca13 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBTag-behaviour-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBTag-behaviour-1.txt @@ -1 +1 @@ -["(Default) Static clickable","Interactive Button button","link Interactive Link","Interactive Checkbox unchecked checkbox","checked Interactive Checkbox checkbox","Interactive Checkbox clickable","Interactive Radio 1 radio button, 1 of 2","selected Interactive Radio 1 radio button, 1 of 2","Interactive Radio 1 clickable","Interactive Radio 2 radio button, 2 of 2","Interactive Radio 2 clickable","Removeable clickable","Remove tag button",""] \ No newline at end of file +["(Default) Static clickable","Removable clickable","Remove tag button","","Interactive (Button) button","link Interactive (Link)","Interactive (Checkbox) unchecked checkbox","checked Interactive (Checkbox) checkbox","Interactive (Checkbox) clickable","Interactive (Radio) radio button, 1 of 1","selected Interactive (Radio) radio button, 1 of 1","Interactive (Radio) clickable"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBTag-behaviour-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBTag-behaviour-1.txt index 98d31540436..2318cb4b0bb 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBTag-behaviour-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBTag-behaviour-1.txt @@ -1 +1 @@ -["(Default) Static","button, Interactive Button","link, Interactive Link","check box, not checked, Interactive Checkbox","checked","radio button, not checked, Interactive Radio 1","checked","radio button, not checked, Interactive Radio 2","Removeable","button, Remove tag",""] \ No newline at end of file +["(Default) Static","Removable","button, Remove tag","","button, Interactive (Button)","link, Interactive (Link)","check box, not checked, Interactive (Checkbox)","checked","Interactive (Checkbox)",""] \ No newline at end of file diff --git a/showcases/screen-reader/tests/tag.spec.ts b/showcases/screen-reader/tests/tag.spec.ts index c41dbde633c..a2110763b95 100644 --- a/showcases/screen-reader/tests/tag.spec.ts +++ b/showcases/screen-reader/tests/tag.spec.ts @@ -30,6 +30,11 @@ test.describe('DBTag', () => { const screenReader = voiceOver ?? nvda; await screenReader?.clearSpokenPhraseLog(); await (voiceOver ? screenReader?.next() : screenReader?.previous()); // Focus "default static" + + await screenReader?.next(); // Focus "removable" + await screenReader?.next(); // Focus "remove button" + await screenReader?.act(); // Interact "remove button" + await screenReader?.next(); // Focus "button" await screenReader?.next(); // Focus "link" await screenReader?.next(); // Focus "checkbox" @@ -43,15 +48,6 @@ test.describe('DBTag', () => { if (voiceOver) { await screenReader?.next(); // Focus "radio 1 inline-text" } - - await screenReader?.next(); // Focus "radio 2" - if (voiceOver) { - await screenReader?.next(); // Focus "radio 2 inline-text" - } - - await screenReader?.next(); // Focus "removable" - await screenReader?.next(); // Focus "remove button" - await screenReader?.act(); // Interact "remove button" } }); }); diff --git a/showcases/shared/badge.json b/showcases/shared/badge.json index caf3b3c8eb3..83c9d4a9fc7 100644 --- a/showcases/shared/badge.json +++ b/showcases/shared/badge.json @@ -25,6 +25,12 @@ { "name": "(Default) Weak" }, + { + "name": "Origin", + "props": { + "emphasis": "origin" + } + }, { "name": "Strong", "props": { @@ -39,12 +45,6 @@ { "name": "(Default) Adaptive" }, - { - "name": "Neutral", - "props": { - "semantic": "neutral" - } - }, { "name": "Critical", "props": { @@ -57,6 +57,12 @@ "semantic": "informational" } }, + { + "name": "Neutral", + "props": { + "semantic": "neutral" + } + }, { "name": "Successful", "props": { @@ -70,15 +76,49 @@ } }, { - "name": "Adaptive Strong", + "name": "Adaptive Origin", "props": { - "emphasis": "strong" + "emphasis": "origin" } }, { - "name": "Neutral Strong", + "name": "Critical Origin", + "props": { + "semantic": "critical", + "emphasis": "origin" + } + }, + { + "name": "Informational Origin", + "props": { + "semantic": "informational", + "emphasis": "origin" + } + }, + { + "name": "Neutral Origin", "props": { "semantic": "neutral", + "emphasis": "origin" + } + }, + { + "name": "Successful Origin", + "props": { + "semantic": "successful", + "emphasis": "origin" + } + }, + { + "name": "Warning Origin", + "props": { + "semantic": "warning", + "emphasis": "origin" + } + }, + { + "name": "Adaptive Strong", + "props": { "emphasis": "strong" } }, @@ -96,6 +136,13 @@ "emphasis": "strong" } }, + { + "name": "Neutral Strong", + "props": { + "semantic": "neutral", + "emphasis": "strong" + } + }, { "name": "Successful Strong", "props": { diff --git a/showcases/shared/tag.json b/showcases/shared/tag.json index 0b431b58d99..7e5bb8ff027 100644 --- a/showcases/shared/tag.json +++ b/showcases/shared/tag.json @@ -25,6 +25,12 @@ { "name": "(Default) Weak" }, + { + "name": "Origin", + "props": { + "emphasis": "origin" + } + }, { "name": "Strong", "props": { @@ -39,12 +45,6 @@ { "name": "(Default) Adaptive" }, - { - "name": "Neutral", - "props": { - "semantic": "neutral" - } - }, { "name": "Critical", "props": { @@ -57,6 +57,12 @@ "semantic": "informational" } }, + { + "name": "Neutral", + "props": { + "semantic": "neutral" + } + }, { "name": "Successful", "props": { @@ -70,15 +76,61 @@ } }, { - "name": "Adaptive Strong", + "name": "Line Break", "props": { - "emphasis": "strong" + "lineBreak": true } }, { - "name": "Neutral Strong", + "name": "Adaptive Origin", + "props": { + "emphasis": "origin" + } + }, + { + "name": "Critical Origin", + "props": { + "semantic": "critical", + "emphasis": "origin" + } + }, + { + "name": "Informational Origin", + "props": { + "semantic": "informational", + "emphasis": "origin" + } + }, + { + "name": "Neutral Origin", "props": { "semantic": "neutral", + "emphasis": "origin" + } + }, + { + "name": "Successful Origin", + "props": { + "semantic": "successful", + "emphasis": "origin" + } + }, + { + "name": "Warning Origin", + "props": { + "semantic": "warning", + "emphasis": "origin" + } + }, + { + "name": "Line Break", + "props": { + "lineBreak": true + } + }, + { + "name": "Adaptive Strong", + "props": { "emphasis": "strong" } }, @@ -96,6 +148,13 @@ "emphasis": "strong" } }, + { + "name": "Neutral Strong", + "props": { + "semantic": "neutral", + "emphasis": "strong" + } + }, { "name": "Successful Strong", "props": { @@ -120,7 +179,19 @@ "name": "(Default) Static" }, { - "name": "Interactive Button", + "name": "Removable", + "props": { + "behaviour": "removable" + } + }, + { + "name": "Line Break", + "props": { + "lineBreak": true + } + }, + { + "name": "Interactive (Button)", "props": { "component": "button" }, @@ -133,7 +204,7 @@ ] }, { - "name": "Interactive Link", + "name": "Interactive (Link)", "props": { "component": "link" }, @@ -149,7 +220,13 @@ ] }, { - "name": "Interactive Checkbox", + "name": "Line Break", + "props": { + "lineBreak": true + } + }, + { + "name": "Interactive (Checkbox)", "props": { "component": "checkbox" }, @@ -175,7 +252,7 @@ ] }, { - "name": "Interactive Radio 1", + "name": "Interactive (Radio)", "props": { "component": "radio", "identifier": "radio01" @@ -201,29 +278,33 @@ ] } ] - }, + } + ] + }, + { + "name": "Checked", + "role": "group", + "examples": [ { - "name": "Interactive Radio 2", + "name": "(Default) False", "props": { - "component": "radio", - "identifier": "radio01" + "component": "checkbox" }, "children": [ { "name": "label", "native": true, - "content": "Interactive Radio 2", + "content": "Interactive Checkbox", "props": { - "for": "radio02" + "for": "checkbox02" }, "children": [ { "name": "input", "native": true, "props": { - "name": "radio02", - "id": "radio02", - "type": "radio" + "id": "checkbox02", + "type": "checkbox" } } ] @@ -231,21 +312,10 @@ ] }, { - "name": "Removeable", + "name": "True", "props": { - "behaviour": "removable" - } - } - ] - }, - { - "name": "State", - "role": "group", - "examples": [ - { - "name": "(Default) Unchecked", - "props": { - "component": "checkbox" + "component": "checkbox", + "checked": true }, "children": [ { @@ -253,26 +323,32 @@ "native": true, "content": "Interactive Checkbox", "props": { - "for": "checkbox02" + "for": "checkbox03" }, "children": [ { "name": "input", "native": true, "props": { - "id": "checkbox02", + "checked": true, + "id": "checkbox03", "type": "checkbox" } } ] } ] - }, + } + ] + }, + { + "name": "Disabled", + "role": "group", + "examples": [ { - "name": "Checked", + "name": "(Default) False", "props": { - "component": "checkbox", - "checked": true + "component": "checkbox" }, "children": [ { @@ -280,15 +356,14 @@ "native": true, "content": "Interactive Checkbox", "props": { - "for": "checkbox03" + "for": "checkbox02" }, "children": [ { "name": "input", "native": true, "props": { - "checked": true, - "id": "checkbox03", + "id": "checkbox02", "type": "checkbox" } } @@ -297,10 +372,9 @@ ] }, { - "name": "Disabled", + "name": "True", "props": { "component": "checkbox", - "checked": true, "disabled": true }, "children": [ @@ -329,34 +403,120 @@ ] }, { - "name": "Content", + "name": "Show Icon", "examples": [ { - "name": "(Default) Text" + "name": "(Default) False", + "props": { + "icon": "x_placeholder", + "showIcon": false + } }, { - "name": "Icon", + "name": "True", + "props": { + "icon": "x_placeholder", + "showIcon": true + } + } + ] + }, + { + "name": "No Text", + "examples": [ + { + "name": "(Default) False", + "props": { + "icon": "x_placeholder" + } + }, + { + "name": "True", "props": { "icon": "x_placeholder", "noText": true } + } + ] + }, + { + "name": "Show Slot", + "examples": [ + { + "name": "(Default) False" }, { - "name": "Icon & Text", + "name": "True", "props": { - "icon": "x_placeholder" + "icon": "x_placeholder", + "content": true } } ] }, + { + "name": "Show Check State", + "examples": [ + { + "name": "(Default) True", + "props": { + "component": "checkbox", + "showCheckState": true + }, + "children": [ + { + "name": "label", + "native": true, + "content": "Interactive Checkbox", + "props": { + "for": "checkbox099" + }, + "children": [ + { + "name": "input", + "native": true, + "id": "checkbox099", + "type": "checkbox" + } + ] + } + ] + }, + { + "name": "False", + "props": { + "component": "checkbox", + "showCheckState": false + }, + "children": [ + { + "name": "label", + "native": true, + "content": "Interactive Checkbox", + "props": { + "for": "checkbox099" + }, + "children": [ + { + "name": "input", + "native": true, + "id": "checkbox099", + "type": "checkbox" + } + ] + } + ] + } + ] + }, { "name": "Overflow", "examples": [ { - "name": "(Default) No Overflow" + "name": "(Default) False" }, { - "name": "With Overflow (max-width)", + "name": "True - lorem ipsum dolor", "props": { "overflow": true } @@ -364,7 +524,7 @@ ] }, { - "name": "Example", + "name": "Example Strong", "role": "group", "examples": [ { @@ -463,7 +623,7 @@ "component": "radio", "emphasis": "strong", "icon": "x_placeholder", - "identifier": "radio02" + "identifier": "radio03" }, "children": [ { @@ -478,7 +638,7 @@ "name": "input", "native": true, "props": { - "name": "radio04", + "name": "radio03", "id": "radio04", "type": "radio" } @@ -488,5 +648,131 @@ ] } ] + }, + { + "name": "Example Origin", + "role": "group", + "examples": [ + { + "name": "Interactive Origin Button with Icon", + "props": { + "component": "button", + "emphasis": "origin", + "icon": "x_placeholder", + "behaviour": "removable" + }, + "children": [ + { + "name": "button", + "native": true, + "content": "Interactive Button" + } + ] + }, + { + "name": "Interactive Origin Link with Icon", + "props": { + "component": "link", + "emphasis": "origin", + "icon": "x_placeholder" + }, + "children": [ + { + "name": "a", + "native": true, + "content": "Interactive Link", + "props": { + "href": "#" + } + } + ] + }, + { + "name": "Interactive Origin Checkbox with Icon", + "props": { + "component": "checkbox", + "emphasis": "origin", + "icon": "x_placeholder" + }, + "children": [ + { + "name": "label", + "native": true, + "content": "Interactive Checkbox", + "props": { + "for": "checkbox055" + }, + "children": [ + { + "name": "input", + "native": true, + "id": "checkbox055", + "type": "checkbox" + } + ] + } + ] + }, + { + "name": "Interactive Origin Radio 1 with Icon", + "props": { + "component": "radio", + "emphasis": "origin", + "icon": "x_placeholder", + "identifier": "radio035" + }, + "children": [ + { + "name": "label", + "native": true, + "content": "Interactive Radio 3", + "props": { + "for": "radio035" + }, + "children": [ + { + "name": "input", + "native": true, + "props": { + "name": "radio035", + "id": "radio035", + "type": "radio" + } + } + ] + } + ] + }, + { + "name": "Interactive Origin Radio 2 with Icon", + "props": { + "component": "radio", + "emphasis": "origin", + "icon": "x_placeholder", + "identifier": "radio035" + }, + "children": [ + { + "name": "label", + "native": true, + "content": "Interactive Radio 4", + "props": { + "for": "radio045" + }, + "children": [ + { + "name": "input", + "native": true, + "props": { + "name": "radio035", + "id": "radio045", + "type": "radio" + } + } + ] + } + ] + } + ] } ] diff --git a/showcases/showcase-styles.css b/showcases/showcase-styles.css index 71b7b99e900..36cd27ee29b 100644 --- a/showcases/showcase-styles.css +++ b/showcases/showcase-styles.css @@ -11,6 +11,11 @@ padding: var(--db-spacing-fixed-md); } +/* Linebreak for variant cards */ +.line-break { + inline-size: 100vw; +} + .variants-card, .variants-card > .db-card { min-block-size: var(--db-sizing-3xl); @@ -188,3 +193,9 @@ main .db-header { inline-size: 100%; } } + +.default-content-slot { + background-color: var(--db-successful-bg-basic-level-1-default); + color: var(--db-successful-on-bg-basic-emphasis-100-default); + padding-inline: var(--db-spacing-fixed-xs); +} diff --git a/showcases/vue-showcase/src/components/tag/Tag.vue b/showcases/vue-showcase/src/components/tag/Tag.vue index 1548a9d3b81..02c8d9f3164 100644 --- a/showcases/vue-showcase/src/components/tag/Tag.vue +++ b/showcases/vue-showcase/src/components/tag/Tag.vue @@ -14,16 +14,28 @@ const showAlert = (exampleName?: string) => {