add dropdown primitive ctd

zestia · Dec 10, 2024 · d3a7ab3 · d3a7ab3
1 parent 4e08ba9
commit d3a7ab3
Show file tree

Hide file tree

Showing 40 changed files with 675 additions and 509 deletions.
diff --git a/README.md b/README.md
@@ -52,17 +52,17 @@ This addon intentionally...
 
 ```handlebars
 <SelectBox @value='Foo' @onChange={{this.handleChange}} as |sb|>
-  <sb.Dropdown as |dd|>
+  <sb.Dropdown>
     <sb.Trigger>
       {{sb.value}}
     </sb.Trigger>
-    <dd.Content>
+    <sb.Content>
       <sb.Options>
         <sb.Option @value='Foo'>
           Foo
         </sb.Option>
       </sb.Options>
-    </dd.Content>
+    </sb.Content>
   </sb.Dropdown>
 </SelectBox>
 ```

diff --git a/addon/components/dropdown/content.gjs b/addon/components/dropdown/content.gjs
@@ -1,8 +1,10 @@
 import lifecycle from '@zestia/ember-select-box/modifiers/lifecycle';
 
 <template>
+  {{! template-lint-disable no-positive-tabindex }}
   <div
     class="dropdown__content"
+    tabindex={{@tabindex}}
     {{lifecycle onInsert=@onInsert onDestroy=@onDestroy}}
     ...attributes
   >

diff --git a/addon/components/select-box/index.gjs b/addon/components/select-box/index.gjs
@@ -111,7 +111,11 @@ export default class SelectBox extends Component {
   }
 
   get optionsTabIndex() {
-    return this.isListBox ? '0' : '-1';
+    return this.isListBox ? '0' : null;
+  }
+
+  get dropdownTabIndex() {
+    return this.dropdown ? '-1' : null;
   }
 
   get triggerTabIndex() {
@@ -584,6 +588,7 @@ export default class SelectBox extends Component {
       Option: this.Option,
       Options: this.Options,
       Trigger: this.Trigger,
+      Content: this.Content,
       // Properties
       element: this.element,
       isBusy: this.isBusy,
@@ -642,15 +647,13 @@ export default class SelectBox extends Component {
         )
         Dropdown=(component
           Dropdown
-          class="select-box__dropdown"
           onReady=this.registerDropdown
           onOpenClosure=this.handleOpenDropdown
           onCloseClosure=this.handleCloseDropdown
           onDestroy=this.handleDestroyDropdown
         )
         Trigger=(component
           this.dropdown.Trigger
-          class="select-box__trigger"
           role=this.triggerRole
           aria-busy=this.isBusy
           aria-disabled=this.isDisabled
@@ -661,6 +664,7 @@ export default class SelectBox extends Component {
           onDestroy=this.handleDestroyTrigger
           onKeyDown=this.handleKeyDownTrigger
         )
+        Content=(component this.dropdown.Content tabindex="-1")
       )
     ~}}
     <div

diff --git a/tests/acceptance/performance-test.js b/tests/acceptance/performance-test.js
@@ -22,7 +22,7 @@ module('Acceptance | performance', function (hooks) {
 
     this.startTimer();
 
-    await click('.select-box__trigger');
+    await click('.select-box .dropdown__trigger');
 
     this.stopTimer();
 

diff --git a/tests/dummy/app/components/example3.gjs b/tests/dummy/app/components/example3.gjs
@@ -8,19 +8,19 @@ import SelectBox from '@zestia/ember-select-box/components/select-box';
     ...attributes
     as |sb|
   >
-    <sb.Dropdown as |dd|>
+    <sb.Dropdown>
       <sb.Trigger>
         {{yield sb.value to="trigger"}}
       </sb.Trigger>
-      <dd.Content>
+      <sb.Content>
         <sb.Options>
           {{#each @options as |value|}}
             <sb.Option @value={{value}}>
               {{yield value to="option"}}
             </sb.Option>
           {{/each}}
         </sb.Options>
-      </dd.Content>
+      </sb.Content>
     </sb.Dropdown>
   </SelectBox>
 </template>
diff --git a/tests/dummy/app/components/example4.gjs b/tests/dummy/app/components/example4.gjs
@@ -18,11 +18,11 @@ export default class extends Component {
       ...attributes
       as |sb|
     >
-      <sb.Dropdown as |dd|>
+      <sb.Dropdown>
         <sb.Trigger>
           {{yield sb.value to="trigger"}}
         </sb.Trigger>
-        <dd.Content>
+        <sb.Content>
           <sb.Options>
             {{#each @options as |value|}}
               <sb.Option @value={{value}} as |option|>
@@ -38,7 +38,7 @@ export default class extends Component {
               </sb.Option>
             {{/each}}
           </sb.Options>
-        </dd.Content>
+        </sb.Content>
       </sb.Dropdown>
     </SelectBox>
   </template>

diff --git a/tests/dummy/app/components/example6.gjs b/tests/dummy/app/components/example6.gjs
@@ -16,7 +16,7 @@ import { fn } from '@ember/helper';
       </sb.Trigger>
 
       {{#if dd.isOpen}}
-        <dd.Content>
+        <sb.Content>
           <sb.Input />
           <sb.Options>
             {{#each sb.options as |value|}}
@@ -29,7 +29,7 @@ import { fn } from '@ember/helper';
               </sb.Option>
             {{/each}}
           </sb.Options>
-        </dd.Content>
+        </sb.Content>
       {{/if}}
     </sb.Dropdown>
   </SelectBox>

diff --git a/tests/dummy/app/components/example7.gjs b/tests/dummy/app/components/example7.gjs
@@ -38,7 +38,7 @@ export default class extends Component {
         </div>
 
         {{#if dd.isOpen}}
-          <dd.Content>
+          <sb.Content>
             <sb.Options>
               {{#if sb.isBusy}}
                 <sb.Option @disabled={{true}}>
@@ -56,7 +56,7 @@ export default class extends Component {
                 </sb.Option>
               {{/if}}
             </sb.Options>
-          </dd.Content>
+          </sb.Content>
         {{/if}}
       </sb.Dropdown>
     </SelectBox>

diff --git a/tests/dummy/app/styles/example.scss b/tests/dummy/app/styles/example.scss
@@ -20,18 +20,30 @@
   border-color: var(--dark-grey);
 }
 
-@mixin option {
+@mixin trigger {
   cursor: pointer;
-  padding: var(--space-l);
+  padding: var(--space-m);
+  outline: none;
+  user-select: none;
+  border: 2px solid transparent;
 }
 
-@mixin options {
-  outline: none;
+@mixin dropdown-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
+@mixin options {
+  outline: none;
+  overflow: auto;
+}
+
+@mixin option {
+  cursor: pointer;
+  padding: var(--space-l);
+}
+
 @mixin option-current {
   box-shadow:
     inset 0 0 0 2px var(--white),
@@ -50,14 +62,6 @@
   font-weight: bold;
 }
 
-@mixin trigger {
-  cursor: pointer;
-  padding: var(--space-m);
-  outline: none;
-  user-select: none;
-  border: 2px solid transparent;
-}
-
 @mixin trigger-focused {
   border-color: var(--blue);
 }

diff --git a/tests/dummy/app/styles/example1.scss b/tests/dummy/app/styles/example1.scss
@@ -7,10 +7,6 @@
     @include example.box-focused;
   }
 
-  .select-box__options {
-    @include example.options;
-  }
-
   .select-box__option {
     @include example.option;
   }

diff --git a/tests/dummy/app/styles/example3.scss b/tests/dummy/app/styles/example3.scss
@@ -7,30 +7,30 @@
     @include example.box-focused;
   }
 
-  .select-box__dropdown[data-open='false'] .select-box__options {
+  .dropdown[data-open='false'] .dropdown__content {
     @include example.screen-reader-only;
   }
 
-  .select-box__trigger {
+  .dropdown__trigger {
     @include example.trigger;
 
     width: 200px;
   }
 
-  .select-box__trigger:focus {
+  .dropdown__trigger:focus {
     @include example.trigger-focused;
   }
 
-  .select-box__option {
-    @include example.option;
-  }
-
-  .select-box__options {
-    @include example.options;
+  .dropdown__content {
+    @include example.dropdown-content;
 
     height: 240px;
   }
 
+  .select-box__option {
+    @include example.option;
+  }
+
   .select-box__option[aria-current='true'] {
     @include example.option-current;
   }

diff --git a/tests/dummy/app/styles/example4.scss b/tests/dummy/app/styles/example4.scss
@@ -7,30 +7,30 @@
     @include example.box-focused;
   }
 
-  .select-box__dropdown[data-open='false'] .select-box__options {
+  .dropdown[data-open='false'] .dropdown__content {
     @include example.screen-reader-only;
   }
 
-  .select-box__trigger {
+  .dropdown__trigger {
     @include example.trigger;
 
     width: 200px;
   }
 
-  .select-box__trigger:focus {
+  .dropdown__trigger:focus {
     @include example.trigger-focused;
   }
 
-  .select-box__option {
-    @include example.option;
-  }
-
-  .select-box__options {
-    @include example.options;
+  .dropdown__content {
+    @include example.dropdown-content;
 
     height: 282px;
   }
 
+  .select-box__option {
+    @include example.option;
+  }
+
   .select-box__option[aria-current='true'] {
     @include example.option-current;
   }

diff --git a/tests/dummy/app/styles/example6.scss b/tests/dummy/app/styles/example6.scss
@@ -7,17 +7,16 @@
     @include example.box-focused;
   }
 
-  .dropdown__content {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .select-box__trigger {
+  .dropdown__trigger {
     @include example.trigger;
 
     width: 200px;
   }
 
+  .dropdown__content {
+    @include example.dropdown-content;
+  }
+
   .select-box__input {
     @include example.input;
   }
@@ -30,10 +29,6 @@
     @include example.option;
   }
 
-  .select-box__options {
-    @include example.options;
-  }
-
   .select-box__option[aria-current='true'] {
     @include example.option-current;
   }

diff --git a/tests/dummy/app/styles/example7.scss b/tests/dummy/app/styles/example7.scss
@@ -7,13 +7,17 @@
     @include example.box-focused;
   }
 
-  .select-box__trigger {
+  .dropdown__trigger {
     @include example.trigger;
 
     width: 20px;
     text-align: center;
   }
 
+  .dropdown__content {
+    @include example.dropdown-content;
+  }
+
   .select-box__input {
     @include example.input;
   }
@@ -26,10 +30,6 @@
     @include example.option;
   }
 
-  .select-box__options {
-    @include example.options;
-  }
-
   .select-box__option[aria-current='true'] {
     @include example.option-current;
   }

diff --git a/tests/dummy/app/templates/performance.hbs b/tests/dummy/app/templates/performance.hbs
@@ -14,15 +14,15 @@
       {{if sb.value sb.value.name "None"}}
     </sb.Trigger>
     {{#if dd.isOpen}}
-      <dd.Content>
+      <sb.Content>
         <sb.Options>
           {{#each this.data as |value|}}
             <sb.Option @value={{value}}>
               {{value.name}}
             </sb.Option>
           {{/each}}
         </sb.Options>
-      </dd.Content>
+      </sb.Content>
     {{/if}}
   </sb.Dropdown>
 </SelectBox>