@adobe/design-data-spec 0.3.0 → 0.4.0

package/components/tabs.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/tabs.json",
+  "specVersion": "1.0.0-draft",
+  "name": "tabs",
+  "displayName": "Tabs",
+  "description": "Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/tabs/"
+  },
+  "options": {
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "horizontal"
+    },
+    "items": {
+      "type": "array",
+      "description": "An array of tab items.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text displayed for the tab item."
+          },
+          "isDisabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether the tab is disabled."
+          },
+          "state": {
+            "type": "string",
+            "enum": ["default", "hover", "keyboard focus"],
+            "default": "default",
+            "description": "The interaction state of the tab item."
+          },
+          "contentVariant": {
+            "type": "string",
+            "enum": ["label-only", "icon-only", "icon-label"],
+            "default": "icon-label",
+            "description": "Controls whether the tab displays a label, an icon, or both."
+          },
+          "density": {
+            "type": "string",
+            "enum": ["compact", "regular"],
+            "default": "regular"
+          },
+          "isFluid": {
+            "type": "boolean",
+            "default": false,
+            "description": "This overrides density and is only applicable to horizontal tabs."
+          },
+          "isEmphasized": {
+            "type": "boolean",
+            "default": false
+          },
+          "alignment": {
+            "type": "string",
+            "enum": ["start", "center"],
+            "default": "start"
+          },
+          "selectedItem": {
+            "description": "(list of available items)"
+          },
+          "keyboardActivation": {
+            "type": "string",
+            "enum": ["manual", "automatic"],
+            "default": "manual"
+          }
+        }
+      }
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/tag-field.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/tag-field.json",
+  "specVersion": "1.0.0-draft",
+  "name": "tag-field",
+  "displayName": "Tag field",
+  "description": "A tag field is an input field that allows users to enter and manage tags.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/tag-field/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "m"
+    },
+    "style": {
+      "type": "string",
+      "enum": ["keyword", "icon", "thumbnail", "avatar"],
+      "default": "keyword"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "focus-+-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "focus-+-not-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/tag-group.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/tag-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "tag-group",
+  "displayName": "Tag group",
+  "description": "A tag group is a collection of tags that represent a set of related items.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/tag-group/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "m"
+    },
+    "labelPosition": {
+      "type": "string",
+      "enum": ["top", "side"],
+      "default": "top"
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/tag.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/tag.json",
+  "specVersion": "1.0.0-draft",
+  "name": "tag",
+  "displayName": "Tag",
+  "description": "Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/tag/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "hasAvatar": {
+      "type": "boolean",
+      "default": false
+    },
+    "isRemovable": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isReadOnly": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/takeover-dialog.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/takeover-dialog.json",
+  "specVersion": "1.0.0-draft",
+  "name": "takeover-dialog",
+  "displayName": "Takeover dialog",
+  "description": "Takeover dialogs are larger, flexible dialogs that contain other components to support complex workflows.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/takeover-dialog/"
+  },
+  "options": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["dialog", "full screen"],
+      "default": "dialog"
+    },
+    "primaryActionLabel": {
+      "type": "string"
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "cancelActionLabel": {
+      "type": "string",
+      "default": "cancel",
+      "description": "If undefined, this button does not appear."
+    },
+    "slots": {
+      "type": "array",
+      "description": "Areas where other components can be inserted (e.g. Side navigation, Steplist, Forms).",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "description": "Identifier for the slot (e.g. 'sidebar', 'content', 'footer')."
+          },
+          "component": {
+            "type": "string",
+            "description": "The type of component placed in this slot (e.g. side-navigation, steplist, form)."
+          }
+        },
+        "required": ["name", "component"]
+      }
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/text-area.json

@@ -0,0 +1,103 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/text-area.json",
+  "specVersion": "1.0.0-draft",
+  "name": "text-area",
+  "displayName": "Text area",
+  "description": "A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/text-area/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "default": "top",
+      "enum": ["top", "side"]
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "type": "string",
+      "description": "from minValue to maxValue"
+    },
+    "width": {
+      "type": "number"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "enum": ["text", "icon"],
+      "default": "icon"
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "hasCharacterCount": {
+      "type": "boolean",
+      "default": false
+    },
+    "showValidIcon": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "hideDragIcon": {
+      "type": "boolean",
+      "default": false
+    },
+    "height": {
+      "type": "number",
+      "description": "If undefined, height is dynamic and grows with input text."
+    },
+    "helpText": {
+      "type": "string"
+    },
+    "errorMessage": {
+      "type": "string"
+    },
+    "inputType": {
+      "type": "string",
+      "enum": ["text", "url", "phone", "email", "password"],
+      "default": "text"
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "focus-+-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "focus-+-not-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/text-field.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/text-field.json",
+  "specVersion": "1.0.0-draft",
+  "name": "text-field",
+  "displayName": "Text field",
+  "description": "Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/text-field/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "default": "top",
+      "enum": ["top", "side"]
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "type": "string",
+      "description": "from minValue to maxValue"
+    },
+    "width": {
+      "type": "number"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "enum": ["text", "icon"],
+      "default": "icon"
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "hasCharacterCount": {
+      "type": "boolean",
+      "default": false
+    },
+    "showValidIcon": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false,
+      "description": "If there is an error, this property overrides show valid icon."
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "helpText": {
+      "type": "string"
+    },
+    "errorMessage": {
+      "type": "string"
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "focus-+-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "focus-+-not-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/thumbnail.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/thumbnail.json",
+  "specVersion": "1.0.0-draft",
+  "name": "thumbnail",
+  "displayName": "Thumbnail",
+  "description": "Thumbnails are small representations of images or content used for previews and navigation in galleries, lists, and media collections.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/thumbnail/"
+  },
+  "options": {
+    "size": {
+      "type": "number",
+      "enum": [50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]
+    }
+  },
+  "states": [
+    {
+      "name": "disabled",
+      "trigger": "prop"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/toast.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/toast.json",
+  "specVersion": "1.0.0-draft",
+  "name": "toast",
+  "displayName": "Toast",
+  "description": "Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/toast/"
+  },
+  "options": {
+    "text": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["neutral", "informative", "positive", "negative"],
+      "default": "neutral"
+    },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "isAutoDismissible": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/tooltip.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/tooltip.json",
+  "specVersion": "1.0.0-draft",
+  "name": "tooltip",
+  "displayName": "Tooltip",
+  "description": "Tooltips show contextual help or information about specific components when a user hovers or focuses on them.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/tooltip/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["neutral", "informative", "negative"],
+      "default": "neutral"
+    },
+    "hasIcon": {
+      "type": "boolean",
+      "description": "If the neutral variant, there is never an icon.",
+      "default": false
+    },
+    "maxWidth": {
+      "type": "number",
+      "default": 160,
+      "description": "units: pixels"
+    },
+    "placement": {
+      "type": "string",
+      "enum": ["top", "bottom", "left", "right"],
+      "default": "top"
+    },
+    "shouldFlip": {
+      "type": "boolean",
+      "default": false
+    },
+    "offset": {
+      "type": "number",
+      "default": 4,
+      "description": "units: pixels"
+    },
+    "containerPadding": {
+      "type": "number",
+      "default": 8,
+      "description": "units: pixels"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/tray.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/tray.json",
+  "specVersion": "1.0.0-draft",
+  "name": "tray",
+  "displayName": "Tray",
+  "description": "Trays are containers that display transient content such as menus, options, additional actions, and more. They only exist on mobile experiences and are used for exposing types of content that may be too overwhelming for popovers.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/tray/"
+  },
+  "options": {
+    "height": {
+      "type": "string",
+      "default": "auto"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/tree-view.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/tree-view.json",
+  "specVersion": "1.0.0-draft",
+  "name": "tree-view",
+  "displayName": "Tree view",
+  "description": "A tree view provides users with a way to navigate nested hierarchical information.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/tree-view/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isDetached": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "showDragIcon": {
+      "type": "boolean",
+      "default": false
+    },
+    "selectionMode": {
+      "type": "string",
+      "enum": ["single", "multiple"],
+      "default": "multiple"
+    },
+    "selectionStyle": {
+      "type": "string",
+      "enum": ["checkbox", "highlight"],
+      "default": "checkbox"
+    },
+    "selectionBehavior": {
+      "type": "string",
+      "enum": ["toggle", "replace"],
+      "default": "toggle"
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}