Add expanded state for disclosure and dropdown buttons

Bagaar · Dec 20, 2023 · 32238f3 · 32238f3
1 parent c0ff7e3
commit 32238f3
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 5 deletions.
diff --git a/addon/components/velvet-alert.ts b/addon/components/velvet-alert.ts
@@ -18,7 +18,7 @@ interface VelvetAlertSignature {
   };
   Blocks: {
     /// The content of the alert.
-    content?: [];
+    content: [];
     /// The icon of the alert.
     icon?: [{ class: "velvet-alert-icon" }];
     /// The title of the alert.

diff --git a/addon/components/velvet-button.hbs b/addon/components/velvet-button.hbs
@@ -5,13 +5,15 @@
     (concat "velvet-button-" (or @variant "primary"))
     (if @isPill "velvet-button-pill")
     (if @isDisabled "velvet-button-disabled")
+    (if @isDisclosure (if @isExpanded "velvet-button-expanded"))
   )
   as |className|
 }}
   {{#if @isRenderless}}
     {{yield (hash class=className)}}
   {{else}}
     <button
+      aria-expanded={{if @isDisclosure (if @isExpanded "true" "false") null}}
       class={{className}}
       disabled={{@isDisabled}}
       type={{or @type "button"}}
@@ -24,7 +26,11 @@
       {{/if}}
       {{yield (hash class=className)}}
       {{#if @isDisclosure}}
-        <this.VelvetIconChevronDown class="velvet-button-disclosure-icon" />
+        {{#if @isExpanded}}
+          <this.VelvetIconXMark class="velvet-button-disclosure-icon" />
+        {{else}}
+          <this.VelvetIconChevronDown class="velvet-button-disclosure-icon" />
+        {{/if}}
       {{/if}}
     </button>
   {{/if}}

diff --git a/addon/components/velvet-button.ts b/addon/components/velvet-button.ts
@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import type { ModifierLike } from "@glint/template";
 import type { TriggerSignature } from "velvet-thunder/components/velvet-dropdown";
 import VelvetIconChevronDown from "velvet-thunder/components/velvet-icon/chevron-down";
+import VelvetIconXMark from "velvet-thunder/components/velvet-icon/x-mark";
 
 interface VelvetButtonSignature {
   Args: {
@@ -11,6 +12,9 @@ interface VelvetButtonSignature {
     /// Indicate if the button discloses content.
     /// @default [false]
     isDisclosure?: boolean;
+    /// Indicate if the button's disclosed content is expanded.
+    /// @default [false]
+    isExpanded?: boolean;
     /// Indicate if the button should render a loading state.
     /// @default [false]
     isLoading?: boolean;
@@ -44,6 +48,7 @@ interface VelvetButtonSignature {
 
 export default class VelvetButton extends Component<VelvetButtonSignature> {
   VelvetIconChevronDown = VelvetIconChevronDown;
+  VelvetIconXMark = VelvetIconXMark;
 
   clickHandler = (event: MouseEvent) => {
     const { isDisabled, onClick } = this.args;

diff --git a/addon/components/velvet-disclosure.hbs b/addon/components/velvet-disclosure.hbs
@@ -8,6 +8,7 @@
       Button=(component
         (ensure-safe-component this.VelvetButton)
         isDisclosure=true
+        isExpanded=this.isShown
         onClick=this.toggle
       )
       IconButton=(component

diff --git a/addon/components/velvet-disclosure.ts b/addon/components/velvet-disclosure.ts
@@ -16,7 +16,10 @@ interface VelvetDisclosureSignature {
     /// The trigger of the disclosure.
     trigger: [
       publicAPI: PublicAPI & {
-        Button: WithBoundArgs<typeof VelvetButton, "isDisclosure" | "onClick">;
+        Button: WithBoundArgs<
+          typeof VelvetButton,
+          "isDisclosure" | "isExpanded" | "onClick"
+        >;
         IconButton: WithBoundArgs<typeof VelvetIconButton, "onClick">;
       },
     ];

diff --git a/addon/components/velvet-dropdown.hbs b/addon/components/velvet-dropdown.hbs
@@ -7,6 +7,7 @@
       Button=(component
         (ensure-safe-component this.VelvetButton)
         isDisclosure=true
+        isExpanded=this.isShown
         privateDropdownTrigger=this.trigger
       )
       Content=(component

diff --git a/docs/components/disclosure/demo/disabling-animations.md b/docs/components/disclosure/demo/disabling-animations.md
@@ -5,7 +5,7 @@ Use the `@shouldAnimate` argument to enable/disable animations.
 ```hbs template
 <DemoSpaceY>
   <VelvetSwitch @isChecked={{this.shouldAnimate}} @onChange={{this.onChange}}>
-    Should Animate
+    Animate
   </VelvetSwitch>
 
   <VelvetDisclosure @shouldAnimate={{this.shouldAnimate}}>

diff --git a/tailwind/components/button.js b/tailwind/components/button.js
@@ -35,7 +35,7 @@ module.exports = () => ({
     },
 
     "&-disclosure-icon": {
-      "@apply ml-2": {},
+      "@apply h-4 ml-2 w-4": {},
     },
 
     ".velvet-spinner": {