Feat: [DS-211] Disclosure Component

.changeset/big-spiders-develop.md

@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+Created the Disclosure component with its sub components: DisclosureHeader and DisclosurePanel.

apps/docs/components/collapsible/Collapsible.tsx

@@ -3,7 +3,7 @@
 import { CollapseIcon, Icon } from "@/components/icon";
 import clsx from "clsx";
 import type { ReactNode } from "react";
-import { Button, composeRenderProps, UNSTABLE_Disclosure as Disclosure, UNSTABLE_DisclosurePanel as DisclosurePanel, type DisclosureProps } from "react-aria-components";
+import { Button, composeRenderProps, Disclosure, DisclosurePanel, type DisclosureProps } from "react-aria-components";
 
 import "./collapsible.css";
 

apps/docs/content/components/navigation/Disclosure.mdx

@@ -0,0 +1,119 @@
+---
+title: Disclosure
+description: The disclosure component is used to put long sections of information under a block that users can expand or collapse.
+category: "navigation"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Disclosure/src/Disclosure.tsx
+    aria: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+---
+
+<Example src="Disclosure/docs/preview" isOpen />
+
+<FeatureFlag flag="next">
+    ## Guidelines
+
+    TODO: If we have some guidelines about this component&apos;s usage
+
+    ### Accessibility ?
+
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
+
+## Anatomy
+
+<FeatureFlag flag="rc">
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+
+    ### Concepts
+
+    TODO: links to related concepts
+</FeatureFlag>
+
+### Composed Components
+
+A `Disclosure` uses the following components.
+
+<ComposedComponents components={["Text, Icon"]}/>
+
+## Usage
+
+### Disabled
+
+A disclosure can be disabled.
+
+<Example src="Disclosure/docs/disabled" />
+
+### Variants
+
+A disclosure has multiple variants.
+
+<Example src="Disclosure/docs/variants" />
+
+**Standalone** - Used when the disclosure is not inside a container.
+
+**Inline** - Used when placing a disclosure inside a container.
+
+### Icon
+
+A disclosure can contain an icon.
+
+<Example src="Disclosure/docs/icon" />
+
+### Description
+
+A disclosure can contain a description.
+
+<Example src="Disclosure/docs/description" />
+
+### Controlled
+
+A disclosure can handle its expanded state in controlled mode.
+
+<Example src="Disclosure/docs/controlled" />
+
+### Custom Header
+
+A disclosure can have a custom header. To accomplish this, do not use `DisclosureHeader` and use the [Button](./Button) component with `slot="trigger"` instead.
+Using React Aria's [Button](https://react-spectrum.adobe.com/react-aria/Button.html) component will also work.
+
+<Example src="Disclosure/docs/customHeader" />
+
+<FeatureFlag flag="next">
+    ## Advanced customization
+
+    ### Contexts
+    TODO: Example of context + content about the context
+
+    ### Custom Children
+
+    TODO: Example of passing custom children to the components to fake a slot
+
+    ### Custom Component
+
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
+
+## Props
+
+### Disclosure
+<PropTable component="Disclosure" />
+
+### Disclosure Header
+<PropTable component="DisclosureHeader" />
+
+### Disclosure Panel
+<PropTable component="DisclosurePanel" />
+
+## Progressive Enhancement
+
+Our Disclosure component uses experimental CSS features like:
+
+- **interpolate-size: allow-keywords;**: Enables fluid transitions between dynamic sizes.
+
+- **transition-behavior: allow-discrete;**: Allows transitions for properties like content-visibility.
+
+These features enhance animations where supported. In browsers without support, the component remains fully usable without animations, maintaining progressive enhancement.
+
+## Migration Notes
+
+<MigrateGuide src="Disclosure/docs/migration-notes" />

apps/docs/examples/Preview.ts

@@ -743,6 +743,27 @@ export const Previews: Record<string, Preview> = {
     "layout/docs/stack/alignY": {
         component: lazy(() => import("@/../../packages/components/src/layout/docs/stack/alignY.tsx"))
     },
+    "Disclosure/docs/preview": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/preview.tsx"))
+    },
+    "Disclosure/docs/disabled": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/disabled.tsx"))
+    },
+    "Disclosure/docs/variants": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/variants.tsx"))
+    },
+    "Disclosure/docs/icon": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/icon.tsx"))
+    },
+    "Disclosure/docs/description": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/description.tsx"))
+    },
+    "Disclosure/docs/controlled": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/controlled.tsx"))
+    },
+    "Disclosure/docs/customHeader": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/customHeader.tsx"))
+    },
     "Link/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/Link/docs/preview.tsx"))
     },

apps/docs/examples/overview/index.ts

@@ -8,6 +8,7 @@ import Checkbox from "./Checkbox.svg";
 import CheckboxGroup from "./CheckboxGroup.svg";
 import ComboBox from "./ComboBox.svg";
 import Content from "./Content.svg";
+import Disclosure from "./Disclosure.svg";
 import Divider from "./Divider.svg";
 import ErrorMessage from "./ErrorMessage.svg";
 import Flex from "./Flex.svg";
@@ -56,6 +57,7 @@ export const OverviewComponents: OverviewComponentsType = {
     CheckboxGroup,
     ComboBox,
     Content,
+    Disclosure,
     Divider,
     ErrorMessage,
     Flex,

apps/docs/package.json

@@ -22,8 +22,8 @@
         "copy:images": "tsx scripts/copyImages.ts"
     },
     "peerDependencies": {
-        "react-aria": "^3.35",
-        "react-aria-components": "^1.4"
+        "react-aria": "^3.36",
+        "react-aria-components": "^1.5"
     },
     "dependencies": {
         "@tanstack/react-table": "^8.20.5",
@@ -33,8 +33,8 @@
         "next-contentlayer": "0.3.4",
         "next-mdx-remote": "^5.0.0",
         "react": "18.3.1",
-        "react-aria": "3.35.1",
-        "react-aria-components": "1.4.1",
+        "react-aria": "3.36.0",
+        "react-aria-components": "1.5.0",
         "react-dom": "18.3.1",
         "react-toggle": "4.1.3",
         "rehype-parse": "^9.0.1",

package.json

@@ -46,23 +46,23 @@
     },
     "devDependencies": {
         "@changesets/cli": "2.27.9",
-        "@chromatic-com/storybook": "2.0.2",
+        "@chromatic-com/storybook": "^3.2.2",
         "@hopper-ui/tokens": "workspace:*",
         "@internationalized/string-compiler": "3.2.5",
         "@netlify/plugin-nextjs": "5.8.0",
         "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
-        "@storybook/addon-a11y": "^8.3.5",
-        "@storybook/addon-essentials": "^8.3.5",
-        "@storybook/addon-interactions": "^8.3.5",
-        "@storybook/addon-links": "^8.3.5",
-        "@storybook/addon-mdx-gfm": "^8.3.5",
+        "@storybook/addon-a11y": "^8.4.5",
+        "@storybook/addon-essentials": "^8.4.5",
+        "@storybook/addon-interactions": "^8.4.5",
+        "@storybook/addon-links": "^8.4.5",
+        "@storybook/addon-mdx-gfm": "^8.4.5",
         "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-        "@storybook/blocks": "^8.3.5",
-        "@storybook/react": "^8.3.5",
-        "@storybook/react-webpack5": "^8.3.5",
-        "@storybook/test": "^8.3.5",
+        "@storybook/blocks": "^8.4.5",
+        "@storybook/react": "^8.4.5",
+        "@storybook/react-webpack5": "^8.4.5",
+        "@storybook/test": "^8.4.5",
         "@storybook/test-runner": "0.19.1",
-        "@storybook/types": "^8.3.5",
+        "@storybook/types": "^8.4.5",
         "@types/eslint": "8.56.12",
         "@types/jest": "29.5.13",
         "@types/node": "22.7.5",
@@ -73,7 +73,7 @@
         "cross-env": "7.0.3",
         "eslint": "8.57.1",
         "eslint-plugin-hopper-monorepo": "workspace:*",
-        "eslint-plugin-storybook": "^0.9.0",
+        "eslint-plugin-storybook": "^0.11.1",
         "jest": "29.7.0",
         "plop": "4.0.1",
         "prettier": "3.3.3",
@@ -82,7 +82,7 @@
         "react-dom": "18.3.1",
         "react-refresh": "0.14.2",
         "react-router-dom": "6.27.0",
-        "storybook": "^8.3.5",
+        "storybook": "^8.4.5",
         "stylelint": "16.10.0",
         "stylelint-config-clean-order": "6.1.0",
         "stylelint-use-logical": "2.1.2",

packages/components/package.json

@@ -42,16 +42,16 @@
     "peerDependencies": {
         "@hopper-ui/styled-system": "^2.4",
         "react": "^18",
-        "react-aria": "^3.35",
-        "react-aria-components": "^1.4",
+        "react-aria": "^3.36",
+        "react-aria-components": "^1.5",
         "react-dom": "^18"
     },
     "dependencies": {
         "@hopper-ui/icons": "workspace:*",
-        "@react-aria/utils": "^3.25.3",
-        "@react-stately/data": "^3.11.7",
-        "@react-stately/utils": "^3.10.4",
-        "@react-types/shared": "^3.25.0",
+        "@react-aria/utils": "^3.26.0",
+        "@react-stately/data": "^3.12.0",
+        "@react-stately/utils": "^3.10.5",
+        "@react-types/shared": "^3.26.0",
         "clsx": "^2.1.1"
     },
     "devDependencies": {
@@ -79,8 +79,8 @@
         "jest-fail-on-console": "3.3.1",
         "jest-fetch-mock": "3.0.3",
         "react": "18.3.1",
-        "react-aria": "3.35.1",
-        "react-aria-components": "1.4.1",
+        "react-aria": "3.36.0",
+        "react-aria-components": "1.5.0",
         "react-dom": "18.3.1",
         "react-test-renderer": "18.3.1",
         "ts-jest": "29.2.5",

packages/components/src/ComboBox/src/ComboBox.module.css

@@ -32,23 +32,18 @@
     /* ComboBox Button */
     --hop-ComboBox-button-padding-inline: var(--hop-space-inset-md);
 
-    /* Button Icon */
-    --hop-ComboBox-button-icon-color: var(--hop-neutral-icon-weak);
-
     /* Prefix */
     --hop-ComboBox-prefix-color: var(--hop-neutral-text-weak);
 
     /* Hovered */
     --hop-ComboBox-trigger-background-color-hovered: var(--hop-neutral-surface-hover);
     --hop-ComboBox-trigger-border-color-hovered: var(--hop-neutral-border-hover);
     --hop-ComboBox-trigger-color-hovered: var(--hop-neutral-text-hover);
-    --hop-ComboBox-button-icon-color-hovered: var(--hop-neutral-icon-hover);
 
     /* Focused */
     --hop-ComboBox-trigger-background-color-focused: var(--hop-neutral-surface-hover);
     --hop-ComboBox-trigger-border-color-focused: var(--hop-primary-border-focus);
     --hop-ComboBox-trigger-color-focused: var(--hop-neutral-text-hover);
-    --hop-ComboBox-button-icon-color-focused: var(--hop-neutral-icon-hover);
     --hop-ComboBox-trigger-outline-color-focused: var(--hop-primary-border-focus);
 
     /**
@@ -59,7 +54,6 @@
     --hop-ComboBox-button-background-color-selected: var(--hop-neutral-surface);
     --hop-ComboBox-button-border-color-selected: var(--hop-neutral-border-selected);
     --hop-ComboBox-button-color-selected: var(--hop-neutral-text);
-    --hop-ComboBox-button-icon-color-selected: var(--hop-neutral-icon);
 
     /* Invalid */
     --hop-ComboBox-trigger-border-color-invalid: var(--hop-danger-border-strong);
@@ -68,7 +62,6 @@
     --hop-ComboBox-trigger-background-color-disabled: var(--hop-neutral-surface-disabled);
     --hop-ComboBox-trigger-border-color-disabled: var(--hop-neutral-border-disabled);
     --hop-ComboBox-trigger-color-disabled: var(--hop-neutral-text-disabled);
-    --hop-ComboBox-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
     --hop-ComboBox-trigger-cursor-disabled: not-allowed;
 
     /* Internal Variables */
@@ -77,7 +70,6 @@
     --trigger-border-color: var(--hop-ComboBox-trigger-border-color);
     --trigger-cursor: var(--hop-ComboBox-trigger-cursor);
     --trigger-color: var(--hop-ComboBox-trigger-color);
-    --button-icon-color: var(--hop-ComboBox-button-icon-color);
     --input-font-family: var(--hop-ComboBox-input-md-font-family);
     --input-font-size: var(--hop-ComboBox-input-md-font-size);
     --input-font-weight: var(--hop-ComboBox-input-md-font-weight);
@@ -108,6 +100,7 @@
     column-gap: var(--hop-ComboBox-trigger-column-gap);
     order: 2;
 
+    box-sizing: border-box;
     block-size: var(--trigger-block-size);
     padding-inline-start: var(--hop-ComboBox-trigger-padding-inline-start);
 
@@ -134,14 +127,12 @@
     --trigger-background-color: var(--hop-ComboBox-trigger-background-color-hovered);
     --trigger-border-color: var(--hop-ComboBox-trigger-border-color-hovered);
     --trigger-color: var(--hop-ComboBox-trigger-color-hovered);
-    --button-icon-color: var(--hop-ComboBox-button-icon-color-hovered);
 }
 
 .hop-ComboBox__trigger[data-selected] {
     --trigger-background-color: var(--hop-ComboBox-button-background-color-selected);
     --trigger-border-color: var(--hop-ComboBox-button-border-color-selected);
     --trigger-color: var(--hop-ComboBox-button-color-selected);
-    --button-icon-color: var(--hop-ComboBox-button-icon-color-selected);
 }
 
 .hop-ComboBox__trigger[data-invalid] {
@@ -152,7 +143,6 @@
     --trigger-background-color: var(--hop-ComboBox-trigger-background-color-focused);
     --trigger-border-color: var(--hop-ComboBox-trigger-border-color-focused);
     --trigger-color: var(--hop-ComboBox-trigger-color-focused);
-    --button-icon-color: var(--hop-ComboBox-button-icon-color-focused);
 
     outline: var(--hop-ComboBox-trigger-border-size) solid var(--hop-ComboBox-trigger-outline-color-focused);
     outline-offset: var(--hop-ComboBox-trigger-outline-offset);
@@ -162,7 +152,6 @@
     --trigger-background-color: var(--hop-ComboBox-trigger-background-color-disabled);
     --trigger-border-color: var(--hop-ComboBox-trigger-border-color-disabled);
     --trigger-color: var(--hop-ComboBox-trigger-color-disabled);
-    --button-icon-color: var(--hop-ComboBox-button-icon-color-disabled);
     --trigger-cursor: var(--hop-ComboBox-trigger-cursor-disabled);
 }
 
@@ -196,6 +185,8 @@
 
     padding-inline: var(--hop-ComboBox-button-padding-inline);
 
+    color: inherit;
+
     background-color: var(--trigger-background-color);
     border: none;
     outline: none;
@@ -208,7 +199,6 @@
 
 .hop-ComboBox__button-icon {
     margin-inline-start: auto;
-    color: var(--button-icon-color);
 }
 
 .hop-ComboBox__helper-message,