fix(stepper): no longer touches InfieldButton classes (#2300)

* fix(stepper): no longer touches InfieldButton classes
* fix(stepper): button size + space match infieldbutton spec

Author: Melissa Thompson

components/infieldbutton/index.css

@@ -44,6 +44,8 @@ governing permissions and limitations under the License.
 		--spectrum-neutral-content-color-key-focus
 	);
 
+	--spectrum-infield-button-fill-justify-content: center;
+
 	&:disabled {
 		--mod-infield-button-background-color: var(
 			--mod-infield-button-background-color-disabled,
@@ -327,7 +329,10 @@ governing permissions and limitations under the License.
   /* center icon */
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: var(
+		--mod-infield-button-fill-justify-content,
+		var(--spectrum-infield-button-fill-justify-content)
+	);
 
   transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out;
 }
@@ -390,6 +395,14 @@ governing permissions and limitations under the License.
 			--mod-infield-button-stacked-border-radius-reset,
 			var(--spectrum-infield-button-stacked-border-radius-reset)
 		);
+		border-end-end-radius: var(
+			--mod-infield-button-stacked-bottom-border-radius-end-end,
+			var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))
+		);
+		border-block-end-width: var(
+			--mod-infield-button-stacked-bottom-border-block-end-width,
+			var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))
+		);
 	}
 }
 

components/infieldbutton/metadata/mods.md

@@ -21,6 +21,7 @@
 | `--mod-infield-button-border-width`                           |
 | `--mod-infield-button-border-width-quiet`                     |
 | `--mod-infield-button-edge-to-fill`                           |
+| `--mod-infield-button-fill-justify-content`                   |
 | `--mod-infield-button-fill-padding`                           |
 | `--mod-infield-button-height`                                 |
 | `--mod-infield-button-icon-color`                             |
@@ -33,6 +34,8 @@
 | `--mod-infield-button-icon-color-key-focus-disabled`          |
 | `--mod-infield-button-inner-edge-to-fill`                     |
 | `--mod-infield-button-stacked-border-radius-reset`            |
+| `--mod-infield-button-stacked-bottom-border-block-end-width`  |
+| `--mod-infield-button-stacked-bottom-border-radius-end-end`   |
 | `--mod-infield-button-stacked-bottom-border-radius-end-start` |
 | `--mod-infield-button-stacked-fill-padding-inline`            |
 | `--mod-infield-button-stacked-fill-padding-inner`             |

components/stepper/index.css

@@ -36,7 +36,7 @@ governing permissions and limitations under the License.
 
   /*** MODS for sub components ***/
   --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color)));
-  --mod-infield-button-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+  --mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width));
   --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
 
   &.spectrum-Stepper--sizeS {
@@ -226,19 +226,14 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Stepper-button {
+    --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+    --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+    --mod-infield-button-stacked-bottom-border-radius-end-end: 0;
+    --mod-infield-button-stacked-bottom-border-radius-end-start: 0;
+    --mod-infield-button-fill-justify-content: flex-end;
     padding: 0;
   }
 
-  .spectrum-Stepper-button.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill {
-    border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  .spectrum-Stepper-button .spectrum-InfieldButton-fill {
-    justify-content: flex-end;
-  }
-
   .spectrum-Stepper-input,
   .spectrum-Stepper-buttons {
     background-color: transparent;
@@ -307,14 +302,6 @@ governing permissions and limitations under the License.
   transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out;
 }
 
-.spectrum-Stepper-button.spectrum-InfieldButton--top {
-  padding-block-start: calc(var(--mod-stepper-button-padding, var(--spectrum-stepper-button-padding)) - var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)));
-}
-
-.spectrum-Stepper-button.spectrum-InfieldButton--bottom {
-  padding-block-end: calc(var(--mod-stepper-button-padding, var(--spectrum-stepper-button-padding)) - var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)));
-}
-
 /* hide-stepper */
 .spectrum-Stepper.hide-stepper .spectrum-Stepper-input {
   border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));

components/stepper/metadata/mods.md

@@ -15,7 +15,7 @@
 | `--mod-stepper-border-width`                           |
 | `--mod-stepper-button-background-color-focus`          |
 | `--mod-stepper-button-background-color-keyboard-focus` |
-| `--mod-stepper-button-padding`                         |
+| `--mod-stepper-button-border-width`                    |
 | `--mod-stepper-button-width`                           |
 | `--mod-stepper-button-width-quiet`                     |
 | `--mod-stepper-buttons-background-color`               |

components/stepper/themes/express.css

@@ -23,6 +23,7 @@ governing permissions and limitations under the License.
     --spectrum-stepper-buttons-border-color-keyboard-focus: transparent;
 
     --spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
+    --spectrum-stepper-button-border-width: 0;
 
     --spectrum-stepper-border-color: var(--spectrum-gray-400);
     --spectrum-stepper-border-color-hover: var(--spectrum-gray-500);

components/stepper/themes/spectrum.css

@@ -22,6 +22,9 @@ governing permissions and limitations under the License.
     --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
     --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
 
+    --spectrum-stepper-button-border-radius-reset: 0px;
+    --spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+
     --spectrum-stepper-border-color: var(--spectrum-gray-500);
     --spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
     --spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
@@ -33,8 +36,6 @@ governing permissions and limitations under the License.
     --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
     --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
 
-    --spectrum-stepper-button-border-radius-reset: 0px;
-
     --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300);
     --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200);
   }