perf: demonstrate how to set custom bib height #134 #216

AlaskaAirlines · Nov 13, 2024 · 960ae1b · 960ae1b
1 parent fdf148a
commit 960ae1b
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 2 deletions.
diff --git a/apiExamples/customBibHeight.html b/apiExamples/customBibHeight.html
@@ -0,0 +1,16 @@
+<auro-select id="customBibHeightExample">
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+
+<style>
+  #customBibHeightExample::part(dropdownPopover) {
+    max-height: 100px;
+  }
+</style>
diff --git a/demo/api.min.js b/demo/api.min.js
@@ -3290,7 +3290,7 @@ class AuroDropdown extends r {
 
 var dropdownVersion = '3.2.0';
 
-var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){min-height:var(--ds-size-500, 2.5rem);max-height:var(--ds-size-500, 2.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
+var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){min-height:var(--ds-size-500, 2.5rem);max-height:var(--ds-size-500, 2.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
 
 var colorCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host [auro-dropdown]::part(trigger):hover{--ds-auro-dropdown-trigger-container-color: rgba(0 0 0 / 0.06)}:host([disabled]) *{color:var(--ds-color-text-ui-disabled-default, #adadad)}.placeholder{color:var(--ds-auro-select-placeholder-text-color)}`;
 
@@ -3451,6 +3451,9 @@ class AuroSelect extends r {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    // Exposes the CSS parts from the dropdown for styling
+    this.dropdown.exposeCssParts();
+
     this.dropdown.addEventListener('auroDropdown-ready', () => {
       this.auroDropdownReady = true;
     });

diff --git a/demo/index.md b/demo/index.md
@@ -248,6 +248,57 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## Example with custom bib height
+
+This example shows how to set a custom height for the bib from `<auro-dropdown>`. 
+
+Custom height dimensions are set by using the `dropdownPopover` CSS Part and then applying a `max-height` rule and value.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customBibHeight.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/customBibHeight.html -->
+  <auro-select id="customBibHeightExample">
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <style>
+    #customBibHeightExample::part(dropdownPopover) {
+      max-height: 100px;
+    }
+  </style>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customBibHeight.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/customBibHeight.html -->
+
+```html
+<auro-select id="customBibHeightExample">
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+<style>
+  #customBibHeightExample::part(dropdownPopover) {
+    max-height: 100px;
+  }
+</style>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Label and help text slots
 
 The following example illustrates the use of the `label` and `helptext` slots for additional placement of content around the select menu.

diff --git a/demo/index.min.js b/demo/index.min.js
@@ -3238,7 +3238,7 @@ class AuroDropdown extends r {
 
 var dropdownVersion = '3.2.0';
 
-var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){min-height:var(--ds-size-500, 2.5rem);max-height:var(--ds-size-500, 2.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
+var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){min-height:var(--ds-size-500, 2.5rem);max-height:var(--ds-size-500, 2.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
 
 var colorCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host [auro-dropdown]::part(trigger):hover{--ds-auro-dropdown-trigger-container-color: rgba(0 0 0 / 0.06)}:host([disabled]) *{color:var(--ds-color-text-ui-disabled-default, #adadad)}.placeholder{color:var(--ds-auro-select-placeholder-text-color)}`;
 
@@ -3399,6 +3399,9 @@ class AuroSelect extends r {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    // Exposes the CSS parts from the dropdown for styling
+    this.dropdown.exposeCssParts();
+
     this.dropdown.addEventListener('auroDropdown-ready', () => {
       this.auroDropdownReady = true;
     });

diff --git a/docs/partials/index.md b/docs/partials/index.md
@@ -80,6 +80,25 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
 
 </auro-accordion>
 
+## Example with custom bib height
+
+This example shows how to set a custom height for the bib from `<auro-dropdown>`. 
+
+Custom height dimensions are set by using the `dropdownPopover` CSS Part and then applying a `max-height` rule and value.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customBibHeight.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customBibHeight.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ## Label and help text slots
 
 The following example illustrates the use of the `label` and `helptext` slots for additional placement of content around the select menu.

diff --git a/src/auro-select.js b/src/auro-select.js
@@ -172,6 +172,9 @@ export class AuroSelect extends LitElement {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    // Exposes the CSS parts from the dropdown for styling
+    this.dropdown.exposeCssParts();
+
     this.dropdown.addEventListener('auroDropdown-ready', () => {
       this.auroDropdownReady = true;
     });

diff --git a/src/style.scss b/src/style.scss
@@ -37,6 +37,7 @@
 
     &::part(popover) {
       max-width: -webkit-fill-available;
+      overflow-y: scroll;
     }
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,7 @@ @@
         &::part(popover) {
           max-width: -webkit-fill-available;
+          overflow-y: scroll;
         }
       }
     }
@@ Expand Down @@