feat(actionbar): remove modifiers (#4252)

Author: castastrophe

components/actionbar/dist/metadata.json

@@ -2,40 +2,20 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ActionBar",
-    ".spectrum-ActionBar .spectrum-ActionBar-popover",
     ".spectrum-ActionBar .spectrum-ActionGroup",
     ".spectrum-ActionBar .spectrum-FieldLabel",
     ".spectrum-ActionBar .spectrum-FieldLabel:lang(ja)",
     ".spectrum-ActionBar .spectrum-FieldLabel:lang(ko)",
     ".spectrum-ActionBar .spectrum-FieldLabel:lang(zh)",
+    ".spectrum-ActionBar .spectrum-Popover",
+    ".spectrum-ActionBar--emphasized .spectrum-FieldLabel",
+    ".spectrum-ActionBar--emphasized .spectrum-Popover",
     ".spectrum-ActionBar--fixed",
     ".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
     ".spectrum-ActionBar--sticky",
-    ".spectrum-ActionBar.is-open",
-    ".spectrum-ActionBar.spectrum-ActionBar--emphasized",
-    ".spectrum-ActionBar:lang(ja)",
-    ".spectrum-ActionBar:lang(ko)",
-    ".spectrum-ActionBar:lang(zh)"
-  ],
-  "modifiers": [
-    "--mod-actionbar-close-button-to-counter",
-    "--mod-actionbar-corner-radius",
-    "--mod-actionbar-height",
-    "--mod-actionbar-item-counter-color",
-    "--mod-actionbar-item-counter-line-height-cjk",
-    "--mod-actionbar-minimum-width",
-    "--mod-actionbar-popover-background-color",
-    "--mod-actionbar-popover-border-color",
-    "--mod-actionbar-shadow-blur",
-    "--mod-actionbar-shadow-color",
-    "--mod-actionbar-shadow-horizontal",
-    "--mod-actionbar-shadow-vertical",
-    "--mod-actionbar-spacing-action-group-edge",
-    "--mod-actionbar-spacing-bottom-area",
-    "--mod-actionbar-spacing-label-to-action-group",
-    "--mod-actionbar-spacing-outer-edge",
-    "--mod-actionbar-spacing-top-area"
+    ".spectrum-ActionBar.is-open"
   ],
+  "modifiers": [],
   "component": [
     "--spectrum-action-bar-border-color",
     "--spectrum-action-bar-bottom-to-content-area",
@@ -45,25 +25,7 @@
     "--spectrum-action-bar-height",
     "--spectrum-action-bar-label-to-action-group-area",
     "--spectrum-action-bar-minimum-width",
-    "--spectrum-action-bar-top-to-content-area",
-    "--spectrum-actionbar-close-button-to-counter",
-    "--spectrum-actionbar-corner-radius",
-    "--spectrum-actionbar-height",
-    "--spectrum-actionbar-item-counter-color",
-    "--spectrum-actionbar-item-counter-line-height",
-    "--spectrum-actionbar-item-counter-line-height-cjk",
-    "--spectrum-actionbar-minimum-width",
-    "--spectrum-actionbar-popover-background-color",
-    "--spectrum-actionbar-popover-border-color",
-    "--spectrum-actionbar-shadow-blur",
-    "--spectrum-actionbar-shadow-color",
-    "--spectrum-actionbar-shadow-horizontal",
-    "--spectrum-actionbar-shadow-vertical",
-    "--spectrum-actionbar-spacing-bottom-area",
-    "--spectrum-actionbar-spacing-label-to-action-group",
-    "--spectrum-actionbar-spacing-outer-edge",
-    "--spectrum-actionbar-spacing-padding-inline",
-    "--spectrum-actionbar-spacing-top-area"
+    "--spectrum-action-bar-top-to-content-area"
   ],
   "global": [
     "--spectrum-background-elevated-color",
@@ -78,9 +40,6 @@
     "--spectrum-neutral-content-color-default",
     "--spectrum-spacing-300"
   ],
-  "passthroughs": [
-    "--mod-fieldlabel-font-size",
-    "--mod-fieldlabel-line-height"
-  ],
-  "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
+  "passthroughs": [],
+  "high-contrast": []
 }

components/actionbar/index.css

@@ -11,50 +11,10 @@
  * governing permissions and limitations under the License.
  */
 
-.spectrum-ActionBar {
-	/* Layout */
-	--spectrum-actionbar-height: var(--spectrum-action-bar-height);
-	--spectrum-actionbar-minimum-width: var(--spectrum-action-bar-minimum-width);
-	--spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large);
-	--spectrum-actionbar-spacing-label-to-action-group: var(--spectrum-action-bar-label-to-action-group-area);
-	--spectrum-actionbar-spacing-padding-inline: var(--spectrum-action-bar-edge-to-content-area);
-	--spectrum-actionbar-spacing-top-area: var(--spectrum-action-bar-top-to-content-area);
-	--spectrum-actionbar-spacing-bottom-area: var(--spectrum-action-bar-bottom-to-content-area);
-	--spectrum-actionbar-close-button-to-counter: var(--spectrum-action-bar-close-button-to-counter);
-	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- defines the field label mod  */
-	--spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
-	--spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
-
-	/* colors - applied to popover */
-	--spectrum-actionbar-popover-background-color: var(--spectrum-background-elevated-color);
-	--spectrum-actionbar-popover-border-color: var(--spectrum-action-bar-border-color);
-
-	/* spacing of action bar bottom and horizontal outer edge */
-	--spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
-
-	/* drop shadow */
-	--spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-elevated-x);
-	--spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-elevated-y);
-	--spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
-	--spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-elevated-color);
-
-	&.spectrum-ActionBar--emphasized {
-		--spectrum-actionbar-item-counter-color: var(--spectrum-gray-25);
-		--spectrum-actionbar-popover-background-color: var(--spectrum-neutral-content-color-default);
-	}
-
-	/* cjk language support for item counter */
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		--spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
-	}
-}
-
 /* ActionBar is outer wrapper with nested popover component within */
 .spectrum-ActionBar {
 	/* creates horizontal spacing to edge */
-	padding: 0 var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge));
+	padding: 0 var(--spectrum-spacing-300);
 	inset-block-end: 0;
 	z-index: 1;
 
@@ -70,28 +30,28 @@
 
 	&.is-open {
 		/* add ActionBar bottom margin to height for correct spacing even when sticky */
-		block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height)));
+		block-size: calc(var(--spectrum-spacing-300) + var(--spectrum-action-bar-height));
 		opacity: 1;
 	}
 
-	.spectrum-ActionBar-popover {
+	.spectrum-Popover {
 		/* popover is ActionBar height */
-		block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height));
-		min-inline-size: var(--mod-actionbar-minimum-width, var(--spectrum-actionbar-minimum-width));
+		block-size: var(--spectrum-action-bar-height);
+		min-inline-size: var(--spectrum-action-bar-minimum-width);
 		box-sizing: border-box;
 		inline-size: 100%;
 		margin: auto;
-		padding-inline: var(--mod-actionbar-spacing-action-group-edge, var(--spectrum-actionbar-spacing-padding-inline));
-		padding-block: var(--mod-actionbar-spacing-top-area, var(--spectrum-actionbar-spacing-top-area)) var(--mod-actionbar-spacing-bottom-area, var(--spectrum-actionbar-spacing-bottom-area));
+		padding-inline: var(--spectrum-action-bar-edge-to-content-area);
+		padding-block: var(--spectrum-action-bar-top-to-content-area) var(--spectrum-action-bar-bottom-to-content-area);
 
 		/* Be relative so our width can be restricted */
 		position: relative;
 
-		border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius));
-		border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color)));
-		background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color));
+		border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+		border-color: var(--spectrum-action-bar-border-color);
+		background-color: var(--spectrum-background-elevated-color);
 
-		filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color)));
+		filter: drop-shadow(var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) var(--spectrum-drop-shadow-elevated-blur) var(--spectrum-drop-shadow-elevated-color));
 
 		/* Let clicks do their thing */
 		pointer-events: auto;
@@ -104,24 +64,35 @@
 
 	/* item counter */
 	.spectrum-FieldLabel {
-		--mod-fieldlabel-font-size: var(--spectrum-action-bar-counter-font-size);
-		--mod-fieldlabel-line-height: var(--spectrum-actionbar-item-counter-line-height);
-		color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color));
-		padding-inline-start: var(--mod-actionbar-close-button-to-counter, var(--spectrum-actionbar-close-button-to-counter));
+		font-size: var(--spectrum-action-bar-counter-font-size);
+		line-height: var(--spectrum-line-height-100);
+
+		color: var(--spectrum-neutral-content-color-default);
+		padding-inline-start: var(--spectrum-action-bar-close-button-to-counter);
 
 		/* cjk language support */
 		&:lang(ja),
 		&:lang(zh),
 		&:lang(ko) {
-			line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk));
+			line-height: var(--spectrum-cjk-line-height-100);
 		}
 	}
 
 	/* action group */
 	.spectrum-ActionGroup {
 		/* align to end by default */
 		margin-inline-start: auto;
-		padding-inline-start: var(--mod-actionbar-spacing-label-to-action-group, var(--spectrum-actionbar-spacing-label-to-action-group)); /* space between label and action group */
+		padding-inline-start: var(--spectrum-action-bar-label-to-action-group-area);
+	}
+}
+
+.spectrum-ActionBar--emphasized {
+	.spectrum-FieldLabel {
+		color: var(--spectrum-gray-25);
+	}
+
+	.spectrum-Popover {
+		background-color: var(--spectrum-neutral-content-color-default);
 	}
 }
 
@@ -139,10 +110,3 @@
 .spectrum-ActionBar--flexible .spectrum-ActionBar-popover {
 	inline-size: auto;
 }
-
-/* windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-ActionBar {
-		--highcontrast-actionbar-popover-border-color: CanvasText;
-	}
-}

components/actionbar/stories/actionbar.stories.js

@@ -12,7 +12,7 @@ import { BehavioralTemplate } from "./template.js";
  * The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.
  *
  * ## Popover dependency
- * Action bar requires popover, which is nested within the action bar. Action bar background, border, and corner radius are applied to the nested popover component and can be overridden by using action bar's `--mod-*` prefixed custom properties. A [list of the properties](#modifiable-properties) can be found below.
+ * Action bar requires popover, which is nested within the action bar. Action bar background, border, and corner radius are applied to the nested popover component.
  */
 export default {
 	title: "Action bar",