refactor: rename bibSizer for part to bib for easier understandin…

…g for dev
AlaskaAirlines · Nov 27, 2024 · 32557f1 · 32557f1
1 parent 6e55bbb
commit 32557f1
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 19 deletions.
diff --git a/components/dropdown/apiExamples/customDimensions100.html b/components/dropdown/apiExamples/customDimensions100.html
@@ -1,5 +1,5 @@
 <style>
-  #customDropdown100::part(bibSizer) {
+  #customDropdown100::part(bib) {
     width: 100px;
     max-height: 200px;
   }

diff --git a/components/dropdown/apiExamples/customDimensions300.html b/components/dropdown/apiExamples/customDimensions300.html
@@ -1,5 +1,5 @@
 <style>
-  #customDropdown300::part(bibSizer) {
+  #customDropdown300::part(bib) {
     width: 300px;
     max-height: 200px;
   }

diff --git a/components/dropdown/demo/api.md b/components/dropdown/demo/api.md
@@ -876,9 +876,9 @@ This example demonstrations collapsing the dropdown by clicking a button within
 
 #### Width and Sizing Behavior
 
-- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bibSizer` part.
+- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bib` part.
 
-- **Styling Options:** Only the following styles can be applied to the `bibSizer` part:
+- **Styling Options:** Only the following styles can be applied to the `bib` part:
   - `width`
   - `height`
   - `maxWidth`
@@ -891,7 +891,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customDimensions100.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/customDimensions100.html -->
   <style>
-  #customDropdown100::part(bibSizer) {
+  #customDropdown100::part(bib) {
     width: 100px;
     max-height: 200px;
   }
@@ -923,7 +923,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 
 ```html
 <style>
-  #customDropdown100::part(bibSizer) {
+  #customDropdown100::part(bib) {
     width: 100px;
     max-height: 200px;
   }
@@ -964,7 +964,7 @@ This is useful in scenarios where:
   <!-- The below content is automatically added from ./../../apiExamples/customDimensions300.html -->
 
   <style>
-  #customDropdown300::part(bibSizer) {
+  #customDropdown300::part(bib) {
     width: 300px;
     max-height: 200px;
   }
@@ -996,7 +996,7 @@ This is useful in scenarios where:
 
 ```html
   <style>
-  #customDropdown300::part(bibSizer) {
+  #customDropdown300::part(bib) {
     width: 300px;
     max-height: 200px;
   }

diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js
@@ -1631,8 +1631,12 @@ class AuroFloatingUI {
       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;
+      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;
     }
@@ -2774,7 +2778,7 @@ class AuroDropdown extends r {
         <div class="slotContent">
           <slot @slotchange="${this.handleDefaultSlot}"></slot>
         </div>
-        <div id="bibSizer" part="bibSizer" style="position: absolute; pointer-events: none; opacity: 0; z-index: -1;"></div>
+        <div id="bibSizer" part="bib" style="position: absolute; pointer-events: none; opacity: 0; z-index: -1;"></div>
         <auro-dropdownbib
           id="bib"
           role="tooltip"

diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js
@@ -1613,8 +1613,12 @@ class AuroFloatingUI {
       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;
+      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;
     }
@@ -2756,7 +2760,7 @@ class AuroDropdown extends r {
         <div class="slotContent">
           <slot @slotchange="${this.handleDefaultSlot}"></slot>
         </div>
-        <div id="bibSizer" part="bibSizer" style="position: absolute; pointer-events: none; opacity: 0; z-index: -1;"></div>
+        <div id="bibSizer" part="bib" style="position: absolute; pointer-events: none; opacity: 0; z-index: -1;"></div>
         <auro-dropdownbib
           id="bib"
           role="tooltip"

diff --git a/components/dropdown/docs/partials/api.md b/components/dropdown/docs/partials/api.md
@@ -362,7 +362,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 
 - **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bibSizer` part.
 
-- **Styling Options:** Only the following styles can be applied to the `bibSizer` part:
+- **Styling Options:** Only the following styles can be applied to the `bib` part:
   - `width`
   - `height`
   - `maxWidth`

diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js
@@ -368,7 +368,7 @@ export class AuroDropdown extends LitElement {
         <div class="slotContent">
           <slot @slotchange="${this.handleDefaultSlot}"></slot>
         </div>
-        <div id="bibSizer" part="bibSizer" style="position: absolute; pointer-events: none; opacity: 0; z-index: -1;"></div>
+        <div id="bibSizer" part="bib" style="position: absolute; pointer-events: none; opacity: 0; z-index: -1;"></div>
         <auro-dropdownbib
           id="bib"
           role="tooltip"

diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs
@@ -20,8 +20,12 @@ export default class AuroFloatingUI {
       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;
+      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;
     }

diff --git a/components/dropdown/src/scripts/extractBreakpointVariable.mjs b/components/dropdown/src/scripts/extractBreakpointVariable.mjs
@@ -22,4 +22,4 @@ writeFile(filePath, content, (err) => {
     throw err;
   }
   console.log(`Successfully wrote breakpoint vriable file to ${filePath}`);
-});
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,4 +22,4 @@ writeFile(filePath, content, (err) => { @@
         throw err;
       }
       console.log(`Successfully wrote breakpoint vriable file to ${filePath}`);
-    });
+    });