Merge branch 'spectrum-two' into aramos-adobe/css1016-checkbox-group-s2-migration

Author: aramos-adobe

.changeset/eighty-terms-lead.md

@@ -0,0 +1,61 @@
+---
+"@spectrum-css/rating": major
+---
+
+#### S2 migration rating
+
+This migrates the `rating` component to S2. Custom properties have been remapped and added per the design specification.
+
+##### Additions
+
+The medium component variation is the default and a t-shirt size medium variation has been added.
+
+A tooltip may be displayed to a user indicating whether interacting with the component will clear or edit the rating. A control and documentation example have been added.
+
+A rating may have a partially filled star. The width and fill of this star is controlled by adding `.is-partial` to the parent `span` with classes of `spectrum-Rating-icon` and `is-selected` and then setting `--mod-rating-icon-fill` to the necessary fill percentage (e.g. `50%`).
+
+##### New mods
+
+`--mod-rating-width`
+`--mod-rating-height`
+`--mod-rating-bottom-to-content-area`
+`--mod-rating-edge-to-content-area`
+`--mod-rating-top-to-content-area`
+`--mod-rating-icon-fill`
+
+##### Removed mods
+
+`--mod-rating-icon-spacing-vertical-top`
+`--mod-rating-icon-count`
+`--mod-rating-indicator-border-radius`
+`--mod-rating-indicator-height`
+`--mod-rating-icon-color-key-focus`
+
+##### New custom properties
+
+`--spectrum-rating-width`
+`--spectrum-component-size-difference-down`
+`--spectrum-component-size-minimum-perspective-down`
+`--spectrum-corner-radius-medium-size-medium`
+`--spectrum-corner-radius-medium-size-small`
+`--spectrum-neutral-content-color-default`
+`--spectrum-neutral-content-color-down`
+`--spectrum-neutral-content-color-hover`
+`--spectrum-spacing-75`
+`--spectrum-workflow-icon-size-75`
+
+##### Removed custom properties
+
+`--spectrum-rating-indicator-width`
+`--spectrum-rating-icon-color-key-focus`
+`--spectrum-rating-icon-spacing-vertical-top`
+`--spectrum-rating-indicator-height`
+`--spectrum-rating-indicator-border-radius`
+`--spectrum-accent-content-color-key-focus`
+`--spectrum-border-width-200`
+`--spectrum-component-top-to-workflow-icon-100`
+`--spectrum-corner-radius-100`
+`--spectrum-neutral-subdued-content-color-default`
+`--spectrum-neutral-subdued-content-color-down`
+`--spectrum-neutral-subdued-content-color-hover`
+`--spectrum-neutral-subdued-content-color-key-focus`

components/rating/dist/metadata.json

@@ -7,17 +7,19 @@
     ".spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
     ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected",
     ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon",
-    ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue:after",
     ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active",
     ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover",
     ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
+    ".spectrum-Rating--sizeS",
     ".spectrum-Rating-icon",
     ".spectrum-Rating-icon .spectrum-Rating-starActive",
     ".spectrum-Rating-icon .spectrum-Rating-starInactive",
-    ".spectrum-Rating-icon.is-currentValue:after",
+    ".spectrum-Rating-icon svg",
     ".spectrum-Rating-icon.is-selected",
     ".spectrum-Rating-icon.is-selected .spectrum-Rating-starActive",
     ".spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive",
+    ".spectrum-Rating-icon.is-selected.is-partial .spectrum-Rating-starActive",
+    ".spectrum-Rating-icon.is-selected.is-partial .spectrum-Rating-starInactive",
     ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
     ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive",
     ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive",
@@ -28,86 +30,95 @@
     ".spectrum-Rating.is-disabled .spectrum-Rating-icon",
     ".spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected",
     ".spectrum-Rating.is-focused",
-    ".spectrum-Rating.is-focused .spectrum-Rating-icon",
-    ".spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected",
     ".spectrum-Rating.is-readOnly",
     ".spectrum-Rating:hover .spectrum-Rating-icon",
-    ".spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after",
     ".spectrum-Rating:hover .spectrum-Rating-icon:active",
     ".spectrum-Rating:hover .spectrum-Rating-icon:hover",
     ".spectrum-Rating:hover .spectrum-Rating-starActive",
-    ".spectrum-Rating:hover .spectrum-Rating-starInactive"
+    ".spectrum-Rating:hover .spectrum-Rating-starInactive",
+    ".spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active"
   ],
   "modifiers": [
     "--mod-rating-border-radius",
+    "--mod-rating-bottom-to-content-area",
+    "--mod-rating-edge-to-content-area",
     "--mod-rating-emphasized-icon-color-default",
     "--mod-rating-emphasized-icon-color-down",
     "--mod-rating-emphasized-icon-color-hover",
     "--mod-rating-emphasized-icon-color-key-focus",
     "--mod-rating-focus-indicator-color",
     "--mod-rating-focus-indicator-gap",
     "--mod-rating-focus-indicator-thickness",
+    "--mod-rating-height",
     "--mod-rating-icon-color-default",
     "--mod-rating-icon-color-disabled",
     "--mod-rating-icon-color-down",
     "--mod-rating-icon-color-hover",
-    "--mod-rating-icon-color-key-focus",
-    "--mod-rating-icon-count",
+    "--mod-rating-icon-fill",
     "--mod-rating-icon-height",
     "--mod-rating-icon-spacing",
-    "--mod-rating-icon-spacing-vertical-top",
     "--mod-rating-icon-width",
-    "--mod-rating-indicator-border-radius",
-    "--mod-rating-indicator-height"
+    "--mod-rating-top-to-content-area",
+    "--mod-rating-width"
   ],
   "component": [
     "--spectrum-rating-border-radius",
+    "--spectrum-rating-bottom-to-content-area",
+    "--spectrum-rating-bottom-to-content-area-medium",
+    "--spectrum-rating-bottom-to-content-area-small",
+    "--spectrum-rating-edge-to-content-area",
+    "--spectrum-rating-edge-to-content-area-medium",
+    "--spectrum-rating-edge-to-content-area-small",
     "--spectrum-rating-emphasized-icon-color-default",
     "--spectrum-rating-emphasized-icon-color-down",
     "--spectrum-rating-emphasized-icon-color-hover",
     "--spectrum-rating-emphasized-icon-color-key-focus",
     "--spectrum-rating-focus-indicator-color",
     "--spectrum-rating-focus-indicator-gap",
     "--spectrum-rating-focus-indicator-thickness",
+    "--spectrum-rating-height",
+    "--spectrum-rating-height-medium",
+    "--spectrum-rating-height-small",
     "--spectrum-rating-icon-color-default",
     "--spectrum-rating-icon-color-disabled",
     "--spectrum-rating-icon-color-down",
     "--spectrum-rating-icon-color-hover",
-    "--spectrum-rating-icon-color-key-focus",
-    "--spectrum-rating-icon-count",
+    "--spectrum-rating-icon-fill",
     "--spectrum-rating-icon-height",
     "--spectrum-rating-icon-spacing",
-    "--spectrum-rating-icon-spacing-vertical-top",
     "--spectrum-rating-icon-width",
-    "--spectrum-rating-indicator-border-radius",
-    "--spectrum-rating-indicator-height",
-    "--spectrum-rating-indicator-width"
+    "--spectrum-rating-top-to-content-area",
+    "--spectrum-rating-top-to-content-area-medium",
+    "--spectrum-rating-top-to-content-area-small",
+    "--spectrum-rating-width",
+    "--spectrum-rating-width-medium",
+    "--spectrum-rating-width-small"
   ],
   "global": [
     "--spectrum-accent-content-color-default",
     "--spectrum-accent-content-color-down",
     "--spectrum-accent-content-color-hover",
-    "--spectrum-accent-content-color-key-focus",
-    "--spectrum-border-width-200",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-corner-radius-100",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-minimum-perspective-down",
+    "--spectrum-corner-radius-medium-size-medium",
+    "--spectrum-corner-radius-medium-size-small",
     "--spectrum-disabled-content-color",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-neutral-subdued-content-color-down",
-    "--spectrum-neutral-subdued-content-color-hover",
-    "--spectrum-neutral-subdued-content-color-key-focus",
-    "--spectrum-workflow-icon-size-100"
+    "--spectrum-neutral-content-color-default",
+    "--spectrum-neutral-content-color-down",
+    "--spectrum-neutral-content-color-hover",
+    "--spectrum-spacing-75",
+    "--spectrum-workflow-icon-size-100",
+    "--spectrum-workflow-icon-size-75"
   ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-rating-emphasized-icon-color-default",
     "--highcontrast-rating-emphasized-icon-color-down",
     "--highcontrast-rating-emphasized-icon-color-hover",
     "--highcontrast-rating-focus-color-outline",
-    "--highcontrast-rating-icon-color-disabled",
-    "--highcontrast-rating-icon-color-key-focus"
+    "--highcontrast-rating-icon-color-disabled"
   ]
 }