Merge branch 'next' into table-rtl

gravity-ui · Nov 27, 2023 · d20bde1 · d20bde1
2 parents c4e7a88 + 4b2b5cb
commit d20bde1
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 89 deletions.
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -10,6 +10,7 @@ import {VariableSizeList as ListContainer} from 'react-window';
 import {SelectLoadingIndicator} from '../Select/components/SelectList/SelectLoadingIndicator';
 import {TextInput} from '../controls';
 import {MobileContext} from '../mobile';
+import {ThemeContext} from '../theme';
 import {block} from '../utils/cn';
 import {getUniqId} from '../utils/common';
 
@@ -44,6 +45,7 @@ export const listDefaultProps: Partial<ListProps<ListItemData<unknown>>> = {
 
 export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T>> {
     static defaultProps: Partial<ListProps<ListItemData<unknown>>> = listDefaultProps;
+    static contextType = ThemeContext;
 
     static moveListElement<T = unknown>(
         list: ListItemData<T>[],
@@ -72,6 +74,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
         return undefined;
     }
 
+    context!: React.ContextType<typeof ThemeContext>;
     state: ListState<T> = {
         items: this.props.items,
         filter: '',
@@ -342,6 +345,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                         onItemsRendered={this.onItemsRendered}
                         onSortStart={this.onSortStart}
                         onSortEnd={this.onSortEnd}
+                        direction={this.context.direction}
                         // this property used to rerender items in viewport
                         // must be last, typescript skips checks for all props behind ts-ignore/ts-expect-error
                         // @ts-expect-error

diff --git a/src/components/List/components/ListItem.tsx b/src/components/List/components/ListItem.tsx
@@ -28,6 +28,15 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
             role = 'listitem',
         } = this.props;
 
+        /*
+        This fixes item drag layout for rtl direction.
+        react-window has a bug where in rtl it setting "right" to 0 instead of undefined.
+         */
+        const fixedStyle = {
+            ...style,
+            right: undefined,
+        };
+
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div
@@ -45,7 +54,7 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
                     },
                     itemClassName,
                 )}
-                style={style}
+                style={fixedStyle}
                 onClick={item.disabled ? undefined : this.onClick}
                 onClickCapture={item.disabled ? undefined : this.onClickCapture}
                 onMouseEnter={this.onMouseEnter}

diff --git a/src/components/Select/__stories__/SelectShowcase.tsx b/src/components/Select/__stories__/SelectShowcase.tsx
@@ -95,7 +95,7 @@ const ExampleItem = (props: {
                 code.map((codeItem, i) => {
                     return (
                         <React.Fragment key={`${title}-${i}`}>
-                            <pre>
+                            <pre dir="ltr">
                                 {codeItem}
                                 <ClipboardButton
                                     className={b('copy-button')}

diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/LockIcon.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/LockIcon.tsx
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Gear} from '@gravity-ui/icons';
+import {Check, Gear, Lock} from '@gravity-ui/icons';
 
 import type {PopperPlacement} from '../../../../../components/utils/usePopper';
 import {useActionHandlers} from '../../../../../hooks/useActionHandlers';
@@ -11,8 +11,6 @@ import {Popup} from '../../../../Popup';
 import {block} from '../../../../utils/cn';
 import type {TableColumnSetupItem} from '../withTableSettings';
 
-import {LockIcon} from './LockIcon';
-import {TickIcon} from './TickIcon';
 import i18n from './i18n';
 
 import './TableColumnSetup.scss';
@@ -146,11 +144,11 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
             <div className={b('item-content')}>
                 {item.required ? (
                     <div className={b('lock-wrap', {visible: item.selected})}>
-                        <Icon data={LockIcon} />
+                        <Icon data={Lock} />
                     </div>
                 ) : (
                     <div className={b('tick-wrap', {visible: item.selected})}>
-                        <Icon data={TickIcon} className={b('tick')} width={10} height={10} />
+                        <Icon data={Check} className={b('tick')} width={10} height={10} />
                     </div>
                 )}
                 <div className={b('title')}>{getItemTitle(item)}</div>

diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TickIcon.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TickIcon.tsx
diff --git a/src/components/Tabs/README.md b/src/components/Tabs/README.md
@@ -290,16 +290,16 @@ LANDING_BLOCK-->
 
 ### Tabs.Item properties
 
-| Name     | Description                      |            Type            | Default |
-| :------- | -------------------------------- | :------------------------: | :-----: |
-| id       | Tab ID                           |          `string`          |         |
-| title    | Tab title                        | `string` `React.ReactNode` |         |
-| meta     | Tab description                  |          `string`          |         |
-| hint     | HTML title attribute             |          `string`          |         |
-| icon     | Icon displayed at the left       |     `React.ReactNode`      |         |
-| counter  | Number displayed at the right    |     `React.ReactNode`      |         |
-| label    | `<Label>` displayed at the right |     `React.ReactNode`      |         |
-| disabled | Inactive state                   |         `boolean`          |         |
+| Name     | Description                    |            Type            | Default |
+| :------- | ------------------------------ | :------------------------: | :-----: |
+| id       | Tab ID                         |          `string`          |         |
+| title    | Tab title                      | `string` `React.ReactNode` |         |
+| meta     | Tab description                |          `string`          |         |
+| hint     | HTML title attribute           |          `string`          |         |
+| icon     | Icon displayed at the start    |     `React.ReactNode`      |         |
+| counter  | Number displayed at the end    |     `React.ReactNode`      |         |
+| label    | `<Label>` displayed at the end |     `React.ReactNode`      |         |
+| disabled | Inactive state                 |         `boolean`          |         |
 
 ## Properties