From 32557f1afed6391c8c2c03a663a30135e8143cb0 Mon Sep 17 00:00:00 2001
From: Eunsun Mota <eunsun.mota@alaskaair.com>
Date: Wed, 27 Nov 2024 17:15:27 -0500
Subject: [PATCH] refactor: rename `bibSizer` for part to `bib` for easier
 understanding for dev

---
 .../dropdown/apiExamples/customDimensions100.html    |  2 +-
 .../dropdown/apiExamples/customDimensions300.html    |  2 +-
 components/dropdown/demo/api.md                      | 12 ++++++------
 components/dropdown/demo/api.min.js                  | 10 +++++++---
 components/dropdown/demo/index.min.js                | 10 +++++++---
 components/dropdown/docs/partials/api.md             |  2 +-
 components/dropdown/src/auro-dropdown.js             |  2 +-
 components/dropdown/src/floatingUI.mjs               |  8 ++++++--
 .../src/scripts/extractBreakpointVariable.mjs        |  2 +-
 9 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/components/dropdown/apiExamples/customDimensions100.html b/components/dropdown/apiExamples/customDimensions100.html
index b1a802ff..621f24a1 100644
--- 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
index 2602a462..96de6de9 100644
--- 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
index c82c965a..5058bd84 100644
--- 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
index 5016e723..1543e39d 100644
--- 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
index f9794d64..3044fd7c 100644
--- 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
index 54c3c6a1..a061c120 100644
--- 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
index 8cea7853..1d48ceae 100644
--- 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
index a7edc81c..9c6eb5e8 100644
--- 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
index 841c341a..754568a0 100644
--- 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}`);
-});
\ No newline at end of file
+});