fix(select): display select properly

`popover` property cause this bug since element extends HTMLElement under the hood Also fix the lable fixes: #41
CheeseGrinder · Sep 29, 2024 · 79fb0cb · 79fb0cb
1 parent 60044d5
commit 79fb0cb
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -8,11 +8,12 @@
     "packages/vue"
   ],
   "scripts": {
-    "install:all": "npm run install:core && npm install:vue",
-    "install:core": "npm install -w @poppy-ui/core",
-    "build:core": "cd packages/core && npm run build",
-    "install:vue": "npm install -w @poppy-ui/vue @poppy-ui/core ",
-    "build:vue": "cd packages/vue && npm run build",
+    "install:all": "npm install -w @poppy-ui/core -w @poppy-ui/vue",
+    "core:install": "npm install -w @poppy-ui/core",
+    "core:start": "npm start -w @poppy-ui/core",
+    "core:build": "npm run build -w @poppy-ui/core",
+    "vue:install": "npm install -w @poppy-ui/vue",
+    "vue:build": "npm run build -w @poppy-ui/vue",
     "prepare": "git config core.hooksPath .githooks"
   },
   "devDependencies": {

diff --git a/packages/core/src/components/join/join.tsx b/packages/core/src/components/join/join.tsx
@@ -19,7 +19,7 @@ export class Join implements ComponentInterface {
    * @config
    * @default "horizontal"
    */
-  @Prop({ reflect: true }) orientation: JoinOrientation;
+  @Prop({ reflect: true, mutable: true }) orientation: JoinOrientation;
 
   componentWillLoad(): void {
     componentConfig.apply(this, 'pop-join', {

diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
@@ -16,7 +16,7 @@
 $minWidth: 12rem;
 
 // @include join-item.item(".select-wrapper");
-@include join-item.item(".select-wrapper button");
+@include join-item.item(".select-wrapper", ".select-wrapper button");
 
 :host {
   --opacity: 1;
@@ -38,7 +38,7 @@ $minWidth: 12rem;
     align-items: center;
 
     overflow: hidden;
-    // border-radius: var(--border-radius, get-radius(md));
+    border-radius: var(--border-radius);
     background-color: var(--background);
 
     &:has(button:focus-visible) {

diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -34,8 +34,8 @@ export class Select implements ComponentInterface, FormAssociatedInterface {
   private inputId = `pop-select-${selectIds++}`;
   private inheritedAttributes: Attributes;
 
-  private popover: HTMLPopPopoverElement;
-  private trigger: HTMLButtonElement;
+  private popoverRef: HTMLPopPopoverElement;
+  private triggerRef: HTMLButtonElement;
 
   @Element() host!: HTMLElement;
   @AttachInternals() internals: ElementInternals;
@@ -226,12 +226,12 @@ export class Select implements ComponentInterface, FormAssociatedInterface {
    */
   @Method()
   async setFocus(): Promise<void> {
-    this.trigger.focus();
+    this.triggerRef.focus();
   }
 
   @Method()
   async open(event?: any) {
-    if (this.disabled || this.isExpanded || this.popover) return;
+    if (this.disabled || this.isExpanded || this.popoverRef) return;
 
     this.isExpanded = true;
     const selectedValue = this.value;
@@ -275,10 +275,10 @@ export class Select implements ComponentInterface, FormAssociatedInterface {
       alignment: 'center',
       event: event,
     });
-    this.popover = popover;
+    this.popoverRef = popover;
 
     popover.addEventListener('didDismiss', () => {
-      this.popover = undefined;
+      this.popoverRef = undefined;
       this.isExpanded = false;
       this.popDismiss.emit();
       this.setFocus();
@@ -324,7 +324,7 @@ export class Select implements ComponentInterface, FormAssociatedInterface {
     if (this.disabled || !this.isExpanded) return;
 
     this.isExpanded = false;
-    this.popover.dismiss();
+    this.popoverRef.dismiss();
   }
 
   private onFocus = () => {
@@ -338,7 +338,7 @@ export class Select implements ComponentInterface, FormAssociatedInterface {
   private onClick = async (ev: PointerEvent) => {
     await this.open({
       ...ev,
-      target: this.trigger,
+      target: this.triggerRef,
     });
   };
 
@@ -453,7 +453,7 @@ export class Select implements ComponentInterface, FormAssociatedInterface {
         onClick={this.onClick}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
-        ref={ref => (this.trigger = ref)}
+        ref={ref => (this.triggerRef = ref)}
       />
     );
   }
@@ -474,7 +474,7 @@ export class Select implements ComponentInterface, FormAssociatedInterface {
           'join-item': hostContext(host, 'pop-join'),
         }}
       >
-        <div class="label-text-wrapper">
+        <div class="label">
           <label
             htmlFor={inputId}
             part="label"

diff --git a/packages/core/src/components/select/test/basic/index.html b/packages/core/src/components/select/test/basic/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Select Basic | Poppy-ui</title>
+    <link rel="stylesheet" href="/build/poppy.css">
+    <script type="module" src="/build/poppy.esm.js"></script>
+    <script nomodule src="/build/poppy.js"></script>
+    <style>
+        main {
+            width: 100vw;
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1rem;
+
+            background-color: var(--base-300);
+        }
+        section {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: .35rem;
+        }
+        div {
+            display: flex;
+            gap: .5rem;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <section>
+            <h2>Select basic</h2>
+            <div>
+                <pop-select>
+                    <span slot="label">Recommendation</span>
+                    <pop-select-option>Option 1</pop-select-option>
+                    <pop-select-option>Option 2</pop-select-option>
+                    <pop-select-option>Option 3</pop-select-option>
+                    <pop-select-option>Option 4</pop-select-option>
+                </pop-select>
+                <pop-select value="Option 2">
+                    <span slot="label">Recommendation</span>
+                    <pop-select-option>Option 1</pop-select-option>
+                    <pop-select-option>Option 2</pop-select-option>
+                    <pop-select-option>Option 3</pop-select-option>
+                    <pop-select-option>Option 4</pop-select-option>
+                </pop-select>
+                <pop-join>
+                    <pop-select>
+                        <span slot="label">Recommendation</span>
+                        <pop-select-option>Option 1</pop-select-option>
+                        <pop-select-option>Option 2</pop-select-option>
+                        <pop-select-option>Option 3</pop-select-option>
+                        <pop-select-option>Option 4</pop-select-option>
+                    </pop-select>
+                    <pop-select value="Option 2">
+                        <span slot="label">Recommendation</span>
+                        <pop-select-option>Option 1</pop-select-option>
+                        <pop-select-option>Option 2</pop-select-option>
+                        <pop-select-option>Option 3</pop-select-option>
+                        <pop-select-option>Option 4</pop-select-option>
+                    </pop-select>
+                </pop-join>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/packages/core/src/themes/utils/_join-item.scss b/packages/core/src/themes/utils/_join-item.scss
@@ -1,15 +1,17 @@
 @import "@poppy/functions/poppy.radius";
 
-@mixin item($selector) {
+@mixin item($selectors...) {
   $radius-var: get-radius(md);
 
   // join-item
-  :host(.join-item) > #{$selector} {
-    border-start-start-radius: var(--border-radius-start-start, var(--border-radius, #{$radius-var}));
-
-    border-start-end-radius: var(--border-radius-start-end, var(--border-radius, #{$radius-var}));
-    border-end-start-radius: var(--border-radius-end-start, var(--border-radius, #{$radius-var}));
-    border-end-end-radius: var(--border-radius-end-end, var(--border-radius, #{$radius-var}));
+  @each $selector in $selectors {
+    :host(.join-item) > #{$selector} {
+      border-start-start-radius: var(--border-radius-start-start, var(--border-radius, #{$radius-var}));
+
+      border-start-end-radius: var(--border-radius-start-end, var(--border-radius, #{$radius-var}));
+      border-end-start-radius: var(--border-radius-end-start, var(--border-radius, #{$radius-var}));
+      border-end-end-radius: var(--border-radius-end-end, var(--border-radius, #{$radius-var}));
+    }
   }
 }