| `CustomEvent
| `CustomEvent
| `CustomEvent<{ id: string; selected: boolean; }>` | + + +## Methods + +### `setFocus() => Promise
| `CustomEvent
(this.container = el as HTMLInputElement)}
+ >
+
+ {this.showHelperText && (
+
+
+
+
+ `,
+ methods: {
+ action: action('scaleChange'),
+ removeChip(label) {
+ this.action();
+ this.labels = null;
+ this.text = this.label;
+ setTimeout(() => {
+ this.$el.querySelector('#root > ul > li > scale-chip') &&
+ this.$el
+ .querySelector('#root > ul > li > scale-chip')
+ .shadowRoot.querySelector('span > button')
+ .focus();
+ });
+ },
+ },
+ data: () => ({
+ labels: ['option 1', 'option 2', 'option 3', 'option 4'],
+ }),
+});
+
+Please select one option:
+ -
+
-
+
+ {{label}} + +
+
+
+ 
+
+
+## Standard
+
+
+
+Chip
+
++ +### Persistent Standard + + + +```html +
+
+
+
+
+
+Chips are contextual components that allow users to filter content or trigger actions.
+
+## General
+
+Chips consist of relevant keywords in a container. They often appear dynamically (triggered by a user action) and as a group.
+
+### When to use
+
+Use chips to:
+
+- give users filtering possibilities,
+- display the filters users set, or
+- suggest options to users (search criteria, possible answers).
+
+### When not to use
+
+Don’t use chips when:
+
+- you want to mark a category (use tags instead) or
+- you can use a button instead.
+
+## Basic types
+
+
+
+### Persistent chips
+
+Persistent chips are an integral part of the UI and can be selected and deselected.
+
+
+
+**Example 1 – Default** Chip
+
++A group of filter options as an integral part of the UI. + + + +**Example 1 – Filter selected**
+Users can recognize selected filters with the checkmark icon. + +### Dynamic chips + +Dynamic chips fade in or out after a user action. + + + +**Example 1**
+The chip appears after users set a filter. Clicking/tapping on the close icon hides it again and resets the filter. + + + +**Example 2**
+A set of possible responses in a chat. After clicking/tapping on the chip, it fades out again. + +## Variants + + + +Chips can be displayed in two variants: standard and outline. + +### Disabled state + + + +In the disabled state, the chip's interactive function is switched off. Use this state when an interaction can’t occur due to permissions or dependencies. + +### Element + + + +#### Label (1) + +The label of the chip should be short and easily understandable. + +#### Checkmark icon (2) + +Depending on the type, the close icon or checkmark icon is displayed. + +#### Icon (3) (optional) + +Add an icon if it makes it easier for users to understand the function of the chip. + +## Best practice + +### Chips in groups + +- Arrange chips horizontally or vertically. +- Vertical layouts are suitable, for example, for a side menu that should integrate groups of chips. +- Chips arranged horizontally are often located above the content they refer to. +- Word the label as precisely as possible. + +## Related components + +[Tag](?path=/usage/components-tag--standard), +[Button](?path=/usage/components-button--standard), +[Segmented Button](?path=/usage/beta-components-segmented-button--standard), +[Checkbox Group](?path=/usage/components-checkbox-group--standard) diff --git a/packages/storybook-vue/stories/components/chip/chip_de.md b/packages/storybook-vue/stories/components/chip/chip_de.md new file mode 100644 index 0000000000..4388c05850 --- /dev/null +++ b/packages/storybook-vue/stories/components/chip/chip_de.md @@ -0,0 +1,97 @@ +
+
+
+
+Chips sind kontextabhängige Komponenten mit denen Nutzer\*innen Inhalte filtern oder Aktionen auslösen können.
+
+## Allgemein
+
+Chips bestehen aus relevanten Schlüsselwörtern in einem Container. Sie erscheinen häufig dynamisch – ausgelöst durch eine Aktion der Nutzer\*innen – und als Gruppe.
+
+### Verwende einen Chip, um
+
+- Nutzer\*innen Filtermöglichkeiten anzubieten,
+- die von Nutzer\*innen gesetzten Filter darzustellen oder
+- Nutzer\*innen Optionen vorzuschlagen (Suchkriterien, Antwortmöglichkeiten).
+
+### Verwende Chips besser nicht, wenn
+
+- du ein Element kategorisieren möchtest (hier sind Tags besser geeignet) oder
+- wenn du stattdessen einen Button verwenden kannst.
+
+## Basistypen
+
+
+
+### Persistente Chips
+
+Persistente Chips sind fester Bestandteil des UIs und lassen sich aus- und abwählen.
+
+
+
+**Beispiel 1 – Default** Chip
+
++Eine Gruppe von Filtermöglichkeiten als fester Bestandteil des UI + + + +**Beispiel 2 - Filter ausgewählt**
+Ausgewählte Filter erkennen Nutzer\*innen am Checkmark Icon. + +### Dynamische Chips + +Dynamische Chips blenden sich nach einer Aktion der Nutzer\*innen ein oder aus. + + + +**Beispiel 1**
+Der Chip blendet sich ein, nachdem Nutzer\*innen einen Filter gesetzt haben. Per Klick/Tap auf das Schließen-Icon blendet er sich wieder aus und der Filter ist zurückgesetzt. + + + +**Beispiel 2**
+Eine Gruppe von Antwortmöglichkeiten in einem Chat. Nach Klick/Tap auf den Chip blendet er sich wieder aus. + +## Varianten + + + +Chips lassen sich in zwei Varianten darstellen: Standard und Outline. + +### Deaktivierter Zustand + + + +Im deaktivierten Zustand ist die interaktive Funktion des Chips ausgeschaltet. Verwende diesen Zustand, wenn eine Interaktion aufgrund von Berechtigungen oder Abhängigkeiten nicht möglich ist. + +### Elemente + + + +#### Label (1) + +Das Label des Chips sollte kurz und verständlich sein. + +#### Checkmark Icon (2) + +Je nach Typ wird das Schließen-Icon oder Checkmark Icon angezeigt. + +#### Icon (3) (Optional) + +Füge ein Icon hinzu, wenn Nutzer\*innen die Funktion des Chips dadurch leichter verstehen können. + +## Best Practice + +### Chips in Gruppierungen + +- Ordne Chips horizontal oder vertikal an. +- Vertikale Layouts eigenen sich zum Beispiel für ein Seitenmenü, das Chips-Gruppierungen integrieren soll. +- Horizontal angeordnete Chips befinden sich häufig oberhalb vom Inhalt auf den sie sich beziehen. +- Formuliere das Label so präzise wie möglich. + +## Verwandte Komponenten + +[Tag](?path=/usage/components-tag--standard), +[Button](?path=/usage/components-button--standard), +[Segmented Button](?path=/usage/beta-components-segmented-button--standard), +[Checkbox Group](?path=/usage/components-checkbox-group--standard) diff --git a/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue b/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue new file mode 100644 index 0000000000..a0e3c4aa54 --- /dev/null +++ b/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue @@ -0,0 +1,41 @@ + +
+
+
+
+Segmented buttons make it easier for users to filter content, select options, or change views.
+
+## General
+
+A segmented button can consist of two to five selection options, where the options always belong to a common category. Selecting both single and multiple options is possible.
+
+
+
+### When to use
+
+Use a segmented button to:
+
+- display selected filters,
+- offer functions like sorting content or changing views, or
+- provide input options.
+
+### When not to use
+
+Don’t use a segmented button when:
+
+- there are more than five selection options,
+- the options are not logically related,
+- actions should be triggered (e.g., editing, adding, or deleting), or
+- the view should switch between separate content (use tabs instead).
+
+## Basic types
+
+### Single selection
+
+
+
+As with the Radio Button Group, users can only select one option. One option is always preselected. If necessary, specify a neutral option – for example "All" to override the set filters.
+
+### Multiple selection
+
+
+
+As with Check Box Groups, users can also select multiple options. Multiple selections are typically used to filter content.
+
+## Variants
+
+### Text only
+
+
+
+A text that describes the option is ideal for most use cases. In the selected state, add a checkmark icon to the segmented button.
+
+### Icon and text
+
+
+
+Add appropriate icons to clarify options (optional). In the selected state, a checkmark icon replaces the previously displayed icon.
+
+### Icon only
+
+
+
+If the icon clearly refers to the action, you can omit the text. In this case, set an aria-label for the screen reader.
+By default, icons are used in the outline variant. Flat icons indicate a selected status.
+
+## Sizes
+
+
+
+Segmented buttons are available in three different sizes:
+
+- Small
+- Medium
+- Large
+
+The segment with the longest label dictates the width of all segments. If necessary, you can switch the segmented button to the full width of the area
+
+## Disabled state
+
+
+
+If an interaction is temporarily unavailable, you can deactivate the entire component or just individual segments of the segmented button.
+
+## Elements
+
+
+
+### Group label (1) (optional)
+
+Choose a short descriptive title for the whole group (for example, "Sort by" or "Distance").
+
+### Container (2)
+
+The container visually summarizes all the options or fields of a segmented button into a group.
+
+### Segment (3)
+
+Each selection is represented as a segment. With a multiple selection, group adjacent selected segments together.
+
+### Icon (4) (optional)
+
+The icon either supports the label to illustrate the content or replaces the text as a standalone variant.
+
+### Label (5)
+
+The label describes individual choices and should be short and precise.
+
+## Best practice
+
+- Don’t mix variants: text only, text and icon, or icon only.
+- Use short and clear labels.
+- Offer a neutral option, for example to disable filters and sorting.
+- Use the full width option on mobile devices and make sure the total width doesn't exceed the smallest display size (320 px).
+
+## Examples
+
+
+
+
+
+
+
+## Related components
+
+[Tab Navigation](?path=/usage/components-tab-navigation--text-icon),
+[Button](?path=/usage/components-button--standard),
+[Radio Button Group](?path=/usage/components-radio-button-group--standard),
+[Checkbox Group](?path=/usage/components-checkbox-group--standard),
+[Chip](?path=/usage/beta-components-chip--standard),
+[Icon Button](?path=/usage/components-button--icon-only)
diff --git a/packages/storybook-vue/stories/components/segmented-button/segmented-button_de.md b/packages/storybook-vue/stories/components/segmented-button/segmented-button_de.md
new file mode 100644
index 0000000000..5a597d6eba
--- /dev/null
+++ b/packages/storybook-vue/stories/components/segmented-button/segmented-button_de.md
@@ -0,0 +1,127 @@
+Segmented Button
+
+
+
+
+
+Segmented Buttons erleichtern Nutzer\*innen das Filtern von Inhalten, die Auswahl von Optionen oder dem Wechsel von Ansichten.
+
+## Allgemein
+
+Ein Segmented Button besteht aus zwei bis fünf Auswahlmöglichkeiten derselben Kategorie. Mit dem Segmented Button kannst du sowohl einzelne Optionen auswählen als auch mehrere gleichzeitig.
+
+
+
+### Verwende einen Segmented Button, um
+
+- ausgewählte Filter anzuzeigen,
+- Funktionen wie Inhalte sortieren oder Ansicht ändern anzubieten oder
+- Eingabebeoptionen zur Verfügung zu stellen.
+
+### Verwende Segmented Buttons besser nicht, wenn
+
+- es mehr als fünf Auswahlmöglichkeiten gibt,
+- die Optionen in keinem logischen Zusammenhang stehen,
+- Aktionen ausgelöst werden sollen (zum Beispiel Editieren, Hinzufügen oder Löschen) oder
+- die Ansicht zwischen unterschiedlichen Inhalten gewechselt werden soll (hierfür sind Tabs besser geeignet).
+
+## Basistypen
+
+### Einfachauswahl
+
+
+
+Wie bei der Radio Button Group können Nutzer\*innen nur eine Option auswählen. Es ist immer eine Option vorausgewählt. Gib bei Bedarf eine neutrale Option an – zum Beispiel „Alle“, um gesetzte Filter aufzuheben.
+
+### Mehrfachauswahl
+
+
+
+Wie bei Check Box Groups kannst du auch mehrere Optionen auswählen. Die Mehrfachauswahl wird in der Regel zum Filtern von Inhalten benutzt.
+
+## Varianten
+
+### Nur Text
+
+
+
+Für die meisten Use Cases reicht ein Text, der die Option beschreibt. Ein Checkmark Icon verdeutlicht den ausgewählten Zustand.
+
+### Icon und Text
+
+
+
+Füge passende Icons hinzu, um die Optionen zu verdeutlichen (optional). Im ausgewählten Zustand ersetzt ein Checkmark Icon das vorher dargestellte Icon.
+
+### Nur Icon
+
+
+
+Verweist das Icon eindeutig auf die Aktion, kannst du den Text weglassen. Setze in diesem Fall ein Aria-Label für den Screenreader. Icons werden per Default in der Outline-Variante verwendet. Flächige Icons bedeuten, dass das Segment ausgewählt ist.
+
+## Größen
+
+
+
+Der Segmented Button ist in drei Größen verfügbar:
+
+- Small
+- Medium
+- Large
+
+Das Segment mit dem längsten Label gibt die Breite aller Segmente vor. Bei Bedarf kannst du den Segmented Button auf eine flächenfüllende Breite umschalten.
+
+## Deaktivierter Zustand
+
+
+
+Du kannst sowohl die gesamte Komponente als auch nur einzelne Segmente des Segmented Buttons deaktivieren, wenn eine Interaktion temporär nicht möglich ist.
+
+## Elemente
+
+
+
+### Gruppenlabel (1) (optional)
+
+Wähle einen kurzen unterstützenden Titel für die gesamte Gruppe (zum Beispiel „Sortieren nach“ oder „Distanz“).
+
+### Container (2)
+
+Der Container fasst alle Optionen bzw. die Segmente des Segmented Buttons visuell zu einer Gruppe zusammen.
+
+### Segment (3)
+
+Jede Auswahlmöglichkeit wird als ein Segment dargestellt. Bei der Mehrfachauswahl sind nebeneinanderliegende, ausgewählte Segmente zu einer Gruppe zusammengefasst.
+
+### Icon (4) (optional)
+
+Das Icon unterstützt entweder das Label, um den Inhalt zu veranschaulichen, oder ersetzt den Text als eigenständige Variante.
+
+### Label (5)
+
+Das Label beschreibt einzelne Auswahlmöglichkeiten und sollte kurz und präzise sein.
+
+## Best Practice
+
+- Mische keine Varianten: Nur Text, Text und Icon, Nur Icon.
+- Verwende kurze und eindeutige Labels.
+- Biete eine neutrale Option, um zum Beispiel Filter und Sortierungen zu deaktivieren.
+- Nutze die Full-Width-Option auf Mobilgeräten und stelle sicher, dass die Gesamtbereite nicht die kleinste Displaygröße (320px) überschreitet.
+
+### Beispiele
+
+
+
+
+
+
+
+
+
+## Verwandte Komponenten
+
+[Tab Navigation](?path=/usage/components-tab-navigation--text-icon),
+[Button](?path=/usage/components-button--standard),
+[Radio Button Group](?path=/usage/components-radio-button-group--standard),
+[Checkbox Group](?path=/usage/components-checkbox-group--standard),
+[Chip](?path=/usage/beta-components-chip--standard),
+[Icon Button](?path=/usage/components-button--icon-only)
diff --git a/packages/storybook-vue/stories/components/tag/tag.md b/packages/storybook-vue/stories/components/tag/tag.md
index fb06d5410d..4c1919bcb9 100644
--- a/packages/storybook-vue/stories/components/tag/tag.md
+++ b/packages/storybook-vue/stories/components/tag/tag.md
@@ -89,3 +89,7 @@ By clicking/tapping on the icon, users remove the tag.
- Decide on one size for your tags.
- Use a clear keyword for the label.
+
+## Related components
+
+[Chip](?path=/usage/components-chip--standard),
diff --git a/packages/storybook-vue/stories/components/tag/tag_de.md b/packages/storybook-vue/stories/components/tag/tag_de.md
index 67cd310c6a..9fbf4335e6 100644
--- a/packages/storybook-vue/stories/components/tag/tag_de.md
+++ b/packages/storybook-vue/stories/components/tag/tag_de.md
@@ -85,3 +85,7 @@ Per Klick/Tap auf das Icon blenden Nutzer\*innen den Tag aus.
- Wähle eine einheitliche Größe für Tags.
- Verwende eine eindeutige Bezeichnung für das Label.
+
+## Verwandte Komponenten
+
+[Chip](?path=/usage/components-chip--standard),
diff --git a/packages/storybook-vue/stories/components/toggle-group/ToggleGroup.stories.mdx b/packages/storybook-vue/stories/components/toggle-group/ToggleGroup.stories.mdx
index 3158963619..020a76e817 100644
--- a/packages/storybook-vue/stories/components/toggle-group/ToggleGroup.stories.mdx
+++ b/packages/storybook-vue/stories/components/toggle-group/ToggleGroup.stories.mdx
@@ -2,7 +2,7 @@ import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs';
import ScaleToggleGroup from './ScaleToggleGroup.vue';
({
```html
-Segmented Button
+
+
-
+ 
-A Toggle-Group ist eine collection of Toggle-Buttons.
-Depending on the settings there may be only one Toggle-Button activated/selected (radio-group principle) or more (checkbox-group princple) of them.
-
-## Beta components
-
-This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future.
+We no longer support the Toggle Group. Please use the [Segmented Button](?path=/usage/beta-components-segmented-button--standard) instead.
diff --git a/packages/storybook-vue/stories/components/toggle-group/toggle-group_de.md b/packages/storybook-vue/stories/components/toggle-group/toggle-group_de.md
index 1a4a11c4d9..dd9c82e4d3 100644
--- a/packages/storybook-vue/stories/components/toggle-group/toggle-group_de.md
+++ b/packages/storybook-vue/stories/components/toggle-group/toggle-group_de.md
@@ -1,11 +1,6 @@
Toggle-Group
-
+ Toggle Group
+
Toggle Group
-
+
+ ## Komponenten-Update (Optimierung von Mobile und Visual Design) 27.10.2022 diff --git a/packages/storybook-vue/stories/update_history/Design_en.md b/packages/storybook-vue/stories/update_history/Design_en.md index 7a072f0901..abb438c6af 100644 --- a/packages/storybook-vue/stories/update_history/Design_en.md +++ b/packages/storybook-vue/stories/update_history/Design_en.md @@ -2,6 +2,16 @@ This page documents updates to the visual appearance of Scale. +## New Beta Components + +25.01.2023 + +- Release of the new beta components Segmented Button and Chip. +- The Segmented Button replaces the beta component Toggle Group. +- New category Deprecated Components. This lists components we no longer support. + +
+ ## Component Update (Optimized Mobile and Visual Design) 27.10.2022 diff --git a/packages/storybook-vue/stories/update_history/Development_de.md b/packages/storybook-vue/stories/update_history/Development_de.md index f97fafa8be..6e5fb0b4ab 100644 --- a/packages/storybook-vue/stories/update_history/Development_de.md +++ b/packages/storybook-vue/stories/update_history/Development_de.md @@ -2,6 +2,16 @@ Diese Seite dokumentiert Aktualisierungen in `@telekom/scale-components` und verwandten Paketen. +## Neue Beta-Komponenten + +25.01.2023 + +- Veröffentlichung der neuen Beta-Komponenten Segmented Button und Chip. +- Der Segmented Button ersetzt die Beta-Komponente Toggle Group. +- Neue Kategorie „Deprecated Components“. Hier sind Komponenten aufgelistet, die wir nicht weiter unterstützen. + +
+ ## Komponenten-Update (Optimierung von Mobile und Visual Design) 27.10.2022 diff --git a/packages/storybook-vue/stories/update_history/Development_en.md b/packages/storybook-vue/stories/update_history/Development_en.md index 3a9209bb9a..4de02bc41d 100644 --- a/packages/storybook-vue/stories/update_history/Development_en.md +++ b/packages/storybook-vue/stories/update_history/Development_en.md @@ -2,6 +2,16 @@ This page documents updates in `@telekom/scale-components` and related packages. +## New Beta Components + +25.01.2023 + +- Release of the new beta components Segmented Button and Chip. +- The Segmented Button replaces the beta component Toggle Group. +- New category Deprecated Components. This lists components we no longer support. + +
+ ## Component Update (Optimized Mobile and Visual Design) 27.10.2022 diff --git a/packages/storybook-vue/translations.json b/packages/storybook-vue/translations.json index 778d281822..76adb4eaa0 100644 --- a/packages/storybook-vue/translations.json +++ b/packages/storybook-vue/translations.json @@ -23,7 +23,7 @@ "elementSelector": "#new-release", "en": "New Release", "de": "New Release" - }, + }, { "elementSelector": "#new-release-release-notes--page", "en": "Release Notes", @@ -127,7 +127,11 @@ "en": "Beta Components", "de": "Beta Komponenten" }, - + { + "elementSelector": "#deprecated-components", + "en": "Deprecated Components", + "de": "Deprecated Komponenten" + }, { "elementSelector": "#update-history", "en": "Update History", diff --git a/packages/storybook-vue/yarn.lock b/packages/storybook-vue/yarn.lock index 99e7bbc45b..d5ea9fb140 100644 --- a/packages/storybook-vue/yarn.lock +++ b/packages/storybook-vue/yarn.lock @@ -4395,19 +4395,19 @@ camelcase@^6.2.0: integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== caniuse-lite@^1.0.30001093: - version "1.0.30001102" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001102.tgz#3275e7a8d09548f955f665e532df88de0b63741a" - integrity sha512-fOjqRmHjRXv1H1YD6QVLb96iKqnu17TjcLSaX64TwhGYed0P1E1CCWZ9OujbbK4Z/7zax7zAzvQidzdtjx8RcA== + version "1.0.30001436" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001436.tgz" + integrity sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg== caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001317: - version "1.0.30001325" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz#2b4ad19b77aa36f61f2eaf72e636d7481d55e606" - integrity sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ== + version "1.0.30001436" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001436.tgz" + integrity sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg== caniuse-lite@^1.0.30001332: - version "1.0.30001346" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz#e895551b46b9cc9cc9de852facd42f04839a8fbe" - integrity sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ== + version "1.0.30001436" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001436.tgz" + integrity sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg== capture-exit@^2.0.0: version "2.0.0" diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-selection-outline-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-selection-outline-1-snap.png new file mode 100644 index 0000000000..a46aa2fe29 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-selection-outline-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-selection-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-selection-standard-1-snap.png new file mode 100644 index 0000000000..3aa87deb08 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-selection-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-suggestion-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-suggestion-1-snap.png new file mode 100644 index 0000000000..b072affad3 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dynamic-suggestion-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-1-snap.png new file mode 100644 index 0000000000..b072affad3 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-disabled-1-snap.png new file mode 100644 index 0000000000..ccb9498610 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-selected-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-selected-1-snap.png new file mode 100644 index 0000000000..da8dc14f77 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-selected-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-selected-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-selected-disabled-1-snap.png new file mode 100644 index 0000000000..df033bc06e Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-outline-selected-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-1-snap.png new file mode 100644 index 0000000000..b072affad3 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-disabled-1-snap.png new file mode 100644 index 0000000000..ccb9498610 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-selected-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-selected-1-snap.png new file mode 100644 index 0000000000..d72aeaf328 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-selected-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-selected-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-selected-disabled-1-snap.png new file mode 100644 index 0000000000..09d438c18f Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-persistent-standard-selected-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-selection-outline-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-selection-outline-1-snap.png new file mode 100644 index 0000000000..6a6571be15 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-selection-outline-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-selection-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-selection-standard-1-snap.png new file mode 100644 index 0000000000..90730dacb1 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-selection-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-suggestion-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-suggestion-1-snap.png new file mode 100644 index 0000000000..ea4cda5e2d Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dynamic-suggestion-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-1-snap.png new file mode 100644 index 0000000000..ea4cda5e2d Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-disabled-1-snap.png new file mode 100644 index 0000000000..1686cff444 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-selected-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-selected-1-snap.png new file mode 100644 index 0000000000..1d3ddd7616 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-selected-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-selected-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-selected-disabled-1-snap.png new file mode 100644 index 0000000000..9f8ea3d212 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-outline-selected-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-1-snap.png new file mode 100644 index 0000000000..ea4cda5e2d Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-disabled-1-snap.png new file mode 100644 index 0000000000..1686cff444 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-selected-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-selected-1-snap.png new file mode 100644 index 0000000000..8d0efc635a Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-selected-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-selected-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-selected-disabled-1-snap.png new file mode 100644 index 0000000000..363035fd30 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-persistent-standard-selected-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-disabled-1-snap.png index c063a713d5..c82177d997 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-disabled-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-full-width-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-full-width-1-snap.png index a1b0ed3577..990bb497b8 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-full-width-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-full-width-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-grey-background-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-grey-background-1-snap.png index 66244967db..450dd7c3f3 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-grey-background-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-grey-background-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-icon-before-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-icon-before-1-snap.png index 05f7a5c3ec..d2966ee6a4 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-icon-before-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-icon-before-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-1-snap.png index 5c78cbb61f..ea0e8f1b4c 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-2-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-2-snap.png index fd62b8169e..beab4b61c4 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-2-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-2-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-3-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-3-snap.png index b917b8a132..a6b51b8fec 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-3-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-3-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-4-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-4-snap.png index 5c4dcd8270..d9b6b3c673 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-4-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-4-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-5-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-5-snap.png index 8814ecf13d..155b26ecfe 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-5-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-5-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-6-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-6-snap.png index 9aacd1106e..9d4e6fd3ae 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-6-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-monochrome-variant-6-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-no-border-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-no-border-1-snap.png index bdb30a53d9..c000c99632 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-no-border-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-no-border-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-single-select-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-single-select-1-snap.png index 99ab8377b8..dd628a63df 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-single-select-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-single-select-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-small-size-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-small-size-1-snap.png index 527b23fddb..2bf3cdec8b 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-small-size-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-small-size-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-1-snap.png index 99ab8377b8..dd628a63df 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-2-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-2-snap.png index 9d1ea1604e..4734252126 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-2-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-2-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-3-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-3-snap.png index c75da1bb44..26760ab0c9 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-3-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-3-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-4-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-4-snap.png index a35c18f424..f6cfa76246 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-4-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-4-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-5-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-5-snap.png index ec11a8ad76..2e67b9c183 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-5-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-5-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-6-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-6-snap.png index 80d123d49e..dd3994d1b4 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-6-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-dark-standard-6-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-disabled-1-snap.png index f792b653ff..6a92fe5c83 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-disabled-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-disabled-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-full-width-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-full-width-1-snap.png index 375708e165..ded65fd03d 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-full-width-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-full-width-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-grey-background-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-grey-background-1-snap.png index 69b4cf0a13..532773b933 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-grey-background-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-grey-background-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-icon-before-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-icon-before-1-snap.png index f698f788ed..3c37db8f02 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-icon-before-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-icon-before-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-1-snap.png index 1bdb541944..5d88baa208 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-2-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-2-snap.png index 22569013ff..ac1ef48869 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-2-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-2-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-3-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-3-snap.png index 240e099f47..9e6398c900 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-3-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-3-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-4-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-4-snap.png index 355374e6e3..5b462026e1 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-4-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-4-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-5-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-5-snap.png index a1bad628e5..6afc73f286 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-5-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-5-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-6-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-6-snap.png index 7798971a14..94fce01915 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-6-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-monochrome-variant-6-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-no-border-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-no-border-1-snap.png index f4920a7446..8d38db401f 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-no-border-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-no-border-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-single-select-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-single-select-1-snap.png index 2827df545b..4d2b932e6b 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-single-select-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-single-select-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-small-size-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-small-size-1-snap.png index 9ffb1cc874..a82e9474bb 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-small-size-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-small-size-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-1-snap.png index 2827df545b..4d2b932e6b 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-1-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-2-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-2-snap.png index 9a8323f99d..f8903153bd 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-2-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-2-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-3-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-3-snap.png index 99d3a29fc8..f0f985419c 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-3-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-3-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-4-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-4-snap.png index 33f32faab0..23f581bfea 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-4-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-4-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-5-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-5-snap.png index 0923353a57..11c04e6243 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-5-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-5-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-6-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-6-snap.png index 38f31b1adb..d6f03cd875 100644 Binary files a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-6-snap.png and b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-light-standard-6-snap.png differ diff --git a/packages/visual-tests/src/chip.visual.spec.js b/packages/visual-tests/src/chip.visual.spec.js new file mode 100644 index 0000000000..2902d015ed --- /dev/null +++ b/packages/visual-tests/src/chip.visual.spec.js @@ -0,0 +1,24 @@ +describe('Chip', () => { + describe.each(['light', 'dark'])('%p', (mode) => { + beforeAll(async () => { + await global.runColorSetup('components-chip--standard', mode); + }); + test.each([ + ['persistent-standard'], + ['persistent-standard-selected'], + ['persistent-standard-disabled'], + ['persistent-standard-selected-disabled'], + ['persistent-outline'], + ['persistent-outline-selected'], + ['persistent-outline-disabled'], + ['persistent-outline-selected-disabled'], + ['dynamic-suggestion'], + ['dynamic-selection-standard'], + ['dynamic-selection-outline'], + ])('%p', async (variant) => { + await global.runSetup(`beta-components-chip--${variant}`); + await global.page.waitFor(3000); + await global.visualCheck(); + }); + }); +}); diff --git a/packages/visual-tests/src/segmented-button.visual.spec.js b/packages/visual-tests/src/segmented-button.visual.spec.js new file mode 100644 index 0000000000..9456016ec2 --- /dev/null +++ b/packages/visual-tests/src/segmented-button.visual.spec.js @@ -0,0 +1,19 @@ +describe.skip('SegmentedButton', () => { + describe.each(['light', 'dark'])('%p', (mode) => { + beforeAll(async () => { + await global.runColorSetup('components-segmented-button--standard', mode); + }); + test.each([ + ['standard'], + ['multi-select'], + ['disabled-segment'], + ['disabled-button'], + ['icon-only'], + ['icon-and-text'], + ['invalid'], + ])('%p', async (variant) => { + await global.runSetup(`beta-components-segmented-button--${variant}`); + await global.visualCheck(); + }); + }); +}); diff --git a/packages/visual-tests/src/toggle-group.visual.spec.js b/packages/visual-tests/src/toggle-group.visual.spec.js index b49971df17..33a3bb6fe6 100644 --- a/packages/visual-tests/src/toggle-group.visual.spec.js +++ b/packages/visual-tests/src/toggle-group.visual.spec.js @@ -15,13 +15,13 @@ describe('ToggleGroup', () => { ['icon-before'], ['icon-only'], ])('%p', async (variant) => { - await global.runSetup(`beta-components-toggle-group--${variant}`); + await global.runSetup(`deprecated-components-toggle-group--${variant}`); await global.page.waitFor(500); await global.visualCheck(); }); // hover, active, focus test.each([['standard'], ['monochrome-variant']])('%p', async (variant) => { - await global.runSetup(`beta-components-toggle-group--${variant}`); + await global.runSetup(`deprecated-components-toggle-group--${variant}`); const buttonOne = await global.page.evaluateHandle( `document.querySelector("#root scale-toggle-group > scale-toggle-button[radius='left']").shadowRoot.querySelector("button")` ); diff --git a/yarn.lock b/yarn.lock index f7af105a74..3344d4abff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7979,6 +7979,11 @@ caniuse-lite@^1.0.30001370: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001382.tgz#4d37f0d0b6fffb826c8e5e1c0f4bf8ce592db949" integrity sha512-2rtJwDmSZ716Pxm1wCtbPvHtbDWAreTPxXbkc5RkKglow3Ig/4GNGazDI9/BVnXbG/wnv6r3B5FEbkfg9OcTGg== +caniuse-lite@^1.0.30001436: + version "1.0.30001436" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001436.tgz#22d7cbdbbbb60cdc4ca1030ccd6dea9f5de4848b" + integrity sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg== + canonical-path@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/canonical-path/-/canonical-path-1.0.0.tgz"