feat: remove commons abstraction (#4242)

Author: castastrophe

.changeset/pre.json

@@ -32,7 +32,6 @@
     "@spectrum-css/colorslider": "8.0.1",
     "@spectrum-css/colorwheel": "6.0.1",
     "@spectrum-css/combobox": "4.0.1",
-    "@spectrum-css/commons": "11.0.0",
     "@spectrum-css/contextualhelp": "5.0.1",
     "@spectrum-css/datepicker": "4.0.1",
     "@spectrum-css/dial": "5.0.1",

components/actionbutton/dist/metadata.json

@@ -179,7 +179,6 @@
     "--spectrum-gray-100",
     "--spectrum-gray-200",
     "--spectrum-gray-25",
-    "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
     "--spectrum-medium-font-weight",
     "--spectrum-neutral-background-color-selected-default",
@@ -217,8 +216,7 @@
   ],
   "passthroughs": [
     "--mod-button-animation-duration",
-    "--mod-button-font-family",
-    "--mod-button-line-height"
+    "--mod-button-font-family"
   ],
   "high-contrast": [
     "--highcontrast-actionbutton-animation-duration",

components/actionbutton/index.css

@@ -10,8 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "@spectrum-css/commons/basebutton.css";
-
 .spectrum-ActionButton {
 	--spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
 	--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium);
@@ -234,9 +232,46 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-ActionButton {
-	@extend %spectrum-BaseButton;
+	cursor: pointer;
+	user-select: none;
+
+	/* Contain halo */
 	position: relative;
 
+	/* Show the button overflow in Edge. */
+	overflow: visible;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	box-sizing: border-box;
+
+	/* Remove button the margin in Firefox and Safari. */
+	margin: 0;
+
+	font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack));
+
+	/* Adjacent buttons should be aligned correctly */
+	vertical-align: top;
+
+	-webkit-font-smoothing: antialiased;
+
+	/* Font smoothing for Firefox */
+	-moz-osx-font-smoothing: grayscale;
+	text-decoration: none;
+
+	/* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
+	text-transform: none;
+
+	/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
+	-webkit-appearance: button;
+
+	transition:
+		background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+		border-color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+		color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+		box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out;
+
 	min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
 	block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height));
 	line-height: var(--mod-actionbutton-line-height, var(--spectrum-actionbutton-line-height));
@@ -252,6 +287,26 @@ governing permissions and limitations under the License.
 	background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
 	color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
 
+	/* Fix Firefox */
+	&::-moz-focus-inner {
+		margin-block-start: -2px;
+		margin-block-end: -2px;
+		padding: 0;
+		border: 0;
+
+		/* Remove the inner border and padding for button in Firefox. */
+		border-style: none;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:disabled,
+	&.is-disabled {
+		cursor: default;
+	}
+
 	&:hover {
 		background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
 		color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
@@ -276,11 +331,16 @@ governing permissions and limitations under the License.
 }
 
 a.spectrum-ActionButton {
-	@extend %spectrum-AnchorButton;
+	/* Make link text not selectable  */
+	user-select: none;
+
+	/* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
+	-webkit-appearance: none;
 }
 
 .spectrum-ActionButton-icon {
-	@extend %spectrum-ButtonIcon;
+	flex-shrink: 0;
+	max-block-size: 100%;
 
 	inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
 	block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
@@ -298,7 +358,16 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton-label {
-	@extend %spectrum-ButtonLabel;
+	align-self: center;
+	justify-self: center;
+
+	/* Fixes horizontal alignment of text in anchor buttons */
+	text-align: center;
+
+	&:empty {
+		display: none;
+	}
+
 	pointer-events: none;
 
 	font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size));

components/actionbutton/package.json

@@ -36,7 +36,6 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/commons": "12.0.0-next.0",
 		"@spectrum-css/icon": "10.0.0-next.3",
 		"@spectrum-css/tokens": "16.1.0-next.10"
 	},

components/button/dist/metadata.json

@@ -93,8 +93,6 @@
     "--mod-button-max-inline-size",
     "--mod-button-min-width",
     "--mod-button-padding-label-to-icon",
-    "--mod-button-text-align",
-    "--mod-button-text-align-with-icon",
     "--mod-button-top-to-icon",
     "--mod-button-top-to-text"
   ],

components/button/index.css

@@ -11,8 +11,6 @@
  * governing permissions and limitations under the License.
  */
 
-@import "@spectrum-css/commons/basebutton.css";
-
 .spectrum-Button {
 	--spectrum-button-animation-duration: var(--spectrum-animation-duration-100);
 
@@ -325,7 +323,41 @@
 }
 
 .spectrum-Button {
-	@extend %spectrum-BaseButton;
+	cursor: pointer;
+	user-select: none;
+
+	/* Contain halo */
+	position: relative;
+
+	/* Show the button overflow in Edge. */
+	overflow: visible;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	box-sizing: border-box;
+
+	/* Remove button the margin in Firefox and Safari. */
+	margin: 0;
+
+	font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack));
+
+	/* Adjacent buttons should be aligned correctly */
+	vertical-align: top;
+
+	-webkit-font-smoothing: antialiased;
+
+	/* Font smoothing for Firefox */
+	-moz-osx-font-smoothing: grayscale;
+
+	line-height: var(--mod-button-line-height, var(--spectrum-line-height-100));
+	text-decoration: none;
+
+	/* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
+	text-transform: none;
+
+	/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
+	-webkit-appearance: button;
 
 	border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius));
 	border-width: var(--mod-button-border-width, var(--spectrum-button-border-width));
@@ -339,15 +371,14 @@
 
 	padding-block: 0;
 	padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text));
-	position: relative;
 
 	background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)));
 	border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)));
 	color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default)));
 	transition:
-		border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear,
+		border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear,
 		color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear,
-		background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear;
+		background var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear;
 
 	margin-block: var(--mod-button-margin-block);
 	margin-inline-end: var(--mod-button-margin-right);
@@ -365,6 +396,11 @@
 		align-self: flex-start;
 	}
 
+	&:disabled,
+	&.is-disabled {
+		cursor: default;
+	}
+
 	/* Focus indicator */
 	&::after {
 		content: "";
@@ -377,6 +413,21 @@
 		pointer-events: none;
 	}
 
+	/* Fix Firefox */
+	&::-moz-focus-inner {
+		margin-block-start: -2px;
+		margin-block-end: -2px;
+		padding: 0;
+		border: 0;
+
+		/* Remove the inner border and padding for button in Firefox. */
+		border-style: none;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
 	&:focus-visible,
 	&.is-focused {
 		box-shadow: none;
@@ -458,16 +509,27 @@
 }
 
 a.spectrum-Button {
-	@extend %spectrum-AnchorButton;
+	/* Make link text not selectable  */
+	user-select: none;
+
+	/* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
+	-webkit-appearance: none;
 }
 
 .spectrum-Button-label {
-	@extend %spectrum-ButtonLabel;
+	align-self: start;
+	justify-self: center;
+
+	/* Fixes horizontal alignment of text in anchor buttons */
+	text-align: center;
+
 	padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
 	padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
 	line-height: var(--mod-button-line-height, var(--spectrum-button-line-height));
-	align-self: start;
-	text-align: var(--mod-button-text-align, center);
+
+	&:empty {
+		display: none;
+	}
 }
 
 /* Disable button label wrap */
@@ -478,7 +540,7 @@ a.spectrum-Button {
 }
 
 .spectrum-Button .spectrum-Icon + .spectrum-Button-label {
-	text-align: var(--mod-button-text-align-with-icon, start);
+	text-align: start;
 }
 
 /* Icon only variant */

components/button/package.json

@@ -40,7 +40,6 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/commons": "12.0.0-next.0",
 		"@spectrum-css/icon": "10.0.0-next.3",
 		"@spectrum-css/progresscircle": "6.0.0-next.0",
 		"@spectrum-css/tokens": "16.1.0-next.10"

components/closebutton/dist/metadata.json

@@ -8,7 +8,6 @@
     ".spectrum-CloseButton--staticBlack",
     ".spectrum-CloseButton--staticWhite",
     ".spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton.is-disabled",
     ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)",
     ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
@@ -97,11 +96,7 @@
     "--spectrum-transparent-white-800",
     "--spectrum-transparent-white-900"
   ],
-  "passthroughs": [
-    "--mod-button-animation-duration",
-    "--mod-button-font-family",
-    "--mod-button-line-height"
-  ],
+  "passthroughs": ["--mod-button-font-family", "--mod-button-line-height"],
   "high-contrast": [
     "--highcontrast-closebutton-background-color-default",
     "--highcontrast-closebutton-focus-indicator-color",