Skip to content

Commit

Permalink
fix(menu): add hideSelectedIcon prop to menu and listbox (#1915)
Browse files Browse the repository at this point in the history 
sections
  • Loading branch information
@jrgarciadev
jrgarciadev authored Nov 7, 2023
1 parent 7f6218b commit 135cc21
Show file tree
Hide file tree
Showing 7 changed files with 40 additions and 18 deletions.
6 changes: 6 additions & 0 deletions .changeset/gold-points-tap.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@nextui-org/listbox": patch
"@nextui-org/menu": patch
---

Fix #1888 `hideSelectedIcon` added to menu and listbox sections.
19 changes: 10 additions & 9 deletions apps/docs/content/docs/components/dropdown.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,15 +336,16 @@ you to customize each item individually.

### DropdownSection Props

| Attribute | Type | Description | Default |
| ------------ | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
| children\* | `ReactNode` | The contents of the dropdown section. Usually a list of `DropdownItem` components. (static) | - |
| title | `string` | The title of the dropdown section. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic) | - |
| showDivider | `boolean` | Whether to show the divider between the groups. | `false` |
| DividerProps | [DividerProps](/docs/components/divider) | The divider component props. | - |
| classNames | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>` | Allows to set custom class names for the dropdown section slots. | - |
| itemClasses | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the dropdown item slots. | - |
| Attribute | Type | Description | Default |
| ---------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
| children\* | `ReactNode` | The contents of the dropdown section. Usually a list of `DropdownItem` components. (static) | - |
| title | `string` | The title of the dropdown section. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic) | - |
| hideSelectedIcon | `boolean` | Whether to hide the check icon when the items are selected. | `false` |
| showDivider | `boolean` | Whether to show the divider between the groups. | `false` |
| DividerProps | [DividerProps](/docs/components/divider) | The divider component props. | - |
| classNames | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>` | Allows to set custom class names for the dropdown section slots. | - |
| itemClasses | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the dropdown item slots. | - |

---

Expand Down
19 changes: 10 additions & 9 deletions apps/docs/content/docs/components/listbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,15 +262,16 @@ You can customize the `Listbox` items style by using the `itemClasses` prop and

### ListboxSection Props

| Attribute | Type | Description | Default |
| ------------ | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ------- |
| children\* | `ReactNode` | The contents of the listbox section. Usually a list of `ListboxItem` components. (static) | - |
| title | `string` | The title of the listbox section. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic) | - |
| showDivider | `boolean` | Whether to show the divider between the groups. | `false` |
| DividerProps | [DividerProps](/docs/components/divider) | The divider component props. | - |
| classNames | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>` | Allows to set custom class names for the listbox section slots. | - |
| itemClasses | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the listbox item slots. | - |
| Attribute | Type | Description | Default |
| ---------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ------- |
| children\* | `ReactNode` | The contents of the listbox section. Usually a list of `ListboxItem` components. (static) | - |
| title | `string` | The title of the listbox section. | - |
| items | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic) | - |
| hideSelectedIcon | `boolean` | Whether to hide the check icon when the items are selected. | `false` |
| showDivider | `boolean` | Whether to show the divider between the groups. | `false` |
| DividerProps | [DividerProps](/docs/components/divider) | The divider component props. | - |
| classNames | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>` | Allows to set custom class names for the listbox section slots. | - |
| itemClasses | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the listbox item slots. | - |

---

Expand Down
5 changes: 5 additions & 0 deletions packages/components/listbox/src/base/listbox-section-base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ export interface ListboxSectionBaseProps<T extends object = {}> extends SectionP
* The listbox items classNames.
*/
itemClasses?: ListboxItemProps["classNames"];
/**
* Whether to hide the check icon when the items are selected.
* @default false
*/
hideSelectedIcon?: boolean;
/**
* Shows a divider between sections
* @default false
Expand Down
2 changes: 2 additions & 0 deletions packages/components/listbox/src/listbox-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const ListboxSection = forwardRef<"li", ListboxSectionProps>(
disableAnimation,
className,
classNames,
hideSelectedIcon,
showDivider = false,
dividerProps = {},
itemClasses,
Expand Down Expand Up @@ -97,6 +98,7 @@ const ListboxSection = forwardRef<"li", ListboxSectionProps>(
classNames={itemClasses}
color={color}
disableAnimation={disableAnimation}
hideSelectedIcon={hideSelectedIcon}
item={node}
state={state}
variant={variant}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/menu/src/base/menu-section-base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ export interface MenuSectionBaseProps<T extends object = {}> extends SectionProp
* @default false
*/
showDivider?: boolean;
/**
* Whether to hide the check icon when the items are selected.
* @default false
*/
hideSelectedIcon?: boolean;
/**
* The divider props
*/
Expand Down
2 changes: 2 additions & 0 deletions packages/components/menu/src/menu-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const MenuSection = forwardRef<"li", MenuSectionProps>(
className,
classNames,
showDivider = false,
hideSelectedIcon,
dividerProps = {},
itemClasses,
// removed title from props to avoid browsers showing a tooltip on hover
Expand Down Expand Up @@ -108,6 +109,7 @@ const MenuSection = forwardRef<"li", MenuSectionProps>(
closeOnSelect={closeOnSelect}
color={color}
disableAnimation={disableAnimation}
hideSelectedIcon={hideSelectedIcon}
item={node}
state={state}
variant={variant}
Expand Down

2 comments on commit 135cc21

@vercel
Copy link

@vercel vercel bot commented on 135cc21 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nextui-storybook-v2 – ./packages/storybook

nextui-storybook-v2-git-main-nextui-org.vercel.app
nextui-storybook-v2-nextui-org.vercel.app
nextui-storybook-v2.vercel.app
storybook.nextui.org
sb.nextui.org

@vercel
Copy link

@vercel vercel bot commented on 135cc21 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nextui-docs-v2 – ./apps/docs

nextui-docs-v2-git-main-nextui-org.vercel.app
nextui-docs-v2-nextui-org.vercel.app
nextui.org
nextui-docs-v2.vercel.app
www.nextui.org
*.nextui.org

Please sign in to comment.