chore: update input styles (#1813)

Co-authored-by: James Nestor <jnestor@cisco.com>

web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.14.16",
+  "version": "2.14.17",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

web-components/src/[sandbox]/examples/button.ts

@@ -192,6 +192,15 @@ export class ButtonTemplateSandbox extends LitElement {
         <md-button circle size="84"><span slot="text">84</span></md-button>
       </div>
 
+      <div class="row" style="display: flex; margin: .5rem 0">
+        <h3 class="sandbox-header" style="gap: 0.5rem margin: .5rem 1rem">Rounded Button Sizes</h3>
+        <md-button rounded variant="secondary" size="24"><span slot="text">24</span></md-button>
+        <md-button rounded variant="secondary" size="28"><span slot="text">28</span></md-button>
+        <md-button rounded variant="secondary" size="32"><span slot="text">32</span></md-button>
+        <md-button rounded variant="secondary" size="36"><span slot="text">36</span></md-button>
+        <md-button rounded variant="secondary" size="40"><span slot="text">40</span></md-button>
+      </div>
+
       <div class="row" style="display: flex; margin: .5rem 0">
         <h3 class="sandbox-header" style="margin: .5rem 1rem">Variants</h3>
         <md-button variant="primary"><span slot="text">primary</span></md-button>

web-components/src/[sandbox]/examples/input.ts

@@ -159,7 +159,7 @@ export const inputTemplate = html`
   <section id="rectangle" class="section">
     <div class="row">
       <div class="column">
-        <md-input label="Normal" containerSize="small-12" newMomentum helpText="Help Text"></md-input>
+        <md-input label="Normal" newMomentum helpText="Help Text"></md-input>
       </div>
     </div>
     <div class="row">
@@ -170,6 +170,7 @@ export const inputTemplate = html`
           containerSize="small-12"
           placeholder="Enter Text"
           searchable
+          compact
           shape="rectangle"
           newMomentum
         ></md-input>

web-components/src/components/button/Button.ts

@@ -151,6 +151,7 @@ export namespace Button {
     @property({ type: String }) ariaHaspopup = "false";
     @property({ type: String }) ariaPressed = "";
     @property({ type: Boolean }) circle = false;
+    @property({ type: Boolean }) rounded = false;
     @property({ type: String }) color: Button.color = "";
     @property({ type: Boolean }) containerLarge = false;
     @property({ type: Boolean }) disabled = false;
@@ -238,6 +239,7 @@ export namespace Button {
     get buttonClassMap() {
       return {
         "md-button--circle": this.circle,
+        "md-button--rounded": this.rounded,
         "md-button--none": this.hasRemoveStyle,
         "md-button--outline": this.outline,
         active: this.active && !this.disabled,

web-components/src/components/button/scss/button.scss

@@ -227,6 +227,13 @@
       }
     }
 
+    &--rounded {
+      @include radius($button__radius--rounded);
+      &::after {
+        border-radius: $button__radius--rounded;
+      }
+    }
+
     .md-loading {
       left: 50%;
       position: absolute;

web-components/src/components/button/scss/settings.scss

@@ -50,6 +50,7 @@ $button__radius--36: rem-calc(18);
 $button__radius--40: rem-calc(20);
 $button__radius--52: rem-calc(26);
 $button__radius--round: $global-rounded !default;
+$button__radius--rounded: rem-calc(8) !default;
 
 // Set text alignment
 $button__font-align: center !default;

web-components/src/components/input/Input.ts

@@ -352,6 +352,7 @@ export namespace Input {
         "md-input--multiline": this.multiline,
         "md-input--multi": this.multi,
         [`md-input--${this.shape}`]: !!this.shape,
+        "md-input--compact": this.compact,
         "md-input--before": this.auxiliaryContentPosition === "before" || this.searchable,
         "md-input--after": this.auxiliaryContentPosition === "after",
         "md-active": this.isEditing,

web-components/src/components/input/scss/input.scss

@@ -250,14 +250,28 @@
 
       .md-input {
         border-radius: 8px;
+        height: $input__height--momentum;
 
         &:focus {
           outline: 2px solid var(--input-default-outline-color);
           outline-offset: rem-calc(2);
           box-shadow: none; 
         }
-      }
 
+        &--pill {
+          border-radius: calc($input__height--momentum / 2);
+        }
+
+        &--compact {
+          font-size: $input__font-size-compact--momentum;
+          height: $input__height--compact--momentum;
+
+          &.md-input--pill {
+            border-radius: calc($input__height--compact--momentum / 2);
+          }
+        }
+      }
+
       .md-input__messages {
         padding-left: 0;
       }

web-components/src/wc_scss/settings/button-settings.scss

@@ -32,6 +32,7 @@ $button__radius--36: rem-calc(18);
 $button__radius--40: rem-calc(20);
 $button__radius--52: rem-calc(26);
 $button__radius--round: $global-rounded !default;
+$button__radius--rounded: rem-calc(8) !default;
 
 // Set text alignment
 $button__font-align: center !default;

web-components/src/wc_scss/settings/input.scss

@@ -57,3 +57,7 @@ $input__background--warning: $md-yellow-10 !default;
 $input__background--warning--hover: $md-yellow-20 !default;
 $input__border-color--warning: $md-yellow-40 !default;
 $input__message__font-color--warning: $md-yellow-70 !default;
+
+$input__height--momentum: rem-calc(32) !default;
+$input__height--compact--momentum: rem-calc(28) !default;
+$input__font-size-compact--momentum: rem-calc(14) !default;