Merge branch 'main' into feature/add-scroll-to-dialog-body

gravity-ui · Jan 15, 2024 · 0e2574a · 0e2574a
2 parents 65da380 + ffd3eac
commit 0e2574a
Show file tree

Hide file tree

Showing 31 changed files with 337 additions and 196 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,36 @@
 # Changelog
 
+## [5.27.0](https://github.com/gravity-ui/uikit/compare/v5.26.0...v5.27.0) (2024-01-10)
+
+
+### Features
+
+* **Disclosure:** allow use React.Node as summary ([#1233](https://github.com/gravity-ui/uikit/issues/1233)) ([3180060](https://github.com/gravity-ui/uikit/commit/31800603eaf6eaaab4c9849b1af12e9e6a53b5f7))
+
+
+### Bug Fixes
+
+* **Disclosure:** component size should not be used for its content ([#1234](https://github.com/gravity-ui/uikit/issues/1234)) ([c721640](https://github.com/gravity-ui/uikit/commit/c721640074baf0f5ae04ba4efaa2e187fa590e9c))
+* **Pagination:** fix total page calculation ([#1237](https://github.com/gravity-ui/uikit/issues/1237)) ([8f1af66](https://github.com/gravity-ui/uikit/commit/8f1af66dd7de4dc13c33cc58e4f73715802c02cb))
+* **Select:** activate first clickable item ([#1228](https://github.com/gravity-ui/uikit/issues/1228)) ([13b921e](https://github.com/gravity-ui/uikit/commit/13b921e8384108bf1ca71941e0a5908191cb325e))
+* **Select:** add 100% width to default labels ([#1239](https://github.com/gravity-ui/uikit/issues/1239)) ([5bd5edd](https://github.com/gravity-ui/uikit/commit/5bd5edd63c5755a52003967b4d3e822983f5033a))
+* **ThemeProvider:** fix rootClassName update ([#1231](https://github.com/gravity-ui/uikit/issues/1231)) ([4f0f099](https://github.com/gravity-ui/uikit/commit/4f0f09946023d039b8d1fed3c198d1888959f7a5))
+
+## [5.26.0](https://github.com/gravity-ui/uikit/compare/v5.25.0...v5.26.0) (2023-12-26)
+
+
+### Features
+
+* calculate body class names seperately ([#1197](https://github.com/gravity-ui/uikit/issues/1197)) ([3dcf03d](https://github.com/gravity-ui/uikit/commit/3dcf03d46b6834c3d0fd6f43a9208d234c730405))
+* **Popup:** add `aria-label` & `aria-labelledby` attributes ([#1202](https://github.com/gravity-ui/uikit/issues/1202)) ([f68183a](https://github.com/gravity-ui/uikit/commit/f68183ad27c025c736164b72ee38a908afb7dc67))
+
+
+### Bug Fixes
+
+* **Pagination:** fix wrong behaviour in case of 0 total ([#1208](https://github.com/gravity-ui/uikit/issues/1208)) ([cda2349](https://github.com/gravity-ui/uikit/commit/cda2349c699b5e11fe79aa79fdbb4f5b647277bc))
+* **Select:** fix wrong view "clear" styles ([#1224](https://github.com/gravity-ui/uikit/issues/1224)) ([4f4e13e](https://github.com/gravity-ui/uikit/commit/4f4e13ec7286dc1611755899b30429f1cf4b5b7f))
+* **Table:** columns change throws ([#1219](https://github.com/gravity-ui/uikit/issues/1219)) ([20756bc](https://github.com/gravity-ui/uikit/commit/20756bcd27d8577d399e39f7d86189d7cb3d4d14))
+
 ## [5.25.0](https://github.com/gravity-ui/uikit/compare/v5.24.0...v5.25.0) (2023-12-12)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "5.25.0",
+    "version": "5.27.0",
     "description": "Gravity UI base styling and components",
     "license": "MIT",
     "repository": {
@@ -76,8 +76,9 @@
         "playwright:install": "playwright install --with-deps",
         "playwright": "playwright test --config=playwright/playwright.config.ts",
         "playwright:update": "npm run playwright -- -u",
-        "playwright:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx  playwright install && npm run playwright'",
-        "playwright:docker:update": " docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx  playwright install && npm run playwright:update'"
+        "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
+        "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
+        "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache"
     },
     "dependencies": {
         "@bem-react/classname": "^1.6.0",

diff --git a/playwright/README.md b/playwright/README.md
@@ -120,3 +120,4 @@
 - `npm run playwright:update` - update screenshots
 - `npm run playwright:docker` - run tests using docker
 - `npm run playwright:docker:update` - update screenshots using docker
+- `npm run playwright:docker:clear-cache` - clear node_modules cache for docker container
diff --git a/scripts/playwright-docker.sh b/scripts/playwright-docker.sh
@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+IMAGE_NAME="mcr.microsoft.com/playwright"
+IMAGE_TAG="v1.38.1-jammy" # This version have to be synchronized with playwright version from package.json
+
+NODE_MODULES_CACHE_DIR="$HOME/.cache/uikit-playwright-docker-node-modules"
+
+run_command() {
+    docker run --rm --network host -it -w /work \
+        -v $(pwd):/work \
+        -v "$NODE_MODULES_CACHE_DIR:/work/node_modules" \
+        "$IMAGE_NAME:$IMAGE_TAG" \
+        /bin/bash -c "$1"
+}
+
+if [[ "$1" = "clear-cache" ]]; then
+    rm -rf "$NODE_MODULES_CACHE_DIR"
+    exit 0
+fi
+
+if [[ ! -d "$NODE_MODULES_CACHE_DIR" ]]; then
+    run_command 'npm ci'
+fi
+
+run_command "$1"
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -8,7 +8,9 @@ import {Icon} from '../Icon';
 import {colorText} from '../Text';
 import {Flex, spacing} from '../layout';
 
+import {AlertAction} from './AlertAction';
 import {AlertActions} from './AlertActions';
+import {AlertContextProvider} from './AlertContextProvider';
 import {AlertIcon} from './AlertIcon';
 import {AlertTitle} from './AlertTitle';
 import {DEFAULT_ICON_SIZE, bAlert} from './constants';
@@ -28,48 +30,50 @@ export const Alert = (props: AlertProps) => {
         qa,
     } = props;
 
-    const icon = props.icon || <Alert.Icon theme={theme} view={view} />;
-    const title =
-        typeof props.title === 'string' ? <Alert.Title text={props.title} /> : props.title;
-    const actions = Array.isArray(props.actions) ? (
-        <Alert.Actions items={props.actions} parentLayout={layout} />
-    ) : (
-        props.actions
-    );
-
     return (
-        <Card
-            style={style}
-            className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
-            theme={theme}
-            view={view}
-            qa={qa}
-        >
-            <Flex gap="3" alignItems={align}>
-                {icon}
-                <Flex direction={layout === 'vertical' ? 'column' : 'row'} gap="5" grow>
-                    <Flex gap="2" grow className={bAlert('text-content')}>
-                        <Flex direction="column" gap="1" grow justifyContent={align}>
-                            {title}
-                            {message}
+        <AlertContextProvider layout={layout} view={view}>
+            <Card
+                style={style}
+                className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
+                theme={theme}
+                view={view}
+                qa={qa}
+            >
+                <Flex gap="3" alignItems={align}>
+                    {props.icon || <Alert.Icon theme={theme} view={view} />}
+                    <Flex direction={layout === 'vertical' ? 'column' : 'row'} gap="5" grow>
+                        <Flex gap="2" grow className={bAlert('text-content')}>
+                            <Flex direction="column" gap="1" grow justifyContent={align}>
+                                {typeof props.title === 'string' ? (
+                                    <Alert.Title text={props.title} />
+                                ) : (
+                                    props.title
+                                )}
+                                {message}
+                            </Flex>
                         </Flex>
+                        {Array.isArray(props.actions) ? (
+                            <Alert.Actions items={props.actions} />
+                        ) : (
+                            props.actions
+                        )}
                     </Flex>
-                    {actions}
+                    {onClose && (
+                        <Button view="flat" onClick={onClose}>
+                            <Icon
+                                data={Xmark}
+                                size={DEFAULT_ICON_SIZE}
+                                className={colorText({color: 'secondary'})}
+                            />
+                        </Button>
+                    )}
                 </Flex>
-                {onClose && (
-                    <Button view="flat" onClick={onClose}>
-                        <Icon
-                            data={Xmark}
-                            size={DEFAULT_ICON_SIZE}
-                            className={colorText({color: 'secondary'})}
-                        />
-                    </Button>
-                )}
-            </Flex>
-        </Card>
+            </Card>
+        </AlertContextProvider>
     );
 };
 
 Alert.Icon = AlertIcon;
 Alert.Title = AlertTitle;
 Alert.Actions = AlertActions;
+Alert.Action = AlertAction;
diff --git a/src/components/Alert/AlertAction.tsx b/src/components/Alert/AlertAction.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {Button} from '../Button';
+
+import type {AlertActionProps} from './types';
+import {useAlertContext} from './useAlertContext';
+
+export const AlertAction = (props: AlertActionProps) => {
+    const {view} = useAlertContext();
+
+    return <Button view={view === 'filled' ? 'normal-contrast' : undefined} {...props} />;
+};
diff --git a/src/components/Alert/AlertActions.tsx b/src/components/Alert/AlertActions.tsx
@@ -1,29 +1,27 @@
 import React from 'react';
 
-import {Button} from '../Button';
 import {Flex} from '../layout';
 
+import {AlertAction} from './AlertAction';
 import {bAlert} from './constants';
 import type {AlertActionsProps} from './types';
+import {useAlertContext} from './useAlertContext';
+
+export const AlertActions = ({items, children, className}: AlertActionsProps) => {
+    const {layout} = useAlertContext();
 
-export const AlertActions = ({
-    items,
-    children,
-    parentLayout = 'vertical',
-    className,
-}: AlertActionsProps) => {
     return (
         <Flex
-            className={bAlert('actions', {minContent: parentLayout === 'horizontal'}, className)}
+            className={bAlert('actions', {minContent: layout === 'horizontal'}, className)}
             direction="row"
             gap="3"
             wrap
-            alignItems={parentLayout === 'horizontal' ? 'center' : 'flex-start'}
+            alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}
         >
             {items?.map(({handler, text}, i) => (
-                <Button key={i} onClick={handler}>
+                <AlertAction key={i} onClick={handler}>
                     {text}
-                </Button>
+                </AlertAction>
             )) || children}
         </Flex>
     );

diff --git a/src/components/Alert/AlertContext.tsx b/src/components/Alert/AlertContext.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type {AlertContextType} from './types';
+
+export const AlertContext = React.createContext<AlertContextType | null>(null);
diff --git a/src/components/Alert/AlertContextProvider.tsx b/src/components/Alert/AlertContextProvider.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import {AlertContext} from './AlertContext';
+import type {AlertContextProviderProps} from './types';
+
+export const AlertContextProvider = ({layout, view, children}: AlertContextProviderProps) => {
+    return <AlertContext.Provider value={{layout, view}}>{children}</AlertContext.Provider>;
+};
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
@@ -93,19 +93,19 @@ of text.
 <!--LANDING_BLOCK
 <ExampleBlock
     code={`
-<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>} />
-<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>} />
+<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>} />
+<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>} />
 `}>
-    <UIKit.Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<UIKit.Button>button</UIKit.Button>} />
-    <UIKit.Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<UIKit.Button>button</UIKit.Button>} />
+    <UIKit.Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
+    <UIKit.Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
 </ExampleBlock>
 LANDING_BLOCK-->
 
 <!--GITHUB_BLOCK-->
 
 ```tsx
-<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>}/>
-<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>}/>
+<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>}/>
+<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>}/>
 ```
 
 <!--/GITHUB_BLOCK-->
@@ -202,19 +202,19 @@ or if the icon must be in the middle of the card.
 <!--LANDING_BLOCK
 <ExampleBlock
     code={`
-<Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<Button>button</Button>} />
-<Alert align="center" theme="info" title="Center" message="Center align" actions={<Button>button</Button>} align="center"/>
+<Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<Alert.Action>button</Alert.Action>} />
+<Alert align="center" theme="info" title="Center" message="Center align" actions={<Alert.Action>button</Alert.Action>} align="center"/>
 `}>
-    <UIKit.Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<UIKit.Button>button</UIKit.Button>} />
-    <UIKit.Alert align="center" theme="info" title="Center" message="Center align" actions={<UIKit.Button>button</UIKit.Button>} align="center"/>
+    <UIKit.Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
+    <UIKit.Alert align="center" theme="info" title="Center" message="Center align" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} align="center"/>
 </ExampleBlock>
 LANDING_BLOCK-->
 
 <!--GITHUB_BLOCK-->
 
 ```tsx
-<Alert align="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>}/>
-<Alert align="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>}/>
+<Alert align="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>}/>
+<Alert align="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>}/>
 ```
 
 <!--/GITHUB_BLOCK-->

diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
           style="flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 12px; align-items: center;"
         >
           <button
-            class="yc-button yc-button_view_normal yc-button_size_m yc-button_pin_round-round"
+            class="yc-button yc-button_view_normal-contrast yc-button_size_m yc-button_pin_round-round"
             type="button"
           >
             <span

diff --git a/src/components/Alert/__stories__/Alert.stories.tsx b/src/components/Alert/__stories__/Alert.stories.tsx
@@ -25,7 +25,7 @@ const stories: AlertProps[] = [
         theme: 'danger',
         view: 'filled',
         onClose: () => alert('Close button pressed'),
-        actions: <Button>{right}</Button>,
+        actions: <Alert.Action>{right}</Alert.Action>,
     },
     {
         title: <div dangerouslySetInnerHTML={{__html: '<b>Some html title</b>'}} />,
@@ -35,13 +35,20 @@ const stories: AlertProps[] = [
         view: 'outlined',
         onClose: () => alert('Close button pressed'),
     },
+    {
+        title,
+        message,
+        view: 'outlined',
+        onClose: () => alert('Close button pressed'),
+        actions: [{text: left}, {text: center}, {text: left}],
+    },
     {
         message,
         theme: 'info',
         view: 'filled',
         actions: (
             <Alert.Actions>
-                <Button>{center}</Button>
+                <Alert.Action>{center}</Alert.Action>
             </Alert.Actions>
         ),
     },
@@ -81,8 +88,8 @@ const stories: AlertProps[] = [
         corners: 'square',
         onClose: () => {},
         actions: (
-            <Alert.Actions parentLayout="horizontal">
-                <Button view="outlined">{left}</Button>
+            <Alert.Actions>
+                <Alert.Action view="outlined">{left}</Alert.Action>
             </Alert.Actions>
         ),
     },
@@ -92,7 +99,7 @@ const stories: AlertProps[] = [
         theme: 'warning',
         view: 'outlined',
         layout: 'horizontal',
-        actions: <Button>{right}</Button>,
+        actions: <Alert.Action>{right}</Alert.Action>,
     },
     {
         message,

diff --git a/src/components/Alert/index.ts b/src/components/Alert/index.ts
@@ -1,2 +1,8 @@
 export {Alert} from './Alert';
-export type {AlertProps} from './types';
+export type {
+    AlertProps,
+    AlertTitleProps,
+    AlertActionProps,
+    AlertActionsProps,
+    AlertIconProps,
+} from './types';