@adobe/spectrum-component-api-schemas 1.0.2 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,86 @@
 # @adobe/spectrum-component-api-schemas
 
+## 3.0.0
+
+### Major Changes
+
+- [#610](https://github.com/adobe/spectrum-tokens/pull/610) [`13d9202`](https://github.com/adobe/spectrum-tokens/commit/13d920273c02c78d3748522de6a7c7ee39b39814) Thanks [@GarthDB](https://github.com/GarthDB)! - Component schema improvements for Batch 1 components
+
+  Quality control pass on the Design API table for v0, ensuring schema consistency and completeness across S2 components.
+
+  ## Component Schemas Changed (0 added, 0 deleted, 11 updated)
+
+  **Original Branch:** `main`
+  **New Branch:** `component-schema-batch1-fixes`
+
+  ### 🚨 Breaking Changes Detected (5)
+
+  This release introduces **5 breaking change(s)** to component schemas. Please review carefully and ensure proper versioning.
+
+  <details open><summary><strong>💥 Breaking Updates</strong></summary>
+
+  **popover**
+  - Added: `hideTip` (boolean, default: false) - replaces removed `showTip`
+
+  **rating**
+  - Added: `value.minimum` (0), `value.maximum` (5), `value.multipleOf` (0.5)
+  - Updated: `value.description` - "From 0 to 5, can be a decimal to represent half stars"
+
+  **select-box**
+  - Added: `hideIllustration` (boolean, default: false) - replaces removed `showIllustration`
+  - Added: `isDisabled` (boolean, default: false)
+  - Added: `multiple` (boolean, default: false) - "Set to true to allow multiple selections"
+  - Updated: `orientation.default` changed to "vertical"
+
+  **status-light**
+  - Added: Colors to `variant.enum`: "gray", "red", "orange", "green", "cyan"
+  - Added: `required` - ["label"] - label is now required
+  - Removed: `isDisabled` property
+
+  **tooltip**
+  - Removed: "positive" from `variant.enum`
+  - Updated: `hasIcon.description` - "If the neutral variant, there is never an icon"
+
+  </details>
+
+  ### ✅ Non-Breaking Updates (6)
+
+  <details><summary><strong>🔄 Compatible Changes</strong></summary>
+
+  **help-text**
+  - Added: "negative" to `variant.enum`
+  - Added: `isDisabled.description` - "Help text cannot be both disabled and negative variant"
+
+  **meter**
+  - Added: `hideLabel` (boolean, default: false)
+
+  **progress-bar**
+  - Added: `staticColor` (string, enum: ["white"]) - "Static color can only be white, otherwise it is default"
+  - Added: `labelPosition` (string, enum: ["top", "side"], default: "top")
+  - Added: `hideLabel` (boolean, default: false)
+
+  **search-field**
+  - Added: `hideLabel` (boolean, default: false)
+  - Added: `icon` ($ref: workflow-icon.json) - "Icon must be present if the label is not defined"
+
+  **text-area**
+  - Added: `hideLabel` (boolean, default: false)
+
+  **text-field**
+  - Added: `hideLabel` (boolean, default: false)
+
+  </details>
+
+## 2.0.0
+
+### Major Changes
+
+- [#581](https://github.com/adobe/spectrum-tokens/pull/581) [`163fe7c`](https://github.com/adobe/spectrum-tokens/commit/163fe7c13bb00c639d202195a398126b6c25b58f) Thanks [@GarthDB](https://github.com/GarthDB)! - feat(component-schemas): add S2 Batch 2 components with breaking changes
+  - Add 6 new component schemas (coach-indicator, in-field-progress-button, etc.)
+  - Update avatar, badge, and checkbox components with breaking changes
+  - Expand size options and add new interaction states
+  - Major version bump required due to breaking schema changes
+
 ## 1.0.2
 
 ### Patch Changes

package/moon.yml

@@ -8,7 +8,7 @@
 # OF ANY KIND, either express or implied. See the License for the specific language
 # governing permissions and limitations under the License.
 $schema: "https://moonrepo.dev/schemas/project.json"
-type: library
+layer: library
 fileGroups:
   schemas:
     - "schemas/**/*.{yaml,yml,json}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-component-api-schemas",
-  "version": "1.0.2",
+  "version": "3.0.0",
   "description": "",
   "type": "module",
   "main": "index.js",

package/schemas/components/avatar.json

@@ -11,21 +11,34 @@
   "properties": {
     "size": {
       "type": "number",
-      "enum": [50, 75, 100, 200, 300, 400, 500, 600, 700],
-      "default": 100
+      "enum": [
+        50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200,
+        1300, 1400, 1500
+      ],
+      "default": 500
     },
     "image": {
       "type": "string",
-      "enum": ["text", "image"],
-      "default": "image"
+      "enum": [
+        "user image",
+        "gradient image",
+        "gradient",
+        "guest image",
+        "initials"
+      ],
+      "default": "user image"
     },
     "isDisabled": {
       "type": "boolean",
       "default": false
     },
+    "showStroke": {
+      "type": "boolean",
+      "default": false
+    },
     "state": {
       "type": "string",
-      "enum": ["default", "hover", "down", "keyboard focus"],
+      "enum": ["default", "down", "keyboard focus"],
       "default": "default"
     }
   }

package/schemas/components/badge.json

@@ -28,9 +28,28 @@
         "magenta",
         "fuchsia",
         "purple",
-        "seafoam"
+        "seafoam",
+        "accent",
+        "notice",
+        "gray",
+        "red",
+        "orange",
+        "chartreuse",
+        "celery",
+        "green",
+        "cyan",
+        "blue",
+        "pink",
+        "turquoise",
+        "brown",
+        "cinnamon",
+        "silver"
       ]
     },
+    "style": {
+      "type": "string",
+      "enum": ["bold", "subtle", "outline"]
+    },
     "fixed": {
       "type": "string",
       "enum": ["none", "top", "right", "bottom", "left"],

package/schemas/components/checkbox.json

@@ -39,10 +39,7 @@
       "type": "boolean",
       "default": false
     },
-    "isReadOnly": {
-      "type": "boolean",
-      "default": false
-    },
+
     "state": {
       "type": "string",
       "enum": ["default", "hover", "down", "keyboard focus"],

package/schemas/components/coach-indicator.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/coach-indicator.json",
+  "title": "Coach indicator",
+  "description": "Coach indicators help guide users through interfaces by highlighting important areas or features during onboarding and feature discovery.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/coach-indicator/"
+  },
+  "type": "object",
+  "properties": {
+    "cornerRounding": {
+      "type": "string",
+      "enum": [
+        "none",
+        "corner-radius-75",
+        "corner-radius-100",
+        "corner-radius-200",
+        "corner-radius-300",
+        "corner-radius-400",
+        "corner-radius-500",
+        "corner-radius-600",
+        "corner-radius-700",
+        "corner-radius-800",
+        "full"
+      ]
+    },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white"],
+      "description": "If not set to white, the coach indicator uses the default color."
+    }
+  }
+}

package/schemas/components/help-text.json

@@ -14,7 +14,7 @@
     },
     "variant": {
       "type": "string",
-      "enum": ["neutral"],
+      "enum": ["neutral", "negative"],
       "default": "neutral"
     },
     "hideIcon": {
@@ -29,7 +29,8 @@
     },
     "isDisabled": {
       "type": "boolean",
-      "default": false
+      "default": false,
+      "description": "Help text cannot be both disabled and negative variant."
     }
   }
 }

package/schemas/components/in-field-progress-button.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/in-field-progress-button.json",
+  "title": "In field progress button",
+  "description": "In field progress buttons provide interactive controls within form fields for actions like clearing, adding, or disclosing additional content.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/in-field-progress-button/"
+  },
+  "type": "object",
+  "properties": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "state": {
+      "type": "string",
+      "enum": ["default", "hover", "down", "keyboard focus"],
+      "default": "default"
+    },
+    "style": {
+      "type": "string",
+      "enum": ["disclosure", "clear", "dash", "add"]
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    }
+  }
+}

package/schemas/components/in-field-progress-circle.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/in-field-progress-circle.json",
+  "title": "In field progress circle",
+  "description": "In field progress circles indicate progress for loading states within form fields and input areas.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/in-field-progress-circle/"
+  },
+  "type": "object",
+  "properties": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white", "black"]
+    }
+  }
+}

package/schemas/components/meter.json

@@ -17,6 +17,10 @@
     "label": {
       "type": "string"
     },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
     "valueLabel": {
       "type": "string"
     },

package/schemas/components/opacity-checkerboard.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/opacity-checkerboard.json",
+  "title": "Opacity Checkerboard",
+  "description": "Opacity checkerboards provide a visual pattern background used in color swatches and UI elements to indicate transparency or when no color is selected.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/opacity-checkerboard/"
+  },
+  "type": "object",
+  "properties": {
+    "verticalSize": {
+      "type": "number",
+      "enum": [16, 32, 64, 128, 256]
+    },
+    "horizontalSize": {
+      "type": "number",
+      "enum": [24, 40]
+    }
+  }
+}

package/schemas/components/popover.json

@@ -15,9 +15,9 @@
     "height": {
       "type": "number"
     },
-    "showTip": {
+    "hideTip": {
       "type": "boolean",
-      "default": true
+      "default": false
     },
     "placement": {
       "type": "string",

package/schemas/components/progress-bar.json

@@ -14,9 +14,23 @@
       "enum": ["default", "over background"],
       "default": "default"
     },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white"],
+      "description": "Static color can only be white, otherwise it is default."
+    },
     "label": {
       "type": "string"
     },
+    "labelPosition": {
+      "type": "string",
+      "enum": ["top", "side"],
+      "default": "top"
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
     "value": {
       "type": "number",
       "description": "Not applicable when indeterminate."

package/schemas/components/radio-button.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/radio-button.json",
+  "title": "Radio button",
+  "description": "Radio buttons allow users to select a single option from a list of mutually exclusive options.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/radio-button/"
+  },
+  "type": "object",
+  "properties": {
+    "state": {
+      "type": "string",
+      "enum": ["default", "hover", "down", "keyboard focus"],
+      "default": "default"
+    },
+    "isSelected": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "label": {
+      "type": "boolean",
+      "default": true
+    }
+  }
+}

package/schemas/components/rating.json

@@ -11,9 +11,11 @@
   "properties": {
     "value": {
       "type": "number",
-      "enum": [0, 1, 2, 3, 4, 5],
+      "minimum": 0,
+      "maximum": 5,
       "default": 0,
-      "description": "From 0 to 5"
+      "multipleOf": 0.5,
+      "description": "From 0 to 5, can be a decimal to represent half stars"
     },
     "isEmphasized": {
       "type": "boolean",

package/schemas/components/search-field.json

@@ -12,6 +12,14 @@
     "label": {
       "type": "string"
     },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json",
+      "description": "Icon must be present if the label is not defined."
+    },
     "value": {
       "type": "string"
     },

package/schemas/components/select-box.json

@@ -15,7 +15,7 @@
     "orientation": {
       "type": "string",
       "enum": ["horizontal", "vertical"],
-      "default": "horizontal"
+      "default": "vertical"
     },
     "body": {
       "type": "string"
@@ -24,7 +24,7 @@
       "type": "boolean",
       "default": false
     },
-    "showIllustration": {
+    "hideIllustration": {
       "type": "boolean",
       "default": false
     },
@@ -32,10 +32,19 @@
       "type": "boolean",
       "default": false
     },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
     "state": {
       "type": "string",
       "enum": ["default", "down", "hover", "keyboard focus"],
       "default": "default"
+    },
+    "multiple": {
+      "type": "boolean",
+      "default": false,
+      "description": "Set to true to allow multiple selections."
     }
   }
 }

package/schemas/components/status-light.json

@@ -32,7 +32,12 @@
         "turquoise",
         "cinnamon",
         "brown",
-        "silver"
+        "silver",
+        "gray",
+        "red",
+        "orange",
+        "green",
+        "cyan"
       ],
       "default": "informative"
     },
@@ -40,10 +45,7 @@
       "type": "string",
       "enum": ["s", "m", "l", "xl"],
       "default": "m"
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
     }
-  }
+  },
+  "required": ["label"]
 }

package/schemas/components/text-area.json

@@ -17,6 +17,10 @@
       "default": "top",
       "enum": ["top", "side"]
     },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
     "value": {
       "type": "string",
       "description": "from minValue to maxValue"

package/schemas/components/text-field.json

@@ -17,6 +17,10 @@
       "default": "top",
       "enum": ["top", "side"]
     },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
     "value": {
       "type": "string",
       "description": "from minValue to maxValue"

package/schemas/components/thumbnail.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/thumbnail.json",
+  "title": "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/"
+  },
+  "type": "object",
+  "properties": {
+    "size": {
+      "type": "number",
+      "enum": [50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]
+    },
+    "state": {
+      "type": "string",
+      "enum": ["default", "disabled"],
+      "default": "default"
+    }
+  }
+}

package/schemas/components/tooltip.json

@@ -14,12 +14,12 @@
     },
     "variant": {
       "type": "string",
-      "enum": ["neutral", "informative", "positive", "negative"],
+      "enum": ["neutral", "informative", "negative"],
       "default": "neutral"
     },
     "hasIcon": {
       "type": "boolean",
-      "description": "If the neutral variant, there’s never an icon.",
+      "description": "If the neutral variant, there is never an icon.",
       "default": false
     },
     "maxWidth": {

package/test/performance.test.js

@@ -63,10 +63,10 @@ test("getSchemaFile should complete within reasonable time", async (t) => {
   const end = performance.now();
   const duration = end - start;
 
-  // Should complete within 50ms
+  // Should complete within 200ms (increased for CI environment stability)
   t.true(
-    duration < 75,
-    `getSchemaFile took ${duration.toFixed(2)}ms, expected < 75ms`,
+    duration < 200,
+    `getSchemaFile took ${duration.toFixed(2)}ms, expected < 200ms`,
   );
   t.truthy(schema);
 });