diff --git a/changelog.md b/changelog.md index 935e444f54..39cd8c7305 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,9 @@ +# 5.7.2 - 11.04.2024 + +**What's Fixed** +* [IconButton]: Replace the `isDropdown` prop with `showDropdownIcon` to prevent the automatic appearance of the dropdown icon when using `IconButton` as the `Dropdown` target. + + # 5.7.1 - 29.03.2024 **What's Fixed** diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json index 085d5d27d7..48a733deab 100644 --- a/public/docs/docsGenOutput/docsGenOutput.json +++ b/public/docs/docsGenOutput/docsGenOutput.json @@ -1,5 +1,5 @@ { - "version": "5.7.0-alpha.0", + "version": "5.7.1", "docsGenTypes": { "@epam/uui-core:AcceptDropParams": { "summary": { @@ -34453,7 +34453,7 @@ "typeValue": { "raw": "IconButtonProps", "print": [ - "type IconButtonProps = ClickableComponentProps & IDropdownToggler & {", + "type IconButtonProps = ClickableComponentProps & Omit & {", " /** Icon can be a React element (usually an SVG element) */", " icon?: Icon;", " /** Icon for drop-down toggler */", @@ -34462,6 +34462,10 @@ " * Defines component size.", " */", " size?: number;", + " /**", + " * Pass true to enable dropdown icon.", + " */", + " showDropdownIcon?: boolean;", "};" ] }, @@ -34646,23 +34650,6 @@ "from": "@epam/uui-core:IDropdownToggler", "required": false }, - { - "uid": "isDropdown", - "name": "isDropdown", - "comment": { - "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:IDropdownToggler", - "required": false - }, { "uid": "icon", "name": "icon", @@ -34710,6 +34697,22 @@ "type": "number" }, "required": false + }, + { + "uid": "showDropdownIcon", + "name": "showDropdownIcon", + "comment": { + "raw": [ + "Pass true to enable dropdown icon." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false } ], "propsFromUnion": false @@ -65442,6 +65445,23 @@ "from": "@epam/uui-core:IHasRawProps", "required": false }, + { + "uid": "isOpen", + "name": "isOpen", + "comment": { + "raw": [ + "When isDropdown=true, indicate that dropdown is open with chevron icon" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownToggler", + "required": false + }, { "uid": "onClick", "name": "onClick", @@ -65557,45 +65577,28 @@ "required": false }, { - "uid": "isOpen", - "name": "isOpen", - "comment": { - "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:IDropdownToggler", - "required": false - }, - { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "icon", + "name": "icon", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Icon can be a React element (usually an SVG element)" ] }, "typeValue": { - "raw": "boolean" + "raw": "Icon" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:IDropdownToggler", + "from": "@epam/uui-components:IconButtonProps", "required": false }, { - "uid": "icon", - "name": "icon", + "uid": "dropdownIcon", + "name": "dropdownIcon", "comment": { "raw": [ - "Icon can be a React element (usually an SVG element)" + "Icon for drop-down toggler" ] }, "typeValue": { @@ -65608,18 +65611,18 @@ "required": false }, { - "uid": "dropdownIcon", - "name": "dropdownIcon", + "uid": "showDropdownIcon", + "name": "showDropdownIcon", "comment": { "raw": [ - "Icon for drop-down toggler" + "Pass true to enable dropdown icon." ] }, "typeValue": { - "raw": "Icon" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, "from": "@epam/uui-components:IconButtonProps", "required": false @@ -65723,6 +65726,23 @@ "from": "@epam/uui-core:IHasRawProps", "required": false }, + { + "uid": "isOpen", + "name": "isOpen", + "comment": { + "raw": [ + "When isDropdown=true, indicate that dropdown is open with chevron icon" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownToggler", + "required": false + }, { "uid": "onClick", "name": "onClick", @@ -65838,45 +65858,28 @@ "required": false }, { - "uid": "isOpen", - "name": "isOpen", - "comment": { - "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:IDropdownToggler", - "required": false - }, - { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "icon", + "name": "icon", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Icon can be a React element (usually an SVG element)" ] }, "typeValue": { - "raw": "boolean" + "raw": "Icon" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:IDropdownToggler", + "from": "@epam/uui-components:IconButtonProps", "required": false }, { - "uid": "icon", - "name": "icon", + "uid": "dropdownIcon", + "name": "dropdownIcon", "comment": { "raw": [ - "Icon can be a React element (usually an SVG element)" + "Icon for drop-down toggler" ] }, "typeValue": { @@ -65889,18 +65892,18 @@ "required": false }, { - "uid": "dropdownIcon", - "name": "dropdownIcon", + "uid": "showDropdownIcon", + "name": "showDropdownIcon", "comment": { "raw": [ - "Icon for drop-down toggler" + "Pass true to enable dropdown icon." ] }, "typeValue": { - "raw": "Icon" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, "from": "@epam/uui-components:IconButtonProps", "required": false @@ -88343,6 +88346,23 @@ "from": "@epam/uui-core:IHasRawProps", "required": false }, + { + "uid": "isOpen", + "name": "isOpen", + "comment": { + "raw": [ + "When isDropdown=true, indicate that dropdown is open with chevron icon" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownToggler", + "required": false + }, { "uid": "clickAnalyticsEvent", "name": "clickAnalyticsEvent", @@ -88444,45 +88464,28 @@ "required": false }, { - "uid": "isOpen", - "name": "isOpen", - "comment": { - "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:IDropdownToggler", - "required": false - }, - { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "icon", + "name": "icon", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Icon can be a React element (usually an SVG element)" ] }, "typeValue": { - "raw": "boolean" + "raw": "Icon" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:IDropdownToggler", + "from": "@epam/uui-components:IconButtonProps", "required": false }, { - "uid": "icon", - "name": "icon", + "uid": "dropdownIcon", + "name": "dropdownIcon", "comment": { "raw": [ - "Icon can be a React element (usually an SVG element)" + "Icon for drop-down toggler" ] }, "typeValue": { @@ -88495,20 +88498,20 @@ "required": false }, { - "uid": "dropdownIcon", - "name": "dropdownIcon", + "uid": "showDropdownIcon", + "name": "showDropdownIcon", "comment": { "raw": [ - "Icon for drop-down toggler" + "Pass true to enable dropdown icon." ] }, "typeValue": { - "raw": "Icon" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, - "from": "@epam/uui:IconButtonCoreProps", + "from": "@epam/uui-components:IconButtonProps", "required": false }, { @@ -88531,7 +88534,7 @@ "36" ] }, - "from": "@epam/uui-components:IconButtonProps", + "from": "@epam/uui:IconButtonCoreProps", "required": false }, { @@ -95601,6 +95604,23 @@ "from": "@epam/uui-core:IHasTabIndex", "required": false }, + { + "uid": "isOpen", + "name": "isOpen", + "comment": { + "raw": [ + "When isDropdown=true, indicate that dropdown is open with chevron icon" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownToggler", + "required": false + }, { "uid": "onClick", "name": "onClick", @@ -95747,45 +95767,28 @@ "required": false }, { - "uid": "isOpen", - "name": "isOpen", - "comment": { - "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:IDropdownToggler", - "required": false - }, - { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "icon", + "name": "icon", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Icon can be a React element (usually an SVG element)" ] }, "typeValue": { - "raw": "boolean" + "raw": "Icon" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:IDropdownToggler", + "from": "@epam/uui-components:IconButtonProps", "required": false }, { - "uid": "icon", - "name": "icon", + "uid": "dropdownIcon", + "name": "dropdownIcon", "comment": { "raw": [ - "Icon can be a React element (usually an SVG element)" + "Icon for drop-down toggler" ] }, "typeValue": { @@ -95798,20 +95801,20 @@ "required": false }, { - "uid": "dropdownIcon", - "name": "dropdownIcon", + "uid": "showDropdownIcon", + "name": "showDropdownIcon", "comment": { "raw": [ - "Icon for drop-down toggler" + "Pass true to enable dropdown icon." ] }, "typeValue": { - "raw": "Icon" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, - "from": "@epam/uui:IconButtonCoreProps", + "from": "@epam/uui-components:IconButtonProps", "required": false }, { @@ -95834,7 +95837,7 @@ "36" ] }, - "from": "@epam/uui-components:IconButtonProps", + "from": "@epam/uui:IconButtonCoreProps", "required": false }, { diff --git a/uui-components/src/buttons/IconButton.tsx b/uui-components/src/buttons/IconButton.tsx index 1eb639825b..f309ab1ef8 100644 --- a/uui-components/src/buttons/IconButton.tsx +++ b/uui-components/src/buttons/IconButton.tsx @@ -4,7 +4,7 @@ import { Clickable, ClickableComponentProps } from '../widgets'; import { IconContainer } from '../layout'; import css from './IconButton.module.scss'; -export type IconButtonProps = ClickableComponentProps & IDropdownToggler & { +export type IconButtonProps = ClickableComponentProps & Omit & { /** Icon can be a React element (usually an SVG element) */ icon?: Icon; /** Icon for drop-down toggler */ @@ -13,6 +13,10 @@ export type IconButtonProps = ClickableComponentProps & IDropdownToggler & { * Defines component size. */ size?: number; + /** + * Pass true to enable dropdown icon. + */ + showDropdownIcon?: boolean; }; export const IconButton = React.forwardRef((props, ref) => { @@ -25,7 +29,7 @@ export const IconButton = React.forwardRef - { props.isDropdown && ( + { props.showDropdownIcon && ( ) } diff --git a/uui/components/filters/PresetPanel/PresetActionsDropdown.tsx b/uui/components/filters/PresetPanel/PresetActionsDropdown.tsx index f12cdac91d..ae4bcfeb63 100644 --- a/uui/components/filters/PresetPanel/PresetActionsDropdown.tsx +++ b/uui/components/filters/PresetPanel/PresetActionsDropdown.tsx @@ -126,7 +126,6 @@ export function PresetActionsDropdown(props: ITubButtonDropdownProps) { color={ props.preset.id === props.activePresetId ? 'info' : 'neutral' } { ...dropdownProps } icon={ MenuIcon } - isDropdown={ false } size="18" /> );