feat: add mobileFullscreenBreakpoint instead of noFullscreenOnMobile

components/dropdown/apiExamples/customDimensions300.html

@@ -5,7 +5,7 @@
   }
   </style>
 <div style="width: 300px;" aria-label="custom label">
-  <auro-dropdown inset bordered rounded chevron>
+  <auro-dropdown id="customDropdown300" inset bordered rounded chevron mobileFullscreenBreakpoint="--ds-grid-breakpoint-sm">
     <div style="width: 300px; max-height: 200px; overflow: scroll;">
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

components/dropdown/demo/api.md

@@ -950,9 +950,9 @@ This example demonstrations collapsing the dropdown by clicking a button within
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### No Fullscreen Effect on Mobile View
+### Fullscreen Effect on Mobile View
 
-On mobile view, adding the `noFullscreenOnMobile` 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.
@@ -970,7 +970,7 @@ This is useful in scenarios where:
   }
   </style>
   <div style="width: 300px;" aria-label="custom label">
-    <auro-dropdown id="customDropdown300" inset bordered rounded chevron noFullscreenOnMobile="false">
+    <auro-dropdown id="customDropdown300" inset bordered rounded chevron mobileFullscreenBreakpoint="--ds-grid-breakpoint-sm">
       <div>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -1002,7 +1002,7 @@ This is useful in scenarios where:
   }
   </style>
 <div style="width: 300px;" aria-label="custom label">
-  <auro-dropdown id="customDropdown300" inset bordered rounded chevron fullscreenOnMobile="false">
+    <auro-dropdown id="customDropdown300" inset bordered rounded chevron mobileFullscreenBreakpoint="--ds-grid-breakpoint-sm">
     <div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

components/dropdown/docs/partials/api.md

@@ -386,7 +386,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 
 ### No Fullscreen Effect on Mobile View
 
-On mobile view, adding the `noFullscreenOnMobile` attribute will prevent the dropdown from switching to fullscreen mode. 
+On mobile view, adding the `fullscreenOnMobile="false"` attribute 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.

components/dropdown/src/auro-dropdown.js

@@ -21,6 +21,8 @@ import styleCss from "./styles/style-css.js";
 import colorCss from "./styles/color-css.js";
 import tokensCss from "./styles/tokens-css.js";
 
+import dsVariableFlat from "@aurodesignsystem/design-tokens/dist/tokens/JSONVariablesFlat.json";
+
 import './auro-dropdownBib.js';
 
 /**
@@ -76,7 +78,6 @@ export class AuroDropdown extends LitElement {
     this.ready = false;
     this.tabIndex = 0;
     this.noToggle = false;
-    this.noFullscreenOnMobile = false;
 
     /**
      * @private
@@ -178,8 +179,8 @@ export class AuroDropdown extends LitElement {
         type: Function,
         reflect: false
       },
-      noFullscreenOnMobile: {
-        type: Boolean,
+      mobileFullscreenBreakpoint: {
+        type: String,
         reflect: true,
       },
 
@@ -235,8 +236,10 @@ export class AuroDropdown extends LitElement {
   firstUpdated() {
     this.floater.configure(this);
     this.bibContent = this.floater.element.bib;
-    // var(--ds-grid-breakpoint-sm)
-    this.bibContent.mobileBreakpoint = '576px';
+    if (this.mobileFullscreenBreakpoint) {
+      const breakpointValue = dsVariableFlat[this.mobileFullscreenBreakpoint.replace(/^\-\-/, "")];
+      this.bibContent.mobileFullscreenBreakpoint = breakpointValue;
+    }
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');

components/dropdown/src/floatingUI.mjs

@@ -10,29 +10,34 @@ export default class AuroFloatingUI {
     this.keyDownHandler = null;
   }
 
-  position() {
+  mirrorSize(fullscreen) {
     // mirror the boxsize from bibSizer
     const sizerStyle = window.getComputedStyle(this.element.bibSizer);
     const bibContent = this.element.bib.shadowRoot.querySelector(".container");
-    if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width;
-    if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height;
-    bibContent.style.maxWidth = sizerStyle.maxWidth;
-    bibContent.style.maxHeight = sizerStyle.maxHeight;
+    if (fullscreen) {
+      bibContent.style.width = '100dvw';
+      bibContent.style.height = '100dvh';
+      bibContent.style.maxWidth = 'none';
+      bibContent.style.maxHeight = 'none';
+    } else {
+      if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width;
+      if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height;
+      bibContent.style.maxWidth = sizerStyle.maxWidth;
+      bibContent.style.maxHeight = sizerStyle.maxHeight;
+    }
+  }
 
+  position() {
     // fullscreen on mobileView 
-    if (!this.element.noFullscreenOnMobile && this.element.bib.mobileBreakpoint) {
-      const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`);
-
-      if (mobileQuery.matches) {
-        // no need to calc the position in mobile view
-        this.element.bib.setAttribute('fullscreen', true);
-        this.element.bib.style.top = "0px";
-        this.element.bib.style.left = "0px";
+    if (this.element.bib.mobileFullscreenBreakpoint) {
+      const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches;
+      this.handleMobileFullscreen(isMobile);
+      if (isMobile) {
+        this.mirrorSize(true);
         return;
-      } else {
-        this.element.bib.removeAttribute('fullscreen');
       }
     }
+    this.mirrorSize(false);
 
     // Define the middlware for the floater configuration
     const middleware = [
@@ -61,6 +66,17 @@ export default class AuroFloatingUI {
     });
   }
 
+  handleMobileFullscreen(isMobile) {
+    if (isMobile) {
+      this.element.bib.setAttribute('isFullscreen', "true");
+      // reset the prev position
+      this.element.bib.style.top = "0px";
+      this.element.bib.style.left = "0px";
+    } else {
+      this.element.bib.removeAttribute('fullscreen');
+    }
+  }
+
   updateState() {
     const isVisible = this.element.isPopoverVisible;
     this.element.trigger.setAttribute('aria-expanded', isVisible);

components/dropdown/src/styles/bibStyles.scss

@@ -23,17 +23,10 @@
   display: none;
 }
 
-:host([fullscreen]) {
+:host([isfullscreen]) {
  position: fixed;
  top: 0;
  left: 0;
- width: 100vw;
- height: 100vh;
-
- .container {
-  width: 100%;
-  height: 100%;
- }
 }
 
 :host([data-show]) {

components/dropdown/test/auro-dropdown.test.js

@@ -1,4 +1,4 @@
-import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
 import '../src/index.js';
 
 describe('auro-dropdown', () => {