@adobe/spectrum-design-data 0.4.0 → 0.7.0

package/components/progress-circle.json

@@ -9,18 +9,41 @@
     "category": "status",
     "documentationUrl": "https://spectrum.adobe.com/page/progress-circle/"
   },
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress."
+    },
+    {
+      "type": "guideline",
+      "content": "Progress circles can be determinate or indeterminate. Use determinate when progress can be measured against a goal, such as downloading a file. Use indeterminate when the duration or effort is unknown, like reconnecting to a server."
+    },
+    {
+      "type": "guideline",
+      "content": "Progress circles come in 3 sizes: small, medium (default), or large. These are available to fit various contexts. For example, the small progress circle can be used in place of an icon or in tight spaces, while the large one can be used for full-page loading."
+    },
+    {
+      "type": "guideline",
+      "content": "The value represents progress within the circle’s range, from minimum to maximum. These defaults are 0 and 100 but can be customized. Min and max values don’t apply to indeterminate progress circles."
+    },
+    {
+      "type": "guideline",
+      "content": "When a progress circle needs to be placed on top of a colored background, use the over background variant. This progress circle uses a static white color regardless of the color theme. Make sure the background offers enough contrast for the progress circle to be legible."
+    },
+    {
+      "type": "guideline",
+      "content": "Medium and large progress circles are optimized for large areas with no space constraints. Use them for loading content into views (e.g., web pages, panels, etc.)"
+    },
+    {
+      "type": "guideline",
+      "content": "Small progress circles are well suited when space is limited both vertically and horizontally, such as in buttons, menu items, and input fields."
+    }
+  ],
   "options": {
     "variant": {
       "type": "string",
       "default": "default",
-      "values": [
-        {
-          "value": "default"
-        },
-        {
-          "value": "over background"
-        }
-      ]
+      "values": [{ "value": "default" }, { "value": "over background" }]
     },
     "value": {
       "type": "number",
@@ -39,63 +62,21 @@
     "size": {
       "type": "string",
       "default": "m",
-      "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        }
-      ]
+      "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
     },
-    "isIndeterminate": {
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
+    "isIndeterminate": { "type": "boolean", "default": false }
   },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "tokenBindings": [
-    {
-      "token": "progress-circle-size-small",
-      "context": "Size"
-    },
-    {
-      "token": "progress-circle-size-medium",
-      "context": "Size"
-    },
-    {
-      "token": "progress-circle-size-large",
-      "context": "Size"
-    },
-    {
-      "token": "progress-circle-thickness-small",
-      "context": "Thickness"
-    },
-    {
-      "token": "progress-circle-thickness-medium",
-      "context": "Thickness"
-    },
-    {
-      "token": "progress-circle-thickness-large",
-      "context": "Thickness"
-    },
-    {
-      "token": "corner-radius-full",
-      "context": "Rounding (fill)"
-    },
-    {
-      "token": "track-color",
-      "context": "Track and fill"
-    },
-    {
-      "token": "accent-content-color-default",
-      "context": "Track and fill"
-    },
+    { "token": "progress-circle-size-small", "context": "Size" },
+    { "token": "progress-circle-size-medium", "context": "Size" },
+    { "token": "progress-circle-size-large", "context": "Size" },
+    { "token": "progress-circle-thickness-small", "context": "Thickness" },
+    { "token": "progress-circle-thickness-medium", "context": "Thickness" },
+    { "token": "progress-circle-thickness-large", "context": "Thickness" },
+    { "token": "corner-radius-full", "context": "Rounding (fill)" },
+    { "token": "track-color", "context": "Track and fill" },
+    { "token": "accent-content-color-default", "context": "Track and fill" },
     {
       "token": "static-white-track-color",
       "context": "Track and fill (white)"
@@ -117,16 +98,8 @@
     "role": "progressbar",
     "focusable": false,
     "wcag": [
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      },
-      {
-        "criterion": "4.1.3",
-        "level": "AA",
-        "title": "Status Messages"
-      }
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" },
+      { "criterion": "4.1.3", "level": "AA", "title": "Status Messages" }
     ]
   }
 }

package/components/radio-button.json

@@ -9,37 +9,70 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/radio-button/"
   },
-  "options": {
-    "isSelected": {
-      "type": "boolean",
-      "default": false
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Radio buttons allow users to select a single option from a list of mutually exclusive options."
     },
-    "isEmphasized": {
-      "type": "boolean",
-      "default": false
+    {
+      "type": "guideline",
+      "content": "Radio buttons present a list of options where only one can be selected at a time. They are styled consistently with other components that support binary selection. Use when all options should be visible and only one can apply."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio button should always have a label for accessibility and clear comprehension. When the label is not defined, a radio button becomes standalone. Standalone radio buttons should only be used when their connection to other components is clear and they give sufficient context — for example, in application panels."
+    },
+    {
+      "type": "guideline",
+      "content": "By default, radio buttons are not emphasized. This version is optimal for when the radio button is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content."
+    },
+    {
+      "type": "guideline",
+      "content": "The emphasized version provides a visual prominence that is optimal for forms, settings, lists or grids of assets, and other situations where a radio button needs to be noticed."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio button can either be selected or not selected. They cannot be in an indeterminate state (unlike checkboxes)."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio buttons come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page."
+    },
+    {
+      "type": "guideline",
+      "content": "A radio button can be navigated using a keyboard. The keyboard focus state takes the radio button’s visual hover state and adds a blue ring to the radio button in focus."
+    },
+    {
+      "type": "guideline",
+      "content": "When the button text is too long for the horizontal space available, it wraps to form another line."
     },
-    "label": {
-      "type": "string",
-      "description": "The text displayed next to a radio button."
-    }
-  },
-  "states": [
     {
-      "name": "hover",
-      "trigger": "interaction"
+      "type": "guideline",
+      "content": "Radio buttons are best when only one option can be selected at a time from a set (for example choosing one preference or mode). Switches are best for communicating activation (e.g., turning a setting on or off). Checkboxes are best for communicating selection (e.g., selecting multiple items from a list)."
     },
     {
-      "name": "down",
-      "trigger": "interaction"
+      "type": "guideline",
+      "content": "Emphasized radio buttons are optimal for forms, settings, and other scenarios where the radio buttons need to be noticed. Default radio buttons are optimal for application panels where all the visual components are monochrome in order to direct focus to the canvas."
     },
     {
-      "name": "keyboard-focus",
-      "trigger": "interaction"
+      "type": "guideline",
+      "content": "Radio buttons can only be on or off. Indeterminate radio buttons don’t exist in accessibility APIs, so it’s not possible to make an indeterminate radio button accessible. If you need to show a partial state, use a checkbox instead of a radio button. When a parent radio button represents a group of radio buttons, it should be turned off unless all of the radio buttons are on (turning the parent radio button on turns all of the radio buttons on)."
     }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
+  "options": {
+    "isSelected": { "type": "boolean", "default": false },
+    "isEmphasized": { "type": "boolean", "default": false },
+    "label": {
+      "type": "string",
+      "description": "The text displayed next to a radio button."
+    }
   },
+  "states": [
+    { "name": "hover", "trigger": "interaction" },
+    { "name": "down", "trigger": "interaction" },
+    { "name": "keyboard-focus", "trigger": "interaction" }
+  ],
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "tokenBindings": [
     {
       "token": "radio-button-control-size-small",
@@ -97,22 +130,10 @@
       "token": "neutral-background-color-selected-key-focus",
       "context": "S1 Control (selected, non emphasized)"
     },
-    {
-      "token": "component-height-75",
-      "context": "Minimum height"
-    },
-    {
-      "token": "component-height-100",
-      "context": "Minimum height"
-    },
-    {
-      "token": "component-height-200",
-      "context": "Minimum height"
-    },
-    {
-      "token": "component-height-300",
-      "context": "Minimum height"
-    },
+    { "token": "component-height-75", "context": "Minimum height" },
+    { "token": "component-height-100", "context": "Minimum height" },
+    { "token": "component-height-200", "context": "Minimum height" },
+    { "token": "component-height-300", "context": "Minimum height" },
     {
       "token": "component-size-difference-down",
       "context": "Component size (down)"
@@ -125,26 +146,11 @@
       "token": "component-size-minimum-perspective-down",
       "context": "Component size (down)"
     },
-    {
-      "token": "border-width-200",
-      "context": "Control (border)"
-    },
-    {
-      "token": "text-to-control-75",
-      "context": "Spacing (control to label)"
-    },
-    {
-      "token": "text-to-control-100",
-      "context": "Spacing (control to label)"
-    },
-    {
-      "token": "text-to-control-200",
-      "context": "Spacing (control to label)"
-    },
-    {
-      "token": "text-to-control-300",
-      "context": "Spacing (control to label)"
-    },
+    { "token": "border-width-200", "context": "Control (border)" },
+    { "token": "text-to-control-75", "context": "Spacing (control to label)" },
+    { "token": "text-to-control-100", "context": "Spacing (control to label)" },
+    { "token": "text-to-control-200", "context": "Spacing (control to label)" },
+    { "token": "text-to-control-300", "context": "Spacing (control to label)" },
     {
       "token": "component-top-to-text-75",
       "context": "Spacing (top/bottom edge to label)"
@@ -177,42 +183,18 @@
       "token": "component-bottom-to-text-300",
       "context": "Spacing (top/bottom edge to label)"
     },
-    {
-      "token": "focus-indicator-thickness",
-      "context": "Focus ring"
-    },
-    {
-      "token": "focus-indicator-gap",
-      "context": "Focus ring"
-    },
+    { "token": "focus-indicator-thickness", "context": "Focus ring" },
+    { "token": "focus-indicator-gap", "context": "Focus ring" },
     {
       "token": "radio-button-selection-indicator",
       "context": "Selection indicator"
     },
-    {
-      "token": "spacing-300",
-      "context": "Radio group spacing (horizontal)"
-    },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Label"
-    },
-    {
-      "token": "neutral-content-color-hover",
-      "context": "Label"
-    },
-    {
-      "token": "neutral-content-color-down",
-      "context": "Label"
-    },
-    {
-      "token": "neutral-content-color-key-focus",
-      "context": "Label"
-    },
-    {
-      "token": "gray-25",
-      "context": "Control"
-    },
+    { "token": "spacing-300", "context": "Radio group spacing (horizontal)" },
+    { "token": "neutral-content-color-default", "context": "Label" },
+    { "token": "neutral-content-color-hover", "context": "Label" },
+    { "token": "neutral-content-color-down", "context": "Label" },
+    { "token": "neutral-content-color-key-focus", "context": "Label" },
+    { "token": "gray-25", "context": "Control" },
     {
       "token": "accent-content-color-default",
       "context": "Control (selected, emphasized)"
@@ -229,58 +211,19 @@
       "token": "accent-content-color-key-focus",
       "context": "Control (selected, emphasized)"
     },
-    {
-      "token": "disabled-content-color",
-      "context": "Label (disabled)"
-    },
-    {
-      "token": "focus-indicator-color",
-      "context": "Focus ring"
-    },
-    {
-      "token": "negative-color-900",
-      "context": "Radio button colors"
-    },
-    {
-      "token": "negative-color-1000",
-      "context": "Radio button colors"
-    },
-    {
-      "token": "default-font-family",
-      "context": "Label"
-    },
-    {
-      "token": "regular-font-weight",
-      "context": "Label"
-    },
-    {
-      "token": "default-font-style",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-75",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-100",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-200",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-300",
-      "context": "Label"
-    },
-    {
-      "token": "line-height-100",
-      "context": "Label"
-    },
-    {
-      "token": "cjk-line-height-100",
-      "context": "Label"
-    }
+    { "token": "disabled-content-color", "context": "Label (disabled)" },
+    { "token": "focus-indicator-color", "context": "Focus ring" },
+    { "token": "negative-color-900", "context": "Radio button colors" },
+    { "token": "negative-color-1000", "context": "Radio button colors" },
+    { "token": "default-font-family", "context": "Label" },
+    { "token": "regular-font-weight", "context": "Label" },
+    { "token": "default-font-style", "context": "Label" },
+    { "token": "font-size-75", "context": "Label" },
+    { "token": "font-size-100", "context": "Label" },
+    { "token": "font-size-200", "context": "Label" },
+    { "token": "font-size-300", "context": "Label" },
+    { "token": "line-height-100", "context": "Label" },
+    { "token": "cjk-line-height-100", "context": "Label" }
   ],
   "accessibility": {
     "role": "radio",
@@ -288,21 +231,9 @@
     "focusable": true,
     "keyboardIntents": ["activate"],
     "wcag": [
-      {
-        "criterion": "1.3.1",
-        "level": "A",
-        "title": "Info and Relationships"
-      },
-      {
-        "criterion": "2.1.1",
-        "level": "A",
-        "title": "Keyboard"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
+      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/radio-group.json

@@ -9,105 +9,138 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/radio-group/"
   },
-  "options": {
-    "label": {
-      "type": "string"
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "A radio group is a grouping of radio buttons that are related to each other."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio groups organize related radio buttons into a single selection set. Only one option can be selected at a time."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio groups should use help text for error messaging and descriptions. Descriptions are valuable for giving context behind why a selection is required, or for clarifying the options."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio groups can be marked as having an error to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid. The error is indicated with negative help text, along with an icon."
+    },
+    {
+      "type": "guideline",
+      "content": "A radio group in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later. The field label, radio buttons, and help text are all displayed in a disabled state when the radio group is disabled."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio groups can be marked as optional or required, depending on the situation. For required radio groups, there are two styling options: a “(required)” label or an asterisk. If you use an asterisk, be sure to include help text to explain what the asterisk means. Optional radio groups are either denoted with text added to the end of the label — “(optional)” — or have no indication at all."
+    },
+    {
+      "type": "guideline",
+      "content": "The asterisk used in this component is an icon that has specific spacing from the label text — not part of the label text itself."
+    },
+    {
+      "type": "guideline",
+      "content": "By default, radio buttons are not emphasized (gray). This option is best for when the radio button is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content."
+    },
+    {
+      "type": "guideline",
+      "content": "The emphasized (blue) version provides a visual prominence that is best for forms, settings, lists or grids of assets, and other situations where a radio button needs to be noticed."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio groups come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio groups can be either horizontal or vertical. By default, radio groups are vertical. Use a horizontal radio group when vertical space is limited."
+    },
+    {
+      "type": "guideline",
+      "content": "Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio groups should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These radio groups without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”)."
+    },
+    {
+      "type": "guideline",
+      "content": "A radio button can be navigated using a keyboard. The keyboard focus state takes the radio button’s visual hover state and adds a blue ring to the radio button in focus."
+    },
+    {
+      "type": "guideline",
+      "content": "When the label is too long for the horizontal space available, it wraps to form another line."
+    },
+    {
+      "type": "guideline",
+      "content": "When a radio button group presents multiple values that are not identical, the group should not show a selection. Any subsequent selection should update all values."
+    },
+    {
+      "type": "guideline",
+      "content": "Emphasized radio group is optimal for forms, settings, and other scenarios where the radio group need to be noticed. Default radio group is optimal for application panels where all the visual components are monochrome in order to direct focus to the canvas."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio buttons and checkboxes are not interchangeable. Radio buttons are best used for selecting a single option from a list of mutually exclusive options. Checkboxes are best used for selecting multiple options at once (or no options)."
     },
+    {
+      "type": "guideline",
+      "content": "Radio groups should always have a label that clearly describes what the list of options represents. This is important for accessibility, since a screen reader will read the label before each option. Make sure to include a label, and don't assume that the options are self-explanatory without one. Write the label in sentence case."
+    },
+    {
+      "type": "guideline",
+      "content": "Radio buttons are best when only one option can be selected at a time from a set (e.g., choosing one preference or mode)."
+    },
+    {
+      "type": "guideline",
+      "content": "Switches are best for communicating activation (e.g., turning a setting on or off)."
+    },
+    {
+      "type": "guideline",
+      "content": "Checkboxes are best for communicating selection (e.g., selecting multiple items from a list)."
+    }
+  ],
+  "options": {
+    "label": { "type": "string" },
     "labelPosition": {
       "type": "string",
       "default": "top",
-      "values": [
-        {
-          "value": "top"
-        },
-        {
-          "value": "side"
-        }
-      ]
+      "values": [{ "value": "top" }, { "value": "side" }]
     },
     "orientation": {
       "type": "string",
       "default": "vertical",
-      "values": [
-        {
-          "value": "horizontal"
-        },
-        {
-          "value": "vertical"
-        }
-      ]
+      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
     },
     "size": {
       "type": "string",
       "default": "m",
       "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        },
-        {
-          "value": "xl"
-        }
+        { "value": "s" },
+        { "value": "m" },
+        { "value": "l" },
+        { "value": "xl" }
       ]
     },
-    "isEmphasized": {
-      "type": "boolean",
-      "default": false
-    },
+    "isEmphasized": { "type": "boolean", "default": false },
     "necessityIndicator": {
       "type": "string",
       "default": "icon",
-      "values": [
-        {
-          "value": "text"
-        },
-        {
-          "value": "icon"
-        }
-      ]
-    },
-    "isRequired": {
-      "type": "boolean",
-      "default": false
-    },
-    "isError": {
-      "type": "boolean",
-      "default": false
+      "values": [{ "value": "text" }, { "value": "icon" }]
     },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "errorMessage": {
-      "type": "string"
-    },
-    "description": {
-      "type": "string"
-    }
-  },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
+    "isRequired": { "type": "boolean", "default": false },
+    "isError": { "type": "boolean", "default": false },
+    "isDisabled": { "type": "boolean", "default": false },
+    "errorMessage": { "type": "string" },
+    "description": { "type": "string" }
   },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "tokenBindings": [],
   "accessibility": {
     "intents": ["choose"],
     "focusable": false,
     "wcag": [
-      {
-        "criterion": "1.3.1",
-        "level": "A",
-        "title": "Info and Relationships"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }