@adobe/spectrum-design-data 0.4.0 → 0.6.0

package/components/thumbnail.json

@@ -9,127 +9,90 @@
     "category": "navigation",
     "documentationUrl": "https://spectrum.adobe.com/page/thumbnail/"
   },
-  "options": {
-    "size": {
-      "type": "number",
-      "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
-        }
-      ]
-    }
-  },
-  "states": [
+  "documentBlocks": [
     {
-      "name": "disabled",
-      "trigger": "prop"
-    }
-  ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "tokenBindings": [
-    {
-      "token": "thumbnail-size-50",
-      "context": "Size"
+      "type": "purpose",
+      "content": "Thumbnails are small representations of images or content used for previews and navigation in galleries, lists, and media collections."
     },
     {
-      "token": "thumbnail-size-75",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Thumbnails display a preview of an image, layer, or effect, and appear in a variety of locations as a visual reference."
     },
     {
-      "token": "thumbnail-size-100",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Thumbnail sizes scale exponentially. The opacity checkerboard responsively resizes to appropriately fit within each thumbnail size."
     },
     {
-      "token": "thumbnail-size-200",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Thumbnails can be navigated using a keyboard in certain scenarios, such as layers or layer masks. When a thumbnail is used as pure representation of an item, focus should be set on the component the thumbnail is used within."
     },
     {
-      "token": "thumbnail-size-300",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Thumbnails feature rounded corners and may include images with transparency. A subtle inset border helps distinguish images that might otherwise blend into the product’s theme colors."
     },
     {
-      "token": "thumbnail-size-400",
-      "context": "Size"
+      "type": "guideline",
+      "content": "When thumbnails are used in layer management (such as Treeview, Compact or Detail Layers panels), the thumbnail is given a thick gray border."
     },
     {
-      "token": "thumbnail-size-500",
-      "context": "Size"
+      "type": "guideline",
+      "content": "When a user selects a thumbnail in layer management, such as in Treeview, Compact or Detail Layers panels, it is highlighted with a thick blue border."
     },
     {
-      "token": "thumbnail-size-600",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Tree view items can show thumbnails as an alternative to icons. Thumbnails are best used when a user needs to have a preview of the content represented by the tree view item. Icons can be used as a fallback for when an image is unavailable, but should be appropriately sized to match the thumbnail."
     },
     {
-      "token": "thumbnail-size-700",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Tree views with thumbnails should use a thumbnail size that is appropriate to the size of the tree view itself. For example, an extra-large tree view would not work well with small thumbnails; those proportions may be better suited for using icons instead."
     },
     {
-      "token": "thumbnail-size-800",
-      "context": "Size"
-    },
-    {
-      "token": "thumbnail-size-900",
-      "context": "Size"
-    },
-    {
-      "token": "thumbnail-size-1000",
-      "context": "Size"
-    },
-    {
-      "token": "thumbnail-corner-radius",
-      "context": "Rounding"
-    },
+      "type": "guideline",
+      "content": "In some cases, multiple thumbnails need to be displayed in-line with the tree view item (e.g., layer masks). These thumbnails should be individually selectable and inherit all other behaviors of a standard tree view item, such as drag-and-drop behavior. Don't use more than 3 thumbnails per tree view item."
+    }
+  ],
+  "options": {
+    "size": {
+      "type": "number",
+      "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 }
+      ]
+    }
+  },
+  "states": [{ "name": "disabled", "trigger": "prop" }],
+  "lifecycle": { "introduced": "1.0.0-draft" },
+  "tokenBindings": [
+    { "token": "thumbnail-size-50", "context": "Size" },
+    { "token": "thumbnail-size-75", "context": "Size" },
+    { "token": "thumbnail-size-100", "context": "Size" },
+    { "token": "thumbnail-size-200", "context": "Size" },
+    { "token": "thumbnail-size-300", "context": "Size" },
+    { "token": "thumbnail-size-400", "context": "Size" },
+    { "token": "thumbnail-size-500", "context": "Size" },
+    { "token": "thumbnail-size-600", "context": "Size" },
+    { "token": "thumbnail-size-700", "context": "Size" },
+    { "token": "thumbnail-size-800", "context": "Size" },
+    { "token": "thumbnail-size-900", "context": "Size" },
+    { "token": "thumbnail-size-1000", "context": "Size" },
+    { "token": "thumbnail-corner-radius", "context": "Rounding" },
     {
       "token": "thumbnail-opacity-checkerboard-square-size",
       "context": "Opacity Checkerboard"
     },
-    {
-      "token": "border-width-100",
-      "context": "Border"
-    },
-    {
-      "token": "thumbnail-border-color",
-      "context": "Border "
-    },
-    {
-      "token": "thumbnail-border-opacity",
-      "context": "Border "
-    },
+    { "token": "border-width-100", "context": "Border" },
+    { "token": "thumbnail-border-color", "context": "Border " },
+    { "token": "thumbnail-border-opacity", "context": "Border " },
     {
       "token": "opacity-checkerboard-square-light",
       "context": "Checkerboard Colors "
@@ -138,12 +101,7 @@
       "token": "opacity-checkerboard-square-dark",
       "context": "Checkerboard Colors "
     },
-    {
-      "token": "thumbnail-opacity-disabled",
-      "context": "Disabled"
-    }
+    { "token": "thumbnail-opacity-disabled", "context": "Disabled" }
   ],
-  "accessibility": {
-    "focusable": false
-  }
+  "accessibility": { "focusable": false }
 }

package/components/toast.json

@@ -9,133 +9,151 @@
     "category": "feedback",
     "documentationUrl": "https://spectrum.adobe.com/page/toast/"
   },
-  "options": {
-    "text": {
-      "type": "string"
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken."
     },
-    "variant": {
-      "type": "string",
-      "default": "neutral",
-      "values": [
-        {
-          "value": "neutral"
-        },
-        {
-          "value": "informative"
-        },
-        {
-          "value": "positive"
-        },
-        {
-          "value": "negative"
-        }
-      ]
+    {
+      "type": "guideline",
+      "content": "Toasts display brief, temporary notifications. They appear briefly without blocking interaction and typically do not require user action."
     },
-    "actionLabel": {
-      "type": "string",
-      "description": "If undefined, this button does not appear."
+    {
+      "type": "guideline",
+      "content": "Toasts must include text to communicate a message. Write the text as concisely as possible while still being clear about what has happened or is happening."
     },
-    "isAutoDismissible": {
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "tokenBindings": [
     {
-      "token": "toast-height",
-      "context": "Height"
+      "type": "guideline",
+      "content": "The neutral toast is the default variant. It is gray and does not have an icon. This is used when the message is neutral in tone or when its semantics do not fit in any of the other variants."
     },
     {
-      "token": "toast-maximum-width",
-      "context": "Width (maximum)"
+      "type": "guideline",
+      "content": "The informative toast uses the informative semantic color (blue) and has an info icon to help those with color vision deficiency discern the message tone. This should be used when the message should call extra attention compared to the neutral variant."
     },
     {
-      "token": "corner-radius-800",
-      "context": "Rounding"
+      "type": "guideline",
+      "content": "The positive toast uses the positive semantic color (green) and has a checkmark icon to help those with color vision deficiency discern the message tone. This is used to inform about a successful action or completion of a task."
     },
     {
-      "token": "workflow-icon-size-100",
-      "context": "Icon"
+      "type": "guideline",
+      "content": "The negative toast uses the negative semantic color (red) and has an alert icon to help those with color vision deficiency to discern the message tone. This is used to show an error or failure."
     },
     {
-      "token": "text-to-visual-300",
-      "context": "Spacing (icon to text)"
+      "type": "guideline",
+      "content": "By default, a toast will dismiss when the user clicks the close button. A toast also has the option to auto-dismiss. Be sure to set a minimum of 5 seconds so that users can have time to read the toast message. If an actionable toast is set to auto-dismiss, make sure that the action is still available elsewhere in the app."
     },
     {
-      "token": "spacing-400",
-      "context": "Spacing (text to button, horizontal)"
+      "type": "guideline",
+      "content": "When the text is too long for the available horizontal space, it wraps to form another line. In actionable toasts, the button moves below the text prior to text wrapping."
     },
     {
-      "token": "spacing-300",
-      "context": "Spacing (start edge to text and icon)"
+      "type": "guideline",
+      "content": "The default state can display up to three toasts at a time. To view additional toasts beyond this limit, users can click the “Show all” action button. Alternatively, they can reveal remaining toasts by interacting with a button or dismissing the component. Additionally, hovering over the upper part of the toasts triggers a subtle animation, signaling to the user that the group can be fully expanded."
     },
     {
-      "token": "spacing-200",
-      "context": "Spacing (button to close button, horizontal)"
+      "type": "guideline",
+      "content": "Please refer to more multiple toasts usage guideline below."
     },
     {
-      "token": "spacing-100",
-      "context": "Spacing (close button to end edge)"
+      "type": "guideline",
+      "content": "Toasts should only be used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience."
     },
     {
-      "token": "toast-top-to-workflow-icon",
-      "context": "18px (desktop), 20px (mobile)"
+      "type": "guideline",
+      "content": "Dialogs are ideal for when a situation requires a user’s attention, either for displaying important information or prompting for a response."
     },
     {
-      "token": "toast-top-to-text",
-      "context": "18px (desktop), 20px (mobile)"
+      "type": "guideline",
+      "content": "By default, a toast is placed at the bottom center for both desktop and mobile platform scales to avoid disrupting the user experience."
     },
     {
-      "token": "toast-bottom-to-text",
-      "context": "20px (desktop), 22px (mobile)"
+      "type": "guideline",
+      "content": "For desktop applications, a toast should be placed 16 px away from the bottom of the viewport."
     },
     {
-      "token": "neutral-subdued-background-color-default",
-      "context": "Background"
+      "type": "guideline",
+      "content": "If a toast isn’t noticeable or disrupts the user experience, its placement can be changed to bottom end, top end, or top center."
     },
     {
-      "token": "informative-background-color-default",
-      "context": "Background"
+      "type": "guideline",
+      "content": "Actionable toasts should only have one button."
     },
     {
-      "token": "positive-background-color-default",
-      "context": "Background"
+      "type": "guideline",
+      "content": "Actionable toasts should not have a button with a redundant action. For example, including a “Dismiss” button would be redundant because all toasts already have a close button."
     },
     {
-      "token": "negative-background-color-default",
-      "context": "Background"
+      "type": "guideline",
+      "content": "Products should allow for users to be able turn off all types of alerts. Doing this helps people who want to focus and minimize information that they may find non-essential."
+    }
+  ],
+  "options": {
+    "text": { "type": "string" },
+    "variant": {
+      "type": "string",
+      "default": "neutral",
+      "values": [
+        { "value": "neutral" },
+        { "value": "informative" },
+        { "value": "positive" },
+        { "value": "negative" }
+      ]
     },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "isAutoDismissible": { "type": "boolean", "default": false }
+  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
+  "tokenBindings": [
+    { "token": "toast-height", "context": "Height" },
+    { "token": "toast-maximum-width", "context": "Width (maximum)" },
+    { "token": "corner-radius-800", "context": "Rounding" },
+    { "token": "workflow-icon-size-100", "context": "Icon" },
+    { "token": "text-to-visual-300", "context": "Spacing (icon to text)" },
     {
-      "token": "white",
-      "context": "Text and icon"
+      "token": "spacing-400",
+      "context": "Spacing (text to button, horizontal)"
     },
     {
-      "token": "default-font-family",
-      "context": "Value"
+      "token": "spacing-300",
+      "context": "Spacing (start edge to text and icon)"
+    },
+    {
+      "token": "spacing-200",
+      "context": "Spacing (button to close button, horizontal)"
     },
+    { "token": "spacing-100", "context": "Spacing (close button to end edge)" },
     {
-      "token": "regular-font-weight",
-      "context": "Value"
+      "token": "toast-top-to-workflow-icon",
+      "context": "18px (desktop), 20px (mobile)"
     },
     {
-      "token": "default-font-style",
-      "context": "Value"
+      "token": "toast-top-to-text",
+      "context": "18px (desktop), 20px (mobile)"
     },
     {
-      "token": "font-size-100",
-      "context": "Value"
+      "token": "toast-bottom-to-text",
+      "context": "20px (desktop), 22px (mobile)"
     },
     {
-      "token": "line-height-100",
-      "context": "Value"
+      "token": "neutral-subdued-background-color-default",
+      "context": "Background"
     },
     {
-      "token": "cjk-line-height-100",
-      "context": "Value"
+      "token": "informative-background-color-default",
+      "context": "Background"
     },
+    { "token": "positive-background-color-default", "context": "Background" },
+    { "token": "negative-background-color-default", "context": "Background" },
+    { "token": "white", "context": "Text and icon" },
+    { "token": "default-font-family", "context": "Value" },
+    { "token": "regular-font-weight", "context": "Value" },
+    { "token": "default-font-style", "context": "Value" },
+    { "token": "font-size-100", "context": "Value" },
+    { "token": "line-height-100", "context": "Value" },
+    { "token": "cjk-line-height-100", "context": "Value" },
     {
       "token": "neutral-background-color-default",
       "context": "Toast token changes (Jan 2025)"
@@ -146,11 +164,7 @@
     "focusable": true,
     "keyboardIntents": ["dismiss"],
     "wcag": [
-      {
-        "criterion": "4.1.3",
-        "level": "AA",
-        "title": "Status Messages"
-      }
+      { "criterion": "4.1.3", "level": "AA", "title": "Status Messages" }
     ]
   }
 }