From 70f6533789ef699ec0d4f6aa417af1483dcfc023 Mon Sep 17 00:00:00 2001 From: AlekseyManetov Date: Wed, 20 Mar 2024 17:03:33 +0100 Subject: [PATCH] [IconButton]: fix size typing for skins --- public/docs/docsGenOutput/docsGenOutput.json | 339 +++++++++++-------- uui-core/src/helpers/createSkinComponent.ts | 2 +- uui/components/buttons/IconButton.tsx | 21 +- 3 files changed, 212 insertions(+), 150 deletions(-) diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json index 2775b24448..085d5d27d7 100644 --- a/public/docs/docsGenOutput/docsGenOutput.json +++ b/public/docs/docsGenOutput/docsGenOutput.json @@ -34156,10 +34156,16 @@ "raw": "HeaderCellContentProps", "print": [ "interface HeaderCellContentProps extends DndActorRenderParams {", + " /** Called when resizing is started */", " onResizeStart: (e: React.MouseEvent) => void;", - " onResizeEnd: (e: React.MouseEvent) => void;", + " /** Called when resizing is ended */", + " onResizeEnd: (e: MouseEvent) => void;", + " /** Called during the resizing process */", " onResize: (e: MouseEvent) => void;", + " /** Called when sorting */", " toggleSort: (e: React.MouseEvent) => void;", + " /** Indicates that resizing process is active */", + " isResizing: boolean;", "}" ] }, @@ -34167,6 +34173,11 @@ { "uid": "onResizeStart", "name": "onResizeStart", + "comment": { + "raw": [ + "Called when resizing is started" + ] + }, "typeValue": { "raw": "(e: React.MouseEvent) => void" }, @@ -34178,8 +34189,13 @@ { "uid": "onResizeEnd", "name": "onResizeEnd", + "comment": { + "raw": [ + "Called when resizing is ended" + ] + }, "typeValue": { - "raw": "(e: React.MouseEvent) => void" + "raw": "(e: MouseEvent) => void" }, "editor": { "type": "func" @@ -34189,6 +34205,11 @@ { "uid": "onResize", "name": "onResize", + "comment": { + "raw": [ + "Called during the resizing process" + ] + }, "typeValue": { "raw": "(e: MouseEvent) => void" }, @@ -34200,6 +34221,11 @@ { "uid": "toggleSort", "name": "toggleSort", + "comment": { + "raw": [ + "Called when sorting" + ] + }, "typeValue": { "raw": "(e: React.MouseEvent) => void" }, @@ -34208,6 +34234,22 @@ }, "required": true }, + { + "uid": "isResizing", + "name": "isResizing", + "comment": { + "raw": [ + "Indicates that resizing process is active" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, { "uid": "isDraggable", "name": "isDraggable", @@ -65340,77 +65382,96 @@ "details": { "kind": 265, "typeValue": { - "raw": "IconButtonProps", + "raw": "IconButtonCoreProps", "print": [ "/** Represents the Core properties of the IconButton component. */", - "type IconButtonCoreProps = uuiComponents.IconButtonProps;" + "type IconButtonCoreProps = Omit & {", + " /**", + " * Defines component size.", + " */", + " size?: '18' | '24' | '30' | '36';", + "};" ] }, "props": [ { - "uid": "onClick", - "name": "onClick", + "uid": "tabIndex", + "name": "tabIndex", "comment": { "raw": [ - "Called when component is clicked" + "Controls the order of keyboard navigation between components" ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IClickable", + "from": "@epam/uui-core:IHasTabIndex", "required": false }, { - "uid": "clickAnalyticsEvent", - "name": "clickAnalyticsEvent", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "An analytics event to send (via AnalyticsContext) when component is clicked.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "null | { [key: string]: any; name: string; }" + "raw": "boolean" }, - "from": "@epam/uui-core:IAnalyticableClick", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "tabIndex", - "name": "tabIndex", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Controls the order of keyboard navigation between components" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "React.AnchorHTMLAttributes & Record<`data-${string}`, string> | React.ButtonHTMLAttributes & Record<`data-${string}`, string> | React.HTMLAttributes & Record<`data-${string}`, string>" }, - "from": "@epam/uui-core:IHasTabIndex", + "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Called when component is clicked" ] }, "typeValue": { - "raw": "boolean" + "raw": "(e?: any) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:IClickable", + "required": false + }, + { + "uid": "clickAnalyticsEvent", + "name": "clickAnalyticsEvent", + "comment": { + "raw": [ + "An analytics event to send (via AnalyticsContext) when component is clicked.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + ] + }, + "typeValue": { + "raw": "null | { [key: string]: any; name: string; }" + }, + "from": "@epam/uui-core:IAnalyticableClick", "required": false }, { @@ -65424,7 +65485,6 @@ "typeValue": { "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "typeValueRef": "@epam/uui-core:ClassValue", "from": "@epam/uui-core:IHasCX", "required": false }, @@ -65496,20 +65556,6 @@ "from": "@epam/uui-core:ICanRedirect", "required": false }, - { - "uid": "rawProps", - "name": "rawProps", - "comment": { - "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" - ] - }, - "typeValue": { - "raw": "React.AnchorHTMLAttributes & Record<`data-${string}`, string> | React.ButtonHTMLAttributes & Record<`data-${string}`, string> | React.HTMLAttributes & Record<`data-${string}`, string>" - }, - "from": "@epam/uui-core:IHasRawProps", - "required": false - }, { "uid": "isOpen", "name": "isOpen", @@ -65587,12 +65633,17 @@ ] }, "typeValue": { - "raw": "number" + "raw": "'18' | '36' | '24' | '30'" }, "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "18", + "24", + "30", + "36" + ] }, - "from": "@epam/uui-components:IconButtonProps", "required": false } ], @@ -65620,7 +65671,7 @@ "raw": "IconButtonProps", "print": [ "/** Represents the properties of the IconButton component. */", - "type IconButtonProps = Omit & IconButtonMods;" + "type IconButtonProps = IconButtonCoreProps & IconButtonMods;" ] }, "props": [ @@ -65854,6 +65905,29 @@ "from": "@epam/uui-components:IconButtonProps", "required": false }, + { + "uid": "size", + "name": "size", + "comment": { + "raw": [ + "Defines component size." + ] + }, + "typeValue": { + "raw": "'18' | '36' | '24' | '30'" + }, + "editor": { + "type": "oneOf", + "options": [ + "18", + "24", + "30", + "36" + ] + }, + "from": "@epam/uui:IconButtonCoreProps", + "required": false + }, { "uid": "color", "name": "color", @@ -65882,29 +65956,6 @@ }, "from": "@epam/uui:IconButtonMods", "required": false - }, - { - "uid": "size", - "name": "size", - "comment": { - "raw": [ - "Defines component size." - ] - }, - "typeValue": { - "raw": "'18' | '36' | '24' | '30'" - }, - "editor": { - "type": "oneOf", - "options": [ - "18", - "24", - "30", - "36" - ] - }, - "from": "@epam/uui:IconButtonMods", - "required": false } ], "propsFromUnion": false @@ -88230,6 +88281,37 @@ ] }, "props": [ + { + "uid": "tabIndex", + "name": "tabIndex", + "comment": { + "raw": [ + "Controls the order of keyboard navigation between components" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:IHasTabIndex", + "required": false + }, + { + "uid": "cx", + "name": "cx", + "comment": { + "raw": [ + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + ] + }, + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + }, + "from": "@epam/uui-core:IHasCX", + "required": false + }, { "uid": "onClick", "name": "onClick", @@ -88248,35 +88330,32 @@ "required": false }, { - "uid": "clickAnalyticsEvent", - "name": "clickAnalyticsEvent", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "An analytics event to send (via AnalyticsContext) when component is clicked.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "null | { [key: string]: any; name: string; }" + "raw": "React.AnchorHTMLAttributes & Record<`data-${string}`, string> | React.ButtonHTMLAttributes & Record<`data-${string}`, string> | React.HTMLAttributes & Record<`data-${string}`, string>" }, - "from": "@epam/uui-core:IAnalyticableClick", + "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "tabIndex", - "name": "tabIndex", + "uid": "clickAnalyticsEvent", + "name": "clickAnalyticsEvent", "comment": { "raw": [ - "Controls the order of keyboard navigation between components" + "An analytics event to send (via AnalyticsContext) when component is clicked.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "null | { [key: string]: any; name: string; }" }, - "from": "@epam/uui-core:IHasTabIndex", + "from": "@epam/uui-core:IAnalyticableClick", "required": false }, { @@ -88296,21 +88375,6 @@ "from": "@epam/uui-core:IDisableable", "required": false }, - { - "uid": "cx", - "name": "cx", - "comment": { - "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" - ] - }, - "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" - }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false - }, { "uid": "link", "name": "link", @@ -88379,20 +88443,6 @@ "from": "@epam/uui-core:ICanRedirect", "required": false }, - { - "uid": "rawProps", - "name": "rawProps", - "comment": { - "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" - ] - }, - "typeValue": { - "raw": "React.AnchorHTMLAttributes & Record<`data-${string}`, string> | React.ButtonHTMLAttributes & Record<`data-${string}`, string> | React.HTMLAttributes & Record<`data-${string}`, string>" - }, - "from": "@epam/uui-core:IHasRawProps", - "required": false - }, { "uid": "isOpen", "name": "isOpen", @@ -88458,7 +88508,7 @@ "editor": { "type": "component" }, - "from": "@epam/uui-components:IconButtonProps", + "from": "@epam/uui:IconButtonCoreProps", "required": false }, { @@ -88470,10 +88520,16 @@ ] }, "typeValue": { - "raw": "number" + "raw": "'36' | '18' | '24' | '30'" }, "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "18", + "24", + "30", + "36" + ] }, "from": "@epam/uui-components:IconButtonProps", "required": false @@ -95528,6 +95584,23 @@ ] }, "props": [ + { + "uid": "tabIndex", + "name": "tabIndex", + "comment": { + "raw": [ + "Controls the order of keyboard navigation between components" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:IHasTabIndex", + "required": false + }, { "uid": "onClick", "name": "onClick", @@ -95560,23 +95633,6 @@ "from": "@epam/uui-core:IAnalyticableClick", "required": false }, - { - "uid": "tabIndex", - "name": "tabIndex", - "comment": { - "raw": [ - "Controls the order of keyboard navigation between components" - ] - }, - "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" - }, - "from": "@epam/uui-core:IHasTabIndex", - "required": false - }, { "uid": "isDisabled", "name": "isDisabled", @@ -95605,7 +95661,6 @@ "typeValue": { "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "typeValueRef": "@epam/uui-core:ClassValue", "from": "@epam/uui-core:IHasCX", "required": false }, @@ -95756,7 +95811,7 @@ "editor": { "type": "component" }, - "from": "@epam/uui-components:IconButtonProps", + "from": "@epam/uui:IconButtonCoreProps", "required": false }, { @@ -95768,10 +95823,16 @@ ] }, "typeValue": { - "raw": "number" + "raw": "'36' | '18' | '24' | '30'" }, "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "18", + "24", + "30", + "36" + ] }, "from": "@epam/uui-components:IconButtonProps", "required": false diff --git a/uui-core/src/helpers/createSkinComponent.ts b/uui-core/src/helpers/createSkinComponent.ts index 47a6c9e000..c0198f4146 100644 --- a/uui-core/src/helpers/createSkinComponent.ts +++ b/uui-core/src/helpers/createSkinComponent.ts @@ -3,7 +3,7 @@ import { CX } from '../types'; export function createSkinComponent( Component: React.ComponentType, - getProps?: (props: Readonly) => Partial, + getProps?: (props: Readonly) => Partial, getCx?: (props: Readonly) => CX, ) : (props: SkinProps & React.RefAttributes) => React.ReactElement | null { if (!getProps && !getCx) { diff --git a/uui/components/buttons/IconButton.tsx b/uui/components/buttons/IconButton.tsx index 2d127722d8..4621593284 100644 --- a/uui/components/buttons/IconButton.tsx +++ b/uui/components/buttons/IconButton.tsx @@ -1,5 +1,5 @@ import * as uuiComponents from '@epam/uui-components'; -import { withMods } from '@epam/uui-core'; +import { createSkinComponent } from '@epam/uui-core'; import css from './IconButton.module.scss'; import { systemIcons } from '../../icons/icons'; @@ -9,29 +9,30 @@ interface IconButtonMods { * @default 'neutral' */ color?: 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'neutral'; +} + +/** Represents the Core properties of the IconButton component. */ +export type IconButtonCoreProps = Omit & { /** * Defines component size. */ size?: '18' | '24' | '30' | '36'; -} - -/** Represents the Core properties of the IconButton component. */ -export type IconButtonCoreProps = uuiComponents.IconButtonProps; +}; /** Represents the properties of the IconButton component. */ -export type IconButtonProps = Omit & IconButtonMods; +export type IconButtonProps = IconButtonCoreProps & IconButtonMods; -function applyIconButtonMods(mods: IconButtonProps & IconButtonMods) { - return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css.root]; +function applyIconButtonMods(props: IconButtonProps) { + return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css.root]; } -export const IconButton = withMods, IconButtonMods>( +export const IconButton = createSkinComponent( uuiComponents.IconButton, - applyIconButtonMods, (props) => { return { dropdownIcon: props.dropdownIcon || systemIcons.foldingArrow, size: props.size && Number(props.size), }; }, + applyIconButtonMods, );