@adobe/spectrum-design-data 3.3.0-beta.1 → 3.3.0

package/components/alert-dialog.json

@@ -9,6 +9,13 @@
     "category": "feedback",
     "documentationUrl": "https://spectrum.adobe.com/page/alert-dialog/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "AlertDialog",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,76 +23,80 @@
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen the title and description text are too long for the available horizontal space, they wrap to form another line."
-    },
-    {
-      "type": "guideline",
-      "content": "Button group overflow.\n\nAlert dialogs can include up to three buttons. When horizontal space is limited, the buttons stack vertically. Buttons should be ordered by ascending importance, with the most critical action placed at the end or bottom of the stack."
-    },
-    {
-      "type": "guideline",
-      "content": "Use alert dialogs sparingly.\n\nAlert dialogs are interruptive, so they should be reserved for important information that users must acknowledge before continuing a task or workflow. Use them only when absolutely necessary—not for low-priority notifications or excessive confirmations."
-    },
-    {
-      "type": "guideline",
-      "content": "Don’t nest alert dialogs.\n\nAlert dialogs are designed to pause the experience until a decision is made, so only one should appear at a time. Avoid opening an alert dialog from within another. If a situation seems to require a sequence of decisions, consider using a different design pattern."
+      "content": "Alert dialogs present critical information that must be acknowledged. They appear over the interface and block further interaction until an action is selected."
     },
     {
       "type": "guideline",
-      "content": "Writing the title.\n\nAll alert dialogs must have a title. The title communicates the upshot of the message, such as the eventual outcome or conclusion of an action. It should be as close as possible to a complete sentence (subject + verb). Don’t use punctuation at the end of the title. Most alert dialog titles communicate the main effect of whatever a person is about to do. Titles ideally use the same or similar phrasing as the call-to-action that had led someone to the alert dialog in the first place. The title of an error alert dialog communicates the result of the error. Don’t just state that an error has occurred."
+      "content": "By default, an alert dialog that includes a button to cancel or go back will be labeled “Cancel.”"
     },
     {
       "type": "guideline",
-      "content": "Writing the description.\n\nAlert dialog descriptions share any additional information or context that a person needs to know in order to make one of the decisions offered by the actions. Descriptions are written in complete sentences, and any error code is included in parentheses at the end of the last sentence."
+      "content": "Alert dialogs can include up to three buttons if a secondary outline button label is defined. If no label is defined, the button won’t appear. The secondary outline button should use a short, actionable phrase that clearly communicates the result of selecting the action—typically describing the previous step or an alternative choice."
     },
     {
       "type": "guideline",
-      "content": "Writing the actions.\n\nUse a short phrase to succinctly describe the options for next steps. If possible, have the button label use the same language as the action mentioned in the alert dialog title (e.g., if a dialog's title is “Delete conversation,” its primary action button label would be “Delete”)."
+      "content": "An alert dialog must include at least one button. The primary action label refers to the rightmost button in the dialog footer for languages that read left to right. It should use a short, actionable phrase that clearly communicates the result of selecting the action—whether that means moving forward or dismissing the dialog."
     },
     {
       "type": "guideline",
-      "content": "Make button labels specific and actionable.\n\nFor alert dialog buttons, make the labels as specific and actionable as possible. Even if someone were to only read the word or phrase on the button, they should be able to get a summary of the alert dialog’s entire message."
+      "content": "Use the appropriate variant based on the context of the message:"
     },
     {
       "type": "guideline",
-      "content": "Avoid asking questions.\n\nQuestions in alert dialog titles — such as “Are you sure you want to quit?” or “Do you want to cancel?” — are redundant and undermine a user's agency in the decision they've already made by taking a previous action to get to the alert dialog. This phrasing also sets up for a yes/no set of actions, which can become confusing. Instead, reframe the message to focus on the outcome or effect."
+      "content": "Alert dialogs should include a description when available. The description briefly communicates any additional information or context a user needs to make a decision based on the options presented."
     },
     {
       "type": "guideline",
-      "content": "Pair confirmation with distinct actions.\n\nIt’s OK to ask a question in an alert dialog's description to confirm if someone wants to go ahead with a choice that the system is making on their behalf. However, this should still be paired with distinct actions that show that a person has control over what happens next."
+      "content": "All alert dialogs must have a title. The title appears at the top of the dialog and uses a few words to convey the outcome of what will happen if a user continues with the primary action."
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the alert dialog is mirrored. Texts are right-aligned and buttons are left-aligned."
+      "content": "When the title and description text are too long for the available horizontal space, they wrap to form another line."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus to the next button inside the alert dialog (last becomes first). If none of the buttons are selected, the focus is set on the first button.Shift + TabMoves focus to the previous button inside the alert dialog (first becomes last). If none of the buttons are selected, the focus is set on the last button.EscDismisses the alert dialog. This is equivalent to choosing “Cancel” or an “OK” confirmation.EscDismisses the alert banner if possible. This is equivalent to selecting the close button."
+      "content": "Alert dialogs can include up to three buttons. When horizontal space is limited, the buttons stack vertically. Buttons should be ordered by ascending importance, with the most critical action placed at the end or bottom of the stack."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage Default (Arrow)Use the default cursor for non-interactive elements and text within the alert dialog.PointerUse the pointer cursor for any interactive elements, such as buttons, inside the alert dialog."
+      "content": "Alert dialogs are interruptive, so they should be reserved for important information that users must acknowledge before continuing a task or workflow. Use them only when absolutely necessary—not for low-priority notifications or excessive confirmations."
     },
     {
       "type": "guideline",
-      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 ANon-text elements, such as icons used in alert dialogs, must provide a text alternative that communicates the dialog's purpose. All alert dialogs need an accessible name (for example, via a title, aria-label, or associated text) so screen readers can announce their function.Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAAAlert dialogs should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of alertdialog should be utilized.Use of color 1.4.1 AColor is not used as a means to convey information or distinguish elements.Contrast 1.4.3 AAThe visual presentation of text has a contrast ratio of at least 4.5:1.Visual presentation 1.4.8 AAAThe width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.Non-text contrast 1.4.11 AAThe visual presentation of illustrations and component states have a contrast ratio of at least 3:1.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus can be moved away from the component using only a keyboard.Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
+      "content": "Alert dialogs are designed to pause the experience until a decision is made, so only one should appear at a time. Avoid opening an alert dialog from within another. If a situation seems to require a sequence of decisions, consider using a different design pattern."
     }
   ],
   "options": {
-    "title": { "type": "string" },
-    "description": { "type": "string" },
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
     "variant": {
       "type": "string",
       "default": "confirmation",
       "values": [
-        { "value": "confirmation" },
-        { "value": "information" },
-        { "value": "warning" },
-        { "value": "destructive" },
-        { "value": "error" }
+        {
+          "value": "confirmation"
+        },
+        {
+          "value": "information"
+        },
+        {
+          "value": "warning"
+        },
+        {
+          "value": "destructive"
+        },
+        {
+          "value": "error"
+        }
       ]
     },
-    "primaryActionLabel": { "type": "string" },
+    "primaryActionLabel": {
+      "type": "string"
+    },
     "secondaryActionLabel": {
       "type": "string",
       "description": "If undefined, this button does not appear."
@@ -96,15 +107,25 @@
       "description": "If undefined, this button does not appear."
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "role": "dialog",
     "intents": ["dismiss"],
     "focusable": false,
     "keyboardIntents": ["dismiss"],
     "wcag": [
-      { "criterion": "2.4.3", "level": "A", "title": "Focus Order" },
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "2.4.3",
+        "level": "A",
+        "title": "Focus Order"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/avatar-group.json

@@ -9,6 +9,13 @@
     "category": "actions",
     "documentationUrl": "https://spectrum.adobe.com/page/avatar-group/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "AvatarGroup",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -48,16 +55,35 @@
       "type": "number",
       "default": 100,
       "values": [
-        { "value": 50 },
-        { "value": 75 },
-        { "value": 100 },
-        { "value": 200 },
-        { "value": 300 },
-        { "value": 400 },
-        { "value": 500 }
+        {
+          "value": 50
+        },
+        {
+          "value": 75
+        },
+        {
+          "value": 100
+        },
+        {
+          "value": 200
+        },
+        {
+          "value": 300
+        },
+        {
+          "value": 400
+        },
+        {
+          "value": 500
+        }
       ]
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "accessibility": { "role": "group", "focusable": false }
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "role": "group",
+    "focusable": false
+  }
 }

package/components/avatar.json

@@ -9,6 +9,19 @@
     "category": "navigation",
     "documentationUrl": "https://spectrum.adobe.com/page/avatar/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Avatar",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "Avatar",
+      "importPath": "@adobe/spectrum-wc/components/avatar",
+      "notes": "Spectrum 2 web component custom element: swc-avatar."
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -56,44 +69,107 @@
       "type": "number",
       "default": 500,
       "values": [
-        { "value": 50 },
-        { "value": 75 },
-        { "value": 100 },
-        { "value": 200 },
-        { "value": 300 },
-        { "value": 400 },
-        { "value": 500 },
-        { "value": 600 },
-        { "value": 700 },
-        { "value": 800 },
-        { "value": 900 },
-        { "value": 1000 },
-        { "value": 1100 },
-        { "value": 1200 },
-        { "value": 1300 },
-        { "value": 1400 },
-        { "value": 1500 }
+        {
+          "value": 50
+        },
+        {
+          "value": 75
+        },
+        {
+          "value": 100
+        },
+        {
+          "value": 200
+        },
+        {
+          "value": 300
+        },
+        {
+          "value": 400
+        },
+        {
+          "value": 500
+        },
+        {
+          "value": 600
+        },
+        {
+          "value": 700
+        },
+        {
+          "value": 800
+        },
+        {
+          "value": 900
+        },
+        {
+          "value": 1000
+        },
+        {
+          "value": 1100
+        },
+        {
+          "value": 1200
+        },
+        {
+          "value": 1300
+        },
+        {
+          "value": 1400
+        },
+        {
+          "value": 1500
+        }
       ]
     },
     "image": {
       "type": "string",
       "default": "user image",
       "values": [
-        { "value": "user image" },
-        { "value": "gradient image" },
-        { "value": "gradient" },
-        { "value": "guest image" },
-        { "value": "initials" }
+        {
+          "value": "user image"
+        },
+        {
+          "value": "gradient image"
+        },
+        {
+          "value": "gradient"
+        },
+        {
+          "value": "guest image"
+        },
+        {
+          "value": "initials"
+        }
       ]
     },
-    "isDisabled": { "type": "boolean", "default": false },
-    "showStroke": { "type": "boolean", "default": false }
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "showStroke": {
+      "type": "boolean",
+      "default": false
+    }
   },
   "states": [
-    { "name": "down", "trigger": "interaction" },
-    { "name": "keyboard-focus", "trigger": "interaction" },
-    { "name": "disabled", "trigger": "prop" }
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    },
+    {
+      "name": "disabled",
+      "trigger": "prop"
+    }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "accessibility": { "focusable": false }
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
 }