perf: simplify logic of resetting bib's size on fullscreen mode

AlaskaAirlines · Nov 27, 2024 · 6e55bbb · 6e55bbb
1 parent 80f5af8
commit 6e55bbb
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 19 deletions.
diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js
@@ -1626,10 +1626,10 @@ class AuroFloatingUI {
     const sizerStyle = window.getComputedStyle(this.element.bibSizer);
     const bibContent = this.element.bib.shadowRoot.querySelector(".container");
     if (fullscreen) {
-      bibContent.style.width = '100dvw';
-      bibContent.style.height = '100dvh';
-      bibContent.style.maxWidth = 'none';
-      bibContent.style.maxHeight = 'none';
+      bibContent.style.width = '';
+      bibContent.style.height = '';
+      bibContent.style.maxWidth = '';
+      bibContent.style.maxHeight = '';
     } else {
       if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width;
       if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height;
@@ -1684,7 +1684,7 @@ class AuroFloatingUI {
       this.element.bib.style.top = "0px";
       this.element.bib.style.left = "0px";
     } else {
-      this.element.bib.removeAttribute('fullscreen');
+      this.element.bib.removeAttribute('isFullscreen');
     }
   }
 
@@ -2368,7 +2368,7 @@ var dsVariableFlat = {
 'ds-grid-breakpoint-xs': '320px','ds-grid-breakpoint-sm': '576px','ds-grid-breakpoint-md': '768px','ds-grid-breakpoint-lg': '1024px','ds-grid-breakpoint-xl': '1232px'
 };
 
-var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`;
+var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{top:0;left:0;width:100dvw;max-width:none;height:100dvh;max-height:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`;
 
 var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 

diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js
@@ -1608,10 +1608,10 @@ class AuroFloatingUI {
     const sizerStyle = window.getComputedStyle(this.element.bibSizer);
     const bibContent = this.element.bib.shadowRoot.querySelector(".container");
     if (fullscreen) {
-      bibContent.style.width = '100dvw';
-      bibContent.style.height = '100dvh';
-      bibContent.style.maxWidth = 'none';
-      bibContent.style.maxHeight = 'none';
+      bibContent.style.width = '';
+      bibContent.style.height = '';
+      bibContent.style.maxWidth = '';
+      bibContent.style.maxHeight = '';
     } else {
       if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width;
       if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height;
@@ -1666,7 +1666,7 @@ class AuroFloatingUI {
       this.element.bib.style.top = "0px";
       this.element.bib.style.left = "0px";
     } else {
-      this.element.bib.removeAttribute('fullscreen');
+      this.element.bib.removeAttribute('isFullscreen');
     }
   }
 
@@ -2350,7 +2350,7 @@ var dsVariableFlat = {
 'ds-grid-breakpoint-xs': '320px','ds-grid-breakpoint-sm': '576px','ds-grid-breakpoint-md': '768px','ds-grid-breakpoint-lg': '1024px','ds-grid-breakpoint-xl': '1232px'
 };
 
-var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`;
+var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{top:0;left:0;width:100dvw;max-width:none;height:100dvh;max-height:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`;
 
 var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 

diff --git a/components/dropdown/docs/partials/api.md b/components/dropdown/docs/partials/api.md
@@ -384,15 +384,16 @@ This example demonstrations collapsing the dropdown by clicking a button within
 </auro-accordion>
 
 
-### No Fullscreen Effect on Mobile View
+### Fullscreen Effect on Mobile View
 
-On mobile view, adding the `fullscreenOnMobile="false"` attribute will prevent the dropdown from switching to fullscreen mode. 
+On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` will prevent the dropdown from switching to fullscreen mode. 
 
 This is useful in scenarios where:
 - Fullscreen mode does not provide significant benefits to the user.
 - The dropdown needs to maintain a custom size and stay within its defined dimensions.
 
 
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customDimensions300.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs
@@ -15,10 +15,10 @@ export default class AuroFloatingUI {
     const sizerStyle = window.getComputedStyle(this.element.bibSizer);
     const bibContent = this.element.bib.shadowRoot.querySelector(".container");
     if (fullscreen) {
-      bibContent.style.width = '100dvw';
-      bibContent.style.height = '100dvh';
-      bibContent.style.maxWidth = 'none';
-      bibContent.style.maxHeight = 'none';
+      bibContent.style.width = '';
+      bibContent.style.height = '';
+      bibContent.style.maxWidth = '';
+      bibContent.style.maxHeight = '';
     } else {
       if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width;
       if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height;
@@ -73,7 +73,7 @@ export default class AuroFloatingUI {
       this.element.bib.style.top = "0px";
       this.element.bib.style.left = "0px";
     } else {
-      this.element.bib.removeAttribute('fullscreen');
+      this.element.bib.removeAttribute('isFullscreen');
     }
   }
 

diff --git a/components/dropdown/src/styles/bibStyles.scss b/components/dropdown/src/styles/bibStyles.scss
@@ -28,6 +28,15 @@
  position: fixed;
  top: 0;
  left: 0;
+
+ .container {
+    top: 0;
+    left: 0;
+    width: 100dvw;
+    max-width: none;
+    height: 100dvh;
+    max-height: none;
+ }
 }
 
 :host([data-show]) {