Skip to content

Commit

Permalink
docs: dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
gioboa committed Oct 18, 2023
1 parent e81dce6 commit b08da6e
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 93 deletions.
2 changes: 1 addition & 1 deletion apps/docs/content/_components/drawer.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,4 @@ The component is providing keyboard accessibility with `@keydown.esc="onEscKeyDo

| Slot name | Description |
| --------- | ----------------------- |
| `default` | place content of drawer |
| `default` | Place content of drawer |
106 changes: 14 additions & 92 deletions apps/docs/content/_components/dropdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,11 @@

#tab-1

The `SfDropdown` component is built on top of `useDropdown` and accepts all its params.

::react-only
Learn more about `useDropdown` hook in the [Hooks > useDropdown docs](/react/hooks/usedropdown).
::
::vue-only
Learn more about `useDropdown` composable in the [Composables > useDropdown docs](/vue/hooks/usedropdown).
::
::qwik-only
Learn more about `useDropdown` hook in the [Hooks > useDropdown docs](/react/hooks/usedropdown).
::
The `SfDropdown` component.

<!-- is built on top of `useDropdown` and accepts all its params. -->

<!-- Learn more about `useDropdown` hook in the [Hooks > useDropdown docs](/react/hooks/usedropdown). -->

## Examples

Expand All @@ -24,25 +18,13 @@ By default, the floating content of `SfDropdown` will be placed below your trigg

<Showcase showcase-name="Dropdown/BasicDropdown" style="min-height:400px">

::vue-only

<<<../../../preview/nuxt/pages/showcases/Dropdown/BasicDropdown.vue

::
::react-only

<<<../../../preview/next/pages/showcases/Dropdown/BasicDropdown.tsx

::
::qwik-only
<<<../../../website/src/routes/showcases/Dropdown/BasicDropdown/index.tsx
::

</Showcase>

## Accessibility notes
<!-- ## Accessibility notes
The floating content area has an `aria-hidden` attribute that reflects the visibility of the dropdown (`modelValue`). When the dropdown is not open (`modelValue` is `false`), the `aria-hidden` attribute is set to `true`, ensuring that the content is hidden from assistive technologies.
The floating content area has an `aria-hidden` attribute that reflects the visibility of the dropdown (`modelValue`). When the dropdown is not open (`modelValue` is `false`), the `aria-hidden` attribute is set to `true`, ensuring that the content is hidden from assistive technologies. -->

## Playground

Expand All @@ -52,70 +34,10 @@ The floating content area has an `aria-hidden` attribute that reflects the visib

## Props

::react-only
| Prop name | Type | Default value | Possible values |
| --------- | ---- | ------------- | --------------- |
| `open` | `boolean` | | |
| `onClose`\* | `() => void` | | |
| `trigger`\* | `ReactNode` | | |
| `children` | `ReactNode` | | |
| `placement` | `SfPopoverPlacement` | `'bottom'` | Placement of floating element |
| `middleware` | `UseFloatingProps['middleware']` | | Array of `@floating-ui` middlewares |
| `strategy` | `SfPopoverStrategy` | `'absolute'` | Positioning strategy (`absolute` or `fixed`) |
::

::vue-only
| Prop name | Type | Default value | Possible values |
| --------- | ---- | ------------- | --------------- |
| `modelValue` | `boolean` | | |
| `placement` | `SfPopoverPlacement` | `'bottom'` | Placement of floating element |
| `middleware` | `UseFloatingProps['middleware']` | | Array of `@floating-ui` middlewares |
| `strategy` | `SfPopoverStrategy` | `'absolute'` | Positioning strategy (`absolute` or `fixed`) |
::

::qwik-only
| Prop name | Type | Default value | Possible values |
| --------- | ---- | ------------- | --------------- |
| `open` | `boolean` | | |
| `onClose`\* | `() => void` | | |
| `trigger`\* | `ReactNode` | | |
| `children` | `ReactNode` | | |
| `placement` | `SfPopoverPlacement` | `'bottom'` | Placement of floating element |
| `middleware` | `UseFloatingProps['middleware']` | | Array of `@floating-ui` middlewares |
| `strategy` | `SfPopoverStrategy` | `'absolute'` | Positioning strategy (`absolute` or `fixed`) |
::

::vue-only

## Slots

| Slot name | Description |
| --------- | ---------------------------------- |
| `default` | Dropdown content |
| `trigger` | Element that opens up the dropdown |

## Events

| Event name | Trigger |
| ------------------- | -------------------------------------------------- |
| `update:modelValue` | emits on clicking outside of dropdown or on escape |

::

#tab-3

::vue-only

<<<../../../../packages/sfui/frameworks/vue/components/SfDropdown/SfDropdown.vue

::
::react-only

<<< ../../../../packages/sfui/frameworks/react/components/SfDropdown/SfDropdown.tsx

::
::qwik-only
<<<../../../../dist/packages/qwik-storefront-ui/components/SfDropdown/index.tsx
::

::
| Prop name | Type | Default value | Possible values |
| ----------- | --------------------------------------- | ------------- | --------------- |
| `style?` | `QwikIntrinsicElements['div']['style']` | | |
| `ref?` | `Signal<Element>` | | |
| `class?` | `string` | | |
| `open?` | `boolean` | | |
| `onClose$?` | `PropFunction<() => void>` | | |

0 comments on commit b08da6e

Please sign in to comment.