feat!: rename onClose to onCloseClick

gravity-ui · Jan 31, 2024 · ead9761 · ead9761
1 parent c7a8f6f
commit ead9761
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 32 deletions.
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -38,7 +38,7 @@ interface LabelOwnProps extends QAProps {
     /** Disabled state */
     disabled?: boolean;
     /** Handler for click on close button */
-    onClose?(event: React.MouseEvent<HTMLButtonElement>): void;
+    onCloseClick?(event: React.MouseEvent<HTMLButtonElement>): void;
     /** Text to copy */
     copyText?: string;
     /** `aria-label` of close button */
@@ -77,7 +77,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         size = 'xs',
         icon,
         children,
-        onClose,
+        onCloseClick,
         className,
         disabled,
         copyText,
@@ -123,8 +123,8 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
             event.stopPropagation();
         }
 
-        if (onClose) {
-            onClose(event);
+        if (onCloseClick) {
+            onCloseClick(event);
         }
     };
 
@@ -160,7 +160,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
             actionButton = (
                 <Button
                     ref={actionButtonRef}
-                    onClick={onClose ? handleCloseClick : undefined}
+                    onClick={onCloseClick ? handleCloseClick : undefined}
                     size={buttonSize}
                     extraProps={{'aria-label': closeButtonLabel || undefined}}
                     {...commonActionButtonProps}

diff --git a/src/components/Label/README.md b/src/components/Label/README.md
@@ -75,12 +75,12 @@ Adds various options to the `Label` using the `type` property.
 <ExampleBlock
     code={`
 <Label type="default" onClick={() => alert('On click label')} size="s">Clickable</Label>
-<Label type="close" onClose={() => alert('On click close')} size="s">Closable</Label>
+<Label type="close" onCloseClick={() => alert('On click close')} size="s">Closable</Label>
 <Label type="copy" copyText="Copy" onCopy={() => alert('On copy')} size="s">Copy</Label>
 `}
 >
     <UIKit.Label type="default" onClick={() => alert('On click label')} size="s">Clickable</UIKit.Label>
-    <UIKit.Label type="close" onClose={() => alert('On click close')} size="s">Closable</UIKit.Label>
+    <UIKit.Label type="close" onCloseClick={() => alert('On click close')} size="s">Closable</UIKit.Label>
     <UIKit.Label type="copy" copyText="Copy" onCopy={() => alert('On copy')} size="s">Copy</UIKit.Label>
 </ExampleBlock>
 LANDING_BLOCK-->
@@ -89,7 +89,7 @@ LANDING_BLOCK-->
 
 ```tsx
 <Label type="default" onClick={() => alert('On click label')} size="s">Clickable</Label>
-<Label type="close" onClose={() => alert('On click close')} size="s">Closable</Label>
+<Label type="close" onCloseClick={() => alert('On click close')} size="s">Closable</Label>
 <Label type="copy" copyText="Copy" onCopy={() => alert('On copy')} size="s">Copy</Label>
 ```
 
@@ -262,7 +262,7 @@ LANDING_BLOCK-->
 | icon             | Label icon (on the left)                      |       `React.ReactNode`        |             |
 | interactive      | Enable hover effect                           |           `boolean`            |             |
 | onClick          | `click` event handler                         |           `Function`           |             |
-| onClose          | Close button `click` event handler            |           `Function`           |             |
+| onCloseClick     | Close button `click` event handler            |           `Function`           |             |
 | onCopy           | `copy` event handler                          |           `Function`           |             |
 | size             | Label size                                    |       `"xs"` `"s"` `"m"`       |    `"s"`    |
 | theme            | Label theme                                   |            `string`            | `"normal"`  |

diff --git a/src/components/UserLabel/README.md b/src/components/UserLabel/README.md
@@ -67,33 +67,33 @@ This component is also interactive. It can be clickable or closable.
 <ExampleBlock
     code={`
 <UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} />
-<UserLabel text="Charles Darwin" onClose={() => alert('onClose triggered')} />
+<UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} />
 `}
 >
     <UIKit.UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} />
-    <UIKit.UserLabel text="Charles Darwin" onClose={() => alert('onClose triggered')} />
+    <UIKit.UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} />
 </ExampleBlock>
 LANDING_BLOCK-->
 
 <!--GITHUB_BLOCK-->
 
 ```tsx
 <UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} />
-<UserLabel text="Charles Darwin" onClose={() => alert('onClose triggered')} />
+<UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} />
 ```
 
 <!--/GITHUB_BLOCK-->
 
 ## Properties
 
-| Name      | Description                                 |                                    Type                                     |   Default    |
-| :-------- | :------------------------------------------ | :-------------------------------------------------------------------------: | :----------: |
-| type      | Avatar appearance                           |                       `'person'` `'email'` `'empty'`                        |  `'person'`  |
-| avatar    | User avatar                                 | [AvatarProps](../Avatar/README.md#properties) `string` `React.ReactElement` |              |
-| text      | Visible text                                |                                  `string`                                   |              |
-| view      | UserLabel view                              |                           `'outlined'` `'clear'`                            | `'outlined'` |
-| onClick   | `click` event handler for component itself  |                                 `Function`                                  |              |
-| onClose   | `click` event handler for button with cross |                                 `Function`                                  |              |
-| className | Custom CSS class for root element           |                                  `string`                                   |              |
-| style     | HTML style attribute                        |                            `React.CSSProperties`                            |              |
-| qa        | HTML `data-qa` attribute, used in tests     |                                  `string`                                   |              |
+| Name         | Description                                 |                                    Type                                     |   Default    |
+| :----------- | :------------------------------------------ | :-------------------------------------------------------------------------: | :----------: |
+| type         | Avatar appearance                           |                       `'person'` `'email'` `'empty'`                        |  `'person'`  |
+| avatar       | User avatar                                 | [AvatarProps](../Avatar/README.md#properties) `string` `React.ReactElement` |              |
+| text         | Visible text                                |                                  `string`                                   |              |
+| view         | UserLabel view                              |                           `'outlined'` `'clear'`                            | `'outlined'` |
+| onClick      | `click` event handler for component itself  |                                 `Function`                                  |              |
+| onCloseClick | `click` event handler for button with cross |                                 `Function`                                  |              |
+| className    | Custom CSS class for root element           |                                  `string`                                   |              |
+| style        | HTML style attribute                        |                            `React.CSSProperties`                            |              |
+| qa           | HTML `data-qa` attribute, used in tests     |                                  `string`                                   |              |
diff --git a/src/components/UserLabel/UserLabel.tsx b/src/components/UserLabel/UserLabel.tsx
@@ -26,15 +26,15 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>(
             children,
             view = 'outlined',
             onClick,
-            onClose,
+            onCloseClick,
             className,
             style,
             qa,
         },
         ref,
     ) => {
         const clickable = Boolean(onClick);
-        const closeable = Boolean(onClose);
+        const closeable = Boolean(onCloseClick);
         const MainComponent = clickable ? 'button' : 'div';
 
         let avatarView: React.ReactNode = null;
@@ -83,12 +83,12 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>(
                     {avatarView ? <div className={b('avatar')}>{avatarView}</div> : null}
                     <div className={b('text')}>{children}</div>
                 </MainComponent>
-                {onClose ? (
+                {onCloseClick ? (
                     <button
                         className={b('close')}
                         type="button"
                         aria-label={i18n('label_remove-button')}
-                        onClick={onClose}
+                        onClick={onCloseClick}
                     >
                         <Icon className={b('close-icon')} data={Xmark} size={12} />
                     </button>

diff --git a/src/components/UserLabel/__stories__/UserLabel.stories.tsx b/src/components/UserLabel/__stories__/UserLabel.stories.tsx
@@ -61,6 +61,6 @@ export const Clickable: Story = {
 export const Closable: Story = {
     args: {
         children: person,
-        onClose: (value) => console.log('closed', value),
+        onCloseClick: (value) => console.log('closed', value),
     },
 };
diff --git a/src/components/UserLabel/__tests__/UserLabel.test.tsx b/src/components/UserLabel/__tests__/UserLabel.test.tsx
@@ -27,8 +27,10 @@ describe('UserLabel', () => {
         test.each<string>([MOCKED_TEXT])(
             'should return text value as onClose argument',
             async (text) => {
-                const onClose = jest.fn();
-                const {container} = render(<UserLabel onClose={onClose}>{text}</UserLabel>);
+                const onCloseClick = jest.fn();
+                const {container} = render(
+                    <UserLabel onCloseClick={onCloseClick}>{text}</UserLabel>,
+                );
                 const user = userEvent.setup();
                 const ariaLabelValue = i18n('label_remove-button');
                 const closeButtonNode = queryByAttribute('aria-label', container, ariaLabelValue);
@@ -38,7 +40,7 @@ describe('UserLabel', () => {
                 }
 
                 await user.click(closeButtonNode);
-                expect(onClose).toHaveBeenCalled();
+                expect(onCloseClick).toHaveBeenCalled();
             },
         );
         test('should render text as string', () => {

diff --git a/src/components/UserLabel/types.ts b/src/components/UserLabel/types.ts
@@ -16,5 +16,5 @@ export interface UserLabelProps extends DOMProps, QAProps {
     children: React.ReactNode;
     view?: UserLabelView;
     onClick?: React.MouseEventHandler<HTMLElement>;
-    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    onCloseClick?: React.MouseEventHandler<HTMLButtonElement>;
 }