Merge branch 'main' into text-area-heigh

gravity-ui · Aug 12, 2024 · 690c4b5 · 690c4b5
2 parents d370a17 + 4a14815
commit 690c4b5
Show file tree

Hide file tree

Showing 55 changed files with 926 additions and 584 deletions.
diff --git a/.github/workflows/pr-visual-tests.yml b/.github/workflows/pr-visual-tests.yml
@@ -7,6 +7,8 @@ jobs:
   visual_tests:
     name: Visual Tests
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.42.1-jammy
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -15,8 +17,6 @@ jobs:
           cache: npm
       - name: Install Packages
         run: npm ci
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
       - name: Run Visual Tests
         run: npm run playwright
         env:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,33 @@
 # Changelog
 
+## [6.23.0](https://github.com/gravity-ui/uikit/compare/v6.22.0...v6.23.0) (2024-08-06)
+
+
+### Features
+
+* **ListItemView:** ability to pass custom react node as a content prop ([#1726](https://github.com/gravity-ui/uikit/issues/1726)) ([5d5417a](https://github.com/gravity-ui/uikit/commit/5d5417a35357c85a552ee766f6761c5db5e48974))
+* **useList:** added migration guide to set of useList components ([#1728](https://github.com/gravity-ui/uikit/issues/1728)) ([69283f1](https://github.com/gravity-ui/uikit/commit/69283f1f681ab79023544ce0fb21e7253e3281d4))
+
+
+### Bug Fixes
+
+* **Icon:** correctly parse function with default props ([#1713](https://github.com/gravity-ui/uikit/issues/1713)) ([b7eef14](https://github.com/gravity-ui/uikit/commit/b7eef14e0d08ccb81561f111ec544ba9ef6d36f8))
+* **TreeSelect:** fix crashes while has selected elements and has no items ([#1727](https://github.com/gravity-ui/uikit/issues/1727)) ([0e22bde](https://github.com/gravity-ui/uikit/commit/0e22bdeed87b8841d8190758df0a6e4cf0bebd15))
+* **typography:** use correct variables across the project ([#1712](https://github.com/gravity-ui/uikit/issues/1712)) ([4a9a6d1](https://github.com/gravity-ui/uikit/commit/4a9a6d1896e0e4fc773ac66815fc5fa1418176c1))
+
+## [6.22.0](https://github.com/gravity-ui/uikit/compare/v6.21.0...v6.22.0) (2024-07-27)
+
+
+### Features
+
+* **AvatarStack:** add component ([#924](https://github.com/gravity-ui/uikit/issues/924)) ([862f4fb](https://github.com/gravity-ui/uikit/commit/862f4fbbaca8d431f0562965b3cad56e21b7130c))
+
+
+### Bug Fixes
+
+* **Breadcrums:** support react &lt;18 types ([#1722](https://github.com/gravity-ui/uikit/issues/1722)) ([5229e99](https://github.com/gravity-ui/uikit/commit/5229e99731ceef030bd19871d39352081fb4ed69))
+* **useList:** fix useList hook for support initialization state ([#1719](https://github.com/gravity-ui/uikit/issues/1719)) ([2b04b18](https://github.com/gravity-ui/uikit/commit/2b04b18e1f1634a358e245b79aa8da65d33a9e95))
+
 ## [6.21.0](https://github.com/gravity-ui/uikit/compare/v6.20.1...v6.21.0) (2024-07-16)
 
 

diff --git a/CODEOWNERS b/CODEOWNERS
@@ -24,7 +24,9 @@
 /src/components/Loader @SeqviriouM
 /src/components/Menu @NikitaCG
 /src/components/Modal @amje
+/src/components/Overlay @Vladeeg
 /src/components/Pagination @jhoncool
+/src/components/Palette @Ruminat
 /src/components/PinInput @amje
 /src/components/Popover @kseniya57
 /src/components/Popup @amje

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": "6.21.0",
+    "version": "6.23.0",
     "description": "Gravity UI base styling and components",
     "keywords": [
         "component",

diff --git a/src/components/Card/README.md b/src/components/Card/README.md
@@ -44,12 +44,12 @@ const style = {
     justifyContent: 'center';
 }
 
-<Card style={style} theme="normal" size="l">Normal</UIKit.Card>
-<Card style={style} theme="info" size="l">Info</UIKit.Card>
-<Card style={style} theme="success" size="l">Success</UIKit.Card>
-<Card style={style} theme="warning" size="l">Warning</UIKit.Card>
-<Card style={style} theme="danger" size="l">Danger</UIKit.Card>
-<Card style={style} theme="utility" size="l">Utility</UIKit.Card>
+<Card style={style} theme="normal" size="l">Normal</Card>
+<Card style={style} theme="info" size="l">Info</Card>
+<Card style={style} theme="success" size="l">Success</Card>
+<Card style={style} theme="warning" size="l">Warning</Card>
+<Card style={style} theme="danger" size="l">Danger</Card>
+<Card style={style} theme="utility" size="l">Utility</Card>
 `}>
 
     <div style={{display: 'grid', gridAutoFlow: 'column', gridGap: '10px'}}>
@@ -83,9 +83,9 @@ const style = {
     justifyContent: 'center';
 }
 
-    <Card style={style} view="outlined" type="container" size="l">Container</UIKit.Card>
-    <Card style={style} view="outlined" type="action" size="l">action with onClick</UIKit.Card>
-    <Card style={style} view="outlined" type="selection" size="l">Selection</UIKit.Card>
+    <Card style={style} view="outlined" type="container" size="l">Container</Card>
+    <Card style={style} view="outlined" type="action" size="l">action with onClick</Card>
+    <Card style={style} view="outlined" type="selection" size="l">Selection</Card>
 `}>
     <div style={{display: 'grid', gridAutoFlow: 'column', gridGap: '10px'}}>
         <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} view="outlined" type="container" size="l">Container</UIKit.Card>
@@ -116,10 +116,10 @@ const style = {
     justifyContent: 'center';
 }
 
-    <Card style={style} view="clear" type="container" size="l">Clear</UIKit.Card>
-    <Card style={style} view="outlined" type="container" size="l">Outlined</UIKit.Card>
-    <Card style={style} view="filled" type="container" size="l">Filled</UIKit.Card>
-    <Card style={style} view="raised" type="container" size="l">Raised</UIKit.Card>
+    <Card style={style} view="clear" type="container" size="l">Clear</Card>
+    <Card style={style} view="outlined" type="container" size="l">Outlined</Card>
+    <Card style={style} view="filled" type="container" size="l">Filled</Card>
+    <Card style={style} view="raised" type="container" size="l">Raised</Card>
 `}>
     <div style={{display: 'grid', gridAutoFlow: 'column', gridGap: '10px'}}>
         <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} view="clear" type="container" size="l">Clear</UIKit.Card>

diff --git a/src/components/Hotkey/Hotkey.scss b/src/components/Hotkey/Hotkey.scss
@@ -10,7 +10,6 @@ $block: '.#{variables.$ns}hotkey';
     &,
     kbd {
         @include mixins.text-body-1();
-        font-family: var(--g-font-family-sans);
     }
 
     &_view {

diff --git a/src/components/Icon/utils.ts b/src/components/Icon/utils.ts
@@ -15,7 +15,7 @@ export function isSvgrData(data: SVGIconData): data is SVGIconSvgrData {
 }
 
 export function isComponentSvgData(data: SVGIconData): data is SVGIconComponentData {
-    return typeof data === 'object' && 'defaultProps' in data;
+    return (typeof data === 'object' || typeof data === 'function') && 'defaultProps' in data;
 }
 
 export function isStringSvgData(data: SVGIconData): data is SVGIconStringData {

diff --git a/src/components/Overlay/__stories__/Overlay.stories.tsx b/src/components/Overlay/__stories__/Overlay.stories.tsx
@@ -24,7 +24,7 @@ const b = block('overlay-stories');
 type Story = StoryObj<typeof Overlay>;
 
 export default {
-    title: 'Components/Utils/Overlay',
+    title: 'Components/Feedback/Overlay',
     component: Overlay,
 } as Meta;
 

diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
@@ -164,7 +164,7 @@ const WithTableActionsTemplate: StoryFn<TableProps<DataItem>> = (args) => {
                         <TreeSelect
                             items={items}
                             size="s"
-                            mapItemDataToProps={(title) => ({title})}
+                            mapItemDataToContentProps={(title) => ({title})}
                             title="Actions select example"
                         />
                     );

diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -25,7 +25,7 @@ import type {
 } from '../../../../TreeSelect/types';
 import {TextInput} from '../../../../controls/TextInput';
 import {Flex} from '../../../../layout/Flex/Flex';
-import type {ListItemCommonProps, ListItemViewProps} from '../../../../useList';
+import type {ListItemViewContentType, ListItemViewProps} from '../../../../useList';
 import {ListContainerView, ListItemView, useListFilter} from '../../../../useList';
 import {block} from '../../../../utils/cn';
 import type {TableColumnConfig} from '../../../Table';
@@ -190,16 +190,18 @@ const useDndRenderItem = (sortable: boolean | undefined) => {
     }) => {
         const isDragDisabled = sortable === false || renderContainerProps?.isDragDisabled === true;
         const endSlot = isDragDisabled ? undefined : <Icon data={Grip} size={16} />;
-        const hasSelectionIcon = !item.isRequired;
         const startSlot = item.isRequired ? <Icon data={Lock} /> : undefined;
         const selected = item.isRequired ? false : props.selected;
 
         const commonProps: ListItemViewProps = {
             ...props,
             selected,
-            startSlot,
-            hasSelectionIcon,
-            endSlot,
+            selectionViewType: item.isRequired ? 'single' : 'multiple',
+            content: {
+                ...props.content,
+                startSlot,
+                endSlot,
+            },
         };
 
         if (isDragDisabled) {
@@ -241,7 +243,7 @@ export type TableColumnSetupItem = TableSetting & {
     sticky?: TableColumnConfig<unknown>['sticky'];
 };
 
-const mapItemDataToProps = (item: TableColumnSetupItem): ListItemCommonProps => {
+const mapItemDataToContentProps = (item: TableColumnSetupItem): ListItemViewContentType => {
     return {
         title: item.title,
     };
@@ -435,7 +437,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
     return (
         <TreeSelect
             className={b(null, className)}
-            mapItemDataToProps={mapItemDataToProps}
+            mapItemDataToContentProps={mapItemDataToContentProps}
             multiple
             size="l"
             open={open}

diff --git a/src/components/Text/text/text.ts b/src/components/Text/text/text.ts
@@ -33,33 +33,33 @@ export interface TextBaseProps {
      * Storybook: https://preview.gravity-ui.com/uikit/?path=/story/typography--variants
      * **Note:**: below are the default variants that can be overridden in the project
      *
-     * - body:
+     * - body (font-family: var(--g-text-body-font-family); font-weight: 400):
      *      - 1: font-size: 13px; line-height: 18px; (**Default variant**)
      *      - 2: font-size: 15px; line-height: 20px;
      *      - 3: font-size: 17px; line-height: 24px;
      *      - short: font-size: 13px; line-height: 16px;
-     * - caption:
+     * - caption (font-family: var(--g-text-caption-font-family); font-weight: 400):
      *      - 1: font-size: 9px; line-height: 12px;
      *      - 2: font-size: 11px; line-height: 16px;
-     * - header:
-     *      - 1: font-size: 20px; line-height: 24px; font-weight: 600;
-     *      - 2: font-size: 24px; line-height: 28px; font-weight: 600;
-     * - subheader:
-     *      - 1: font-size: 13px; line-height: 18px; font-weight: 600;
-     *      - 2: font-size: 15px; line-height: 20px; font-weight: 600;
-     *      - 2: font-size: 17px; line-height: 24px; font-weight: 600;
-     * - display:
-     *      - 1: font-size: 28px; line-height: 36px; font-weight: 600;
-     *      - 2: font-size: 32px; line-height: 40px; font-weight: 600;
-     *      - 3: font-size: 40px; line-height: 48px; font-weight: 600;
-     *      - 4: font-size: 48px; line-height: 52px; font-weight: 600;
-     * - code:
-     *      - 1: font-size: 12px; line-height: 18px; font-weight: 400; font-family: var(--g-font-family-monospace);
-     *      - 2: font-size: 14px; line-height: 20px; font-weight: 400; font-family: var(--g-font-family-monospace);
-     *      - 3: font-size: 16px; line-height: 14px; font-weight: 400; font-family: var(--g-font-family-monospace);
-     *      - inline=1: font-size: 12px; line-height: 14px; font-weight: 400; font-family: var(--g-font-family-monospace);
-     *      - inline-2: font-size: 14px; line-height: 16px; font-weight: 400; font-family: var(--g-font-family-monospace);
-     *      - inline-3: font-size: 16px; line-height: 20px; font-weight: 400; font-family: var(--g-font-family-monospace);
+     * - header (font-family: var(--g-text-header-font-family); font-weight: 600):
+     *      - 1: font-size: 20px; line-height: 24px;
+     *      - 2: font-size: 24px; line-height: 28px;
+     * - subheader (font-family: var(--g-text-subheader-font-family); font-weight: 600):
+     *      - 1: font-size: 13px; line-height: 18px;
+     *      - 2: font-size: 15px; line-height: 20px;
+     *      - 2: font-size: 17px; line-height: 24px;
+     * - display (font-family: var(--g-text-display-font-family); font-weight: 600):
+     *      - 1: font-size: 28px; line-height: 36px;
+     *      - 2: font-size: 32px; line-height: 40px;
+     *      - 3: font-size: 40px; line-height: 48px;
+     *      - 4: font-size: 48px; line-height: 52px;
+     * - code (font-family: var(--g-text-code-font-family); font-weight: 400):
+     *      - 1: font-size: 12px; line-height: 18px;
+     *      - 2: font-size: 14px; line-height: 20px;
+     *      - 3: font-size: 16px; line-height: 14px;
+     *      - inline=1: font-size: 12px; line-height: 14px;
+     *      - inline-2: font-size: 14px; line-height: 16px;
+     *      - inline-3: font-size: 16px; line-height: 20px;
      */
     variant?: (typeof TEXT_VARIANTS)[number] | 'inherit';
 

diff --git a/src/components/TreeList/TreeList.tsx b/src/components/TreeList/TreeList.tsx
@@ -28,7 +28,7 @@ export const TreeList = <T,>({
     renderItem: propsRenderItem,
     renderContainer = ListContainer,
     onItemClick: propsOnItemClick,
-    mapItemDataToProps,
+    mapItemDataToContentProps,
 }: TreeListProps<T>) => {
     const uniqId = useUniqId();
     const treeListId = id ?? uniqId;
@@ -71,7 +71,7 @@ export const TreeList = <T,>({
             id: itemId,
             size,
             multiple,
-            mapItemDataToProps,
+            mapItemDataToContentProps,
             onItemClick,
             list,
         });
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,6 @@ $block: '.#{variables.$ns}hotkey'; @@
         &,
         kbd {
             @include mixins.text-body-1();
-            font-family: var(--g-font-family-sans);
         }
         &_view {
@@ Expand Down @@