feat: add attribute to have bib width match content width #216

AlaskaAirlines · Nov 13, 2024 · f84293c · f84293c
1 parent c8079af
commit f84293c
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 3 deletions.
diff --git a/apiExamples/flexMenuWidth.html b/apiExamples/flexMenuWidth.html
@@ -0,0 +1,15 @@
+<auro-select flexMenuWidth id="flexMenuWidthExample">
+  <auro-menu>
+    <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
+    <auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
+    <auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
+    <auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
+    <auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
+  </auro-menu>
+</auro-select>
+
+<style>
+  #flexMenuWidthExample::part(dropdownTrigger) {
+    width: 25%;
+  }
+</style>
diff --git a/demo/api.html b/demo/api.html
@@ -47,5 +47,6 @@
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
   </body>
 </html>
diff --git a/demo/api.md b/demo/api.md
@@ -18,6 +18,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 |---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------|
 | [disabled](#disabled)                      | `disabled`                      | `Boolean` |                        | When attribute is present element shows disabled state. |
 | [error](#error)                         | `error`                         | `String`  |                        | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `Boolean` |                        | If set, makes dropdown bib width match the size of the content, rather than the width of the trigger. |
 | [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `Boolean` |                        | When true, checkmark on selected option will no longer be present. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |                        | If set, disables auto-validation on blur.        |
 | [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | "undefined"            | Specifies the current selected menuOption.       |
@@ -326,6 +327,52 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### flexMenuWidth <a name="flexMenuWidth"></a>
+Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-select>` element to match the width of the bib content, rather than the width of the trigger.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/flexMenuWidth.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/flexMenuWidth.html -->
+  <auro-select flexMenuWidth id="flexMenuWidthExample">
+    <auro-menu>
+      <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
+      <auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
+      <auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
+      <auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
+      <auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <style>
+    #flexMenuWidthExample::part(dropdownTrigger) {
+      width: 25%;
+    }
+  </style>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/flexMenuWidth.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/flexMenuWidth.html -->
+
+```html
+<auro-select flexMenuWidth id="flexMenuWidthExample">
+  <auro-menu>
+    <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
+    <auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
+    <auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
+    <auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
+    <auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
+  </auro-menu>
+</auro-select>
+<style>
+  #flexMenuWidthExample::part(dropdownTrigger) {
+    width: 25%;
+  }
+</style>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Slot Examples
 
 #### label <a name="label"></a>

diff --git a/demo/api.min.js b/demo/api.min.js
@@ -3311,6 +3311,7 @@ var tokensCss$1 = i$5`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
  * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
+ * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
  * @prop {String} placeholder - Define placeholder text to display before a value is manually selected.
  * @prop {String} value - Value selected for the component.
  * @prop {Boolean} disabled - When attribute is present element shows disabled state.
@@ -3421,6 +3422,10 @@ class AuroSelect extends r {
         type: Boolean,
         reflect: true
       },
+      flexMenuWidth: {
+        type: Boolean,
+        reflect: true
+      },
       placeholder: { type: String },
 
       /**
@@ -3451,6 +3456,10 @@ class AuroSelect extends r {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    if (this.customBibWidth) {
+      this.dropdown.dropdownWidth = this.customBibWidth;
+    }
+
     // Exposes the CSS parts from the dropdown for styling
     this.dropdown.exposeCssParts();
 
@@ -3841,7 +3850,7 @@ class AuroSelect extends r {
           for="selectmenu"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           common
-          matchWidth
+          ?matchWidth="${!this.flexMenuWidth}"
           chevron
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">

diff --git a/demo/index.min.js b/demo/index.min.js
@@ -3259,6 +3259,7 @@ var tokensCss$1 = i$5`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
  * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
+ * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
  * @prop {String} placeholder - Define placeholder text to display before a value is manually selected.
  * @prop {String} value - Value selected for the component.
  * @prop {Boolean} disabled - When attribute is present element shows disabled state.
@@ -3369,6 +3370,10 @@ class AuroSelect extends r {
         type: Boolean,
         reflect: true
       },
+      flexMenuWidth: {
+        type: Boolean,
+        reflect: true
+      },
       placeholder: { type: String },
 
       /**
@@ -3399,6 +3404,10 @@ class AuroSelect extends r {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    if (this.customBibWidth) {
+      this.dropdown.dropdownWidth = this.customBibWidth;
+    }
+
     // Exposes the CSS parts from the dropdown for styling
     this.dropdown.exposeCssParts();
 
@@ -3789,7 +3798,7 @@ class AuroSelect extends r {
           for="selectmenu"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           common
-          matchWidth
+          ?matchWidth="${!this.flexMenuWidth}"
           chevron
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">

diff --git a/docs/api.md b/docs/api.md
@@ -8,6 +8,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 |---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------|
 | `disabled`                      | `disabled`                      | `Boolean` |                        | When attribute is present element shows disabled state. |
 | `error`                         | `error`                         | `String`  |                        | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| `flexMenuWidth`                 | `flexMenuWidth`                 | `Boolean` |                        | If set, makes dropdown bib width match the size of the content, rather than the width of the trigger. |
 | `noCheckmark`                   | `noCheckmark`                   | `Boolean` |                        | When true, checkmark on selected option will no longer be present. |
 | `noValidate`                    | `noValidate`                    | `Boolean` |                        | If set, disables auto-validation on blur.        |
 | `optionSelected`                | `optionSelected`                | `Object`  | "undefined"            | Specifies the current selected menuOption.       |

diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -118,6 +118,22 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 
 </auro-accordion>
 
+#### flexMenuWidth <a name="flexMenuWidth"></a>
+
+Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-select>` element to match the width of the bib content, rather than the width of the trigger.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/flexMenuWidth.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/flexMenuWidth.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 
 ### Slot Examples
 

diff --git a/src/auro-select.js b/src/auro-select.js
@@ -32,6 +32,7 @@ import tokensCss from "./tokens-css.js";
  * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
+ * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
  * @prop {String} placeholder - Define placeholder text to display before a value is manually selected.
  * @prop {String} value - Value selected for the component.
  * @prop {Boolean} disabled - When attribute is present element shows disabled state.
@@ -142,6 +143,10 @@ export class AuroSelect extends LitElement {
         type: Boolean,
         reflect: true
       },
+      flexMenuWidth: {
+        type: Boolean,
+        reflect: true
+      },
       placeholder: { type: String },
 
       /**
@@ -172,6 +177,10 @@ export class AuroSelect extends LitElement {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    if (this.customBibWidth) {
+      this.dropdown.dropdownWidth = this.customBibWidth;
+    }
+
     // Exposes the CSS parts from the dropdown for styling
     this.dropdown.exposeCssParts();
 
@@ -562,7 +571,7 @@ export class AuroSelect extends LitElement {
           for="selectmenu"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           common
-          matchWidth
+          ?matchWidth="${!this.flexMenuWidth}"
           chevron
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">