Merge branch 'main' into chervyakovru-patch-1

CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [4.11.1](https://github.com/gravity-ui/uikit/compare/v4.11.0...v4.11.1) (2023-05-12)
+
+
+### Bug Fixes
+
+* **Select:** align items by baseline for label and values ([#661](https://github.com/gravity-ui/uikit/issues/661)) ([b25734f](https://github.com/gravity-ui/uikit/commit/b25734f94a0837f2c5857f3609e45e317fbcb99b))
+
+## [4.11.0](https://github.com/gravity-ui/uikit/compare/v4.10.0...v4.11.0) (2023-05-11)
+
+
+### Features
+
+* **TextInput:** add rightContent props ([#649](https://github.com/gravity-ui/uikit/issues/649)) ([fd29127](https://github.com/gravity-ui/uikit/commit/fd29127d30df8659da3785fc1417cae778846842))
+* **UserAvatar:** add `srcset` support ([#641](https://github.com/gravity-ui/uikit/issues/641)) ([fe05925](https://github.com/gravity-ui/uikit/commit/fe05925d6b47ff9cc0d4786c5cb435089e3a7987))
+
+
+### Bug Fixes
+
+* **Tooltip:** increase selector specificity ([#660](https://github.com/gravity-ui/uikit/issues/660)) ([1f53d8d](https://github.com/gravity-ui/uikit/commit/1f53d8dbd75b01c3c621d4696e4d0317d06b3a82))
+
+## [4.10.0](https://github.com/gravity-ui/uikit/compare/v4.9.0...v4.10.0) (2023-04-26)
+
+
+### Features
+
+* **Popover:** let action and cancel buttons to wrap on long text ([#631](https://github.com/gravity-ui/uikit/issues/631)) ([f22f9b5](https://github.com/gravity-ui/uikit/commit/f22f9b5ed2b864fbccb19118b142b6e03285296a))
+
+## [4.9.0](https://github.com/gravity-ui/uikit/compare/v4.8.1...v4.9.0) (2023-04-20)
+
+
+### Features
+
+* **Select:** remove pointer cursor for disabled option ([#638](https://github.com/gravity-ui/uikit/issues/638)) ([d1dd601](https://github.com/gravity-ui/uikit/commit/d1dd60117b03c5c3c6c55ca38f9cee6a6c44e7fc))
+* **Text:** add reference ([#628](https://github.com/gravity-ui/uikit/issues/628)) ([922b390](https://github.com/gravity-ui/uikit/commit/922b390d92747d55b9ca2521f4de78a5754ca263))
+
+
+### Bug Fixes
+
+* **Card:** update border-radius ([#639](https://github.com/gravity-ui/uikit/issues/639)) ([a05df9e](https://github.com/gravity-ui/uikit/commit/a05df9e1c8ddc4f697634296b10aac9aa264b204))
+
 ## [4.8.1](https://github.com/gravity-ui/uikit/compare/v4.8.0...v4.8.1) (2023-04-17)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "4.8.1",
+    "version": "4.11.1",
     "description": "Gravity UI base styling and components",
     "license": "MIT",
     "repository": {
@@ -87,7 +87,7 @@
         "react-virtualized-auto-sizer": "1.0.7",
         "react-window": "1.8.8",
         "resize-observer-polyfill": "1.5.1",
-        "tabbable": "6.0.1",
+        "tabbable": "6.1.1",
         "tslib": "2.3.1",
         "utility-types": "3.10.0"
     },

src/components/Button/Button.scss

@@ -85,6 +85,30 @@ $block: '.#{variables.$ns}button';
     }
 
     &_size {
+        &_xs {
+            --yc-button-height: 20px;
+
+            font-size: 13px;
+
+            #{$block}__text {
+                margin: 0 6px;
+            }
+
+            #{$block}__icon {
+                width: var(--yc-button-height);
+
+                &_side_left ~ #{$block}__text {
+                    margin-left: 18px;
+                }
+
+                &_side_right ~ #{$block}__text {
+                    margin-right: 18px;
+                }
+            }
+
+            --yc-button-border-radius: var(--yc-border-radius-xs);
+        }
+
         &_s {
             --yc-button-height: 24px;
 

src/components/Button/Button.tsx

@@ -23,7 +23,7 @@ export type ButtonView =
     | 'outlined-contrast' // outlined button appearance with contrast background
     | 'flat-contrast'; // flat button appearance with contrast background
 
-export type ButtonSize = 's' | 'm' | 'l' | 'xl';
+export type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 
 export type ButtonPin =
     | 'round-round'

src/components/Button/README.md

@@ -82,7 +82,7 @@ type ButtonView =
   | 'outlined-contrast'
   | 'flat-contrast';
 
-type ButtonSize = 's' | 'm' | 'l' | 'xl';
+type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 
 type ButtonPin =
   | 'round-round'

src/components/Button/__stories__/Button.new.stories.tsx

@@ -29,7 +29,7 @@ export default {
             defaultValue: 'normal',
         },
         size: {
-            options: ['s', 'm', 'l', 'xl'],
+            options: ['xs', 's', 'm', 'l', 'xl'],
             control: {type: 'radio'},
             defaultValue: 'm',
         },

src/components/Button/__stories__/Button.stories.tsx

@@ -15,6 +15,10 @@ export const Default = DefaultTemplate.bind({});
 
 const SizeTemplate: Story<ButtonProps> = (args) => (
     <>
+        <Button {...args} size="xs">
+            Size xs
+        </Button>
+        <span style={{margin: '16px'}} />
         <Button {...args} size="s">
             Size s
         </Button>

src/components/Button/__stories__/ButtonShowcase.tsx

@@ -16,6 +16,8 @@ export function ButtonShowcase() {
             {renderViewGrid()}
             <ShowcaseItem title="size">
                 <p>
+                    <Button size="xs">Size xs</Button>
+                    <span style={{margin: '8px'}} />
                     <Button size="s">Size s</Button>
                     <span style={{margin: '8px'}} />
                     <Button size="m">Size m</Button>

src/components/Button/__stories__/examples/ButtonExampleView/ButtonExampleView.tsx

@@ -238,6 +238,7 @@ export function ButtonExampleState() {
 export function ButtonExampleSize() {
     return (
         <DocsExample gap="l" space="l">
+            <Button size="xs">XS-size</Button>
             <Button size="s">S-size</Button>
             <Button size="m">M-size</Button>
             <Button size="l">L-size</Button>

src/components/Button/__tests__/Button.test.tsx

@@ -48,12 +48,15 @@ describe('Button', () => {
         expect(button).not.toBeDisabled();
     });
 
-    test.each(new Array<ButtonSize>('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
-        render(<Button size={size} qa={qaId} />);
-        const button = screen.getByTestId(qaId);
+    test.each(new Array<ButtonSize>('xs', 's', 'm', 'l', 'xl'))(
+        'render with given "%s" size',
+        (size) => {
+            render(<Button size={size} qa={qaId} />);
+            const button = screen.getByTestId(qaId);
 
-        expect(button).toHaveClass(`yc-button_size_${size}`);
-    });
+            expect(button).toHaveClass(`yc-button_size_${size}`);
+        },
+    );
 
     test.each(new Array<ButtonView>(...buttonViews))('render with given "%s" view', (view) => {
         render(<Button view={view} qa={qaId} />);

src/components/Popover/Popover.scss

@@ -20,6 +20,8 @@ $block: '.#{variables.$ns}popover';
         --yc-popover-close-margin: 8px;
         --yc-popover-close-size: 24px;
 
+        $buttonGap: 5px;
+
         box-sizing: border-box;
         min-height: 40px;
         max-width: var(--yc-popover-max-width);
@@ -35,17 +37,20 @@ $block: '.#{variables.$ns}popover';
         }
 
         &-buttons {
+            align-self: center;
             display: inline-flex;
+            flex-wrap: wrap;
             width: 100%;
-            margin-top: 20px;
-            $buttonClass: #{$class}__tooltip-button;
+            // giving additional -5 margin
+            // this is taking into account the margins of buttons
+            // to imitate the `gap` property for flexbox
+            margin: (20px - $buttonGap) (-$buttonGap) (-$buttonGap);
 
-            #{$buttonClass}:not(:first-child) {
-                margin-left: 10px;
-            }
+            $buttonClass: #{$class}__tooltip-button;
         }
 
         &-button {
+            margin: $buttonGap;
             flex: 1;
         }
 

src/components/Popover/__stories__/Popover.stories.tsx

@@ -155,6 +155,24 @@ FullFeatured.args = {
         'Tooltip\'s <b>html</b> content. Learn more <a href="https://example.com" target="_blank">here</a>',
 };
 
+export const WithLongActionItems = FullFeaturedTemplate.bind({});
+WithLongActionItems.args = {
+    autoclosable: false,
+    content: 'There are two actions',
+    tooltipActionButton: {
+        text: 'Action with moderately long text',
+        onClick: () => alert('Action button was clicked'),
+    },
+    tooltipCancelButton: {
+        text: 'Cancel with moderately long text',
+        onClick: () => alert('Cancel button was clicked'),
+    },
+    className: 'demo-icon-tooltip',
+    openOnHover: false,
+    behavior: PopoverBehavior.Delayed,
+    theme: 'info',
+};
+
 const WithCustomAnchorTemplate: Story = () => <WithCustomAnchorExample />;
 export const WithCustomAnchor = WithCustomAnchorTemplate.bind({});
 WithCustomAnchor.args = {

src/components/Select/components/SelectControl/SelectControl.scss

@@ -22,6 +22,7 @@ $buttonBlock: '.#{variables.$ns}button';
 
     & #{$buttonBlock}__text {
         display: flex;
+        align-items: baseline;
     }
 
     &__label {

src/components/Table/hoc/withTableActions/withTableActions.tsx

@@ -3,7 +3,7 @@ import _memoize from 'lodash/memoize';
 import {block} from '../../../utils/cn';
 import {getComponentName} from '../../../utils/getComponentName';
 import {Icon} from '../../../Icon';
-import {Button, ButtonSize} from '../../../Button';
+import {Button} from '../../../Button';
 import {Popup} from '../../../Popup';
 import {Menu, MenuItemProps} from '../../../Menu';
 import {DotsIcon} from '../../../icons/DotsIcon';
@@ -52,9 +52,14 @@ export interface TableActionGroup<I> {
 
 export type TableActionConfig<I> = TableAction<I> | TableActionGroup<I>;
 
+/**
+ * common sizes for Menu and Button
+ */
+export type TableRowActionsSize = 's' | 'm' | 'l' | 'xl';
+
 export interface WithTableActionsProps<I> {
     getRowActions: (item: I, index: number) => TableActionConfig<I>[];
-    rowActionsSize?: ButtonSize;
+    rowActionsSize?: TableRowActionsSize;
 }
 
 interface WithTableActionsState<I> {

src/components/TextInput/AdditionalContent/AdditionalContent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {block} from '../../utils/cn';
+
+const b = block('text-input');
+
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+};
+
+export const AdditionalContent = ({children, className}: Props) => {
+    if (!children) {
+        return null;
+    }
+
+    return <div className={b('additional-content', className)}>{children}</div>;
+};

src/components/TextInput/ClearAction/ClearAction.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Button} from '../../Button';
+import {Icon} from '../../Icon';
+import {CrossIcon} from '../../icons/CrossIcon';
+import {block} from '../../utils/cn';
+import type {TextInputSize} from '../types';
+import i18n from '../i18n';
+
+const b = block('text-input');
+const ICON_SIZE = 10;
+
+type ClearActionProps = {
+    size: TextInputSize;
+    className?: string;
+    onClick: (event: React.MouseEvent<HTMLSpanElement>) => void;
+};
+
+export const ClearAction = (props: ClearActionProps) => {
+    const {size, className, onClick} = props;
+
+    // remove using of Button component after https://github.com/gravity-ui/uikit/issues/645
+    return (
+        <Button
+            size={size}
+            className={b('clear', className)}
+            onClick={onClick}
+            extraProps={{'aria-label': i18n('label_clear-button')}}
+        >
+            <Icon data={CrossIcon} size={ICON_SIZE} />
+        </Button>
+    );
+};

src/components/TextInput/README.md

@@ -91,6 +91,10 @@ export interface TextInputProps extends DOMProps, QAProps {
    * Maximum number of rows in textarea when the hight is autogenerated.
    */
   maxRows?: number;
+  /**
+   * User`s node rendered after input and clear button
+   */
+  rightContent?: React.ReactNode;
   onUpdate?: (value: string) => void;
   onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;