Merge branch 'fix/form-control-max-width' into rc

Author: clukhei

docs/INSTALLATION.md

@@ -8,7 +8,7 @@ Install SGDS web components locally with the following command
 
 ```js
 
-npm install @govtechsg/sgds-web-component@3.16.0
+npm install @govtechsg/sgds-web-component@3.16.1-rc.2
 
 ```
 
@@ -53,14 +53,14 @@ This method registers all SGDS elements up front in the Custom Elements Registry
 
 ```js
 // Load global css file
-<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0/themes/day.css' rel='stylesheet' type='text/css' />
-<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0/css/sgds.css' rel='stylesheet' type='text/css' />
+<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.1-rc.2/themes/day.css' rel='stylesheet' type='text/css' />
+<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.1-rc.2/css/sgds.css' rel='stylesheet' type='text/css' />
 
 // it is recommended to load a particular version when using cdn e.g. https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0" async crossorigin="anonymous" integrity="sha384-F5LRLloHEK6tuoYtNQ9dlphntGhb0cHew2heUM9CUG9V9d+xqweQZCbSSfYPgkPu"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.1-rc.2" async crossorigin="anonymous" integrity="sha384-Fac1dcR+ZUsXkpuxOsemc5Ld/Pu6/sHkOKu3fZg/ckl5nxa9o+CQ2gdETEadyjJs"></script>
 
 //or load a single component e.g. Masthead
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-ITgmRQ1eDoGTKD6ytTZVquH/6jBLIuZzFPDjUVaN525LjuJl3zngwzf/hYiDgJbn"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.1-rc.2/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-NTZt1tFTkbhjjHYUtbUDmLqrKG7WmyhNCm1QhFxafmpPq2e7ozALWTPLO2DhBTSP"></script>
 
 ```
 

src/components/ComboBox/combo-box.css

@@ -29,7 +29,6 @@
 
 .combobox .form-control-group {
   min-height: var(--sgds-dimension-48);
-  min-width: var(--sgds-dimension-256);
   height: unset;
 }
 

src/components/ComboBox/sgds-combo-box.ts

@@ -525,7 +525,12 @@ export class SgdsComboBox extends SelectElement {
       (this.isFocused || this.menuIsOpen) && this.value !== "" && this.clearable && !this.readonly;
     return html`
       <div
-        class=${classMap({ "form-control-container": true, disabled: this.disabled, combobox: true })}
+        class=${classMap({
+          "form-control-container": true,
+          "m-width-256": true,
+          disabled: this.disabled,
+          combobox: true
+        })}
         @keydown=${this._handleMultiSelectKeyDown}
       >
         ${this._renderLabel()}

src/components/Datepicker/datepicker.css

@@ -35,6 +35,10 @@ sgds-icon-button{
   --btn-border-radius: 0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0;
 }
 
+.m-width-160 {
+  min-width: var(--sgds-dimension-160);
+}
+
 .datepicker-container {
   display: flex;
 }

src/components/Datepicker/sgds-datepicker.ts

@@ -421,7 +421,7 @@ export class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) impl
 
   render() {
     return html`
-      <div class="datepicker-container">
+      <div class="datepicker-container m-width-160">
         <sgds-datepicker-input
           .value=${live(this.value)}
           ?required=${this.required}

src/components/Input/sgds-input.ts

@@ -297,7 +297,7 @@ export class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implem
   render() {
     return html`
       <div
-        class="form-control-container ${classMap({
+        class="form-control-container m-width-160 ${classMap({
           disabled: this.disabled
         })}"
       >

src/components/QuantityToggle/sgds-quantity-toggle.ts

@@ -230,7 +230,7 @@ export class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElemen
 
   render() {
     return html`
-      <div class="form-control-container">
+      <div class="form-control-container m-width-256">
         ${this._renderLabel()}
         <div class="input-group">
           <sgds-icon-button

src/components/Select/sgds-select.ts

@@ -209,7 +209,8 @@ export class SgdsSelect extends SelectElement {
         class=${classMap({
           disabled: this.disabled,
           select: true,
-          "form-control-container": true
+          "form-control-container": true,
+          "m-width-160": true
         })}
       >
         ${this._renderLabel()}

src/components/Textarea/sgds-textarea.ts

@@ -202,7 +202,7 @@ export class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) imp
   render() {
     return html`
       <div
-        class="form-control-container ${classMap({
+        class="form-control-container m-width-256 ${classMap({
           disabled: this.disabled
         })}"
       >

src/styles/form-text-control.css

@@ -10,6 +10,14 @@
   gap: var(--sgds-form-gap-md);
 }
 
+.m-width-160 {
+  min-width: var(--sgds-dimension-160);
+}
+
+.m-width-256 {
+  min-width: var(--sgds-dimension-256);
+}
+
 .form-control-group {
   display: flex;
   align-items: center;
@@ -36,6 +44,7 @@
   padding: 0;
   flex-grow: 1;
   min-width: 0;
+  width: 100%;
   color: var(--sgds-form-color-default);
   font-size: var(--sgds-font-size-16);
   line-height: var(--sgds-line-height-24);