Skip to content

Commit

Permalink
Merge branch 'main' into feat-sheet-add-aria-attrs
Browse files Browse the repository at this point in the history
  • Loading branch information
mournfulCoroner authored Apr 27, 2024
2 parents 0028506 + 9e93c91 commit b86c7a0
Show file tree
Hide file tree
Showing 58 changed files with 845 additions and 378 deletions.
16 changes: 9 additions & 7 deletions .github/workflows/pr-storybook-tests.yml
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
name: PR Storybook Tests

on:
workflow_run:
workflows: ['PR Preview Deploy']
types:
- completed
pull_request:

jobs:
tests:
Expand All @@ -19,7 +16,12 @@ jobs:
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Storybook Tests
- name: Build Storybook Static
run: npm run build-storybook
- name: Serve Storybook and run tests
run: |
npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
"npx http-server storybook-static --port 7007 --silent" \
"npx wait-on $PR_PREVIEW_URL && npm run test-storybook"
env:
PR_PREVIEW_URL: "https://preview.gravity-ui.com/uikit/${{github.event.pull_request.number}}"
run: npm run test-storybook
PR_PREVIEW_URL: http://127.0.0.1:7007
2 changes: 2 additions & 0 deletions .storybook/test-runner.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ const config: TestRunnerConfig = {
// Apply story-level a11y rules
await configureAxe(page, {
rules: storyContext.parameters?.a11y?.config?.rules,
reporter: 'no-passes',
});

await checkA11y(page, '#storybook-root', {
verbose: false,
detailedReport: true,
detailedReportOptions: {
html: true,
Expand Down
48 changes: 48 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,53 @@
# Changelog

## [6.13.0](https://github.com/gravity-ui/uikit/compare/v6.12.0...v6.13.0) (2024-04-22)


### Features

* **layout:** unification of Theme and Layout Providers ([#1518](https://github.com/gravity-ui/uikit/issues/1518)) ([d89610a](https://github.com/gravity-ui/uikit/commit/d89610a8c7bc952ecf0db4c2548c8c5dde9bc710))


### Bug Fixes

* **Card:** reset box shadow styles for the root ([#1537](https://github.com/gravity-ui/uikit/issues/1537)) ([39b7fe8](https://github.com/gravity-ui/uikit/commit/39b7fe801593151094759503e4f8c706cece38c8))
* **ListItemView:** fix bg color ([#1488](https://github.com/gravity-ui/uikit/issues/1488)) ([2ae45ef](https://github.com/gravity-ui/uikit/commit/2ae45ef9a997f8d0cdd8687116044239e1ba710c))
* **ListItemView:** removed max identation ([#1535](https://github.com/gravity-ui/uikit/issues/1535)) ([d7d45db](https://github.com/gravity-ui/uikit/commit/d7d45db53338b5e623bb81b59e7b66a588c18e28))
* **ThemeProvider:** changed theme to config prop name ([#1528](https://github.com/gravity-ui/uikit/issues/1528)) ([62431ca](https://github.com/gravity-ui/uikit/commit/62431ca72c220f9a434d065c87b33cf060cd7f7a))

## [6.12.0](https://github.com/gravity-ui/uikit/compare/v6.11.0...v6.12.0) (2024-04-18)


### Features

* **useList:** added ability to define initial value to useListState ([#1483](https://github.com/gravity-ui/uikit/issues/1483)) ([7f66d28](https://github.com/gravity-ui/uikit/commit/7f66d28d9e3b43ebe388b90b6bc8e2799962d0c0))


### Bug Fixes

* do not call warnOnce function in production ([#1520](https://github.com/gravity-ui/uikit/issues/1520)) ([9ab7d7c](https://github.com/gravity-ui/uikit/commit/9ab7d7c86a06a6f94126a87acfb23033709ec8a1))

## [6.11.0](https://github.com/gravity-ui/uikit/compare/v6.10.2...v6.11.0) (2024-04-17)


### Features

* **Button:** refactor to flex and center icons ([#1452](https://github.com/gravity-ui/uikit/issues/1452)) ([31c22e8](https://github.com/gravity-ui/uikit/commit/31c22e8418f67cb2df3354350f19e44471918aa4))


### Bug Fixes

* add load more functionallity to virtualized list ([#1490](https://github.com/gravity-ui/uikit/issues/1490)) ([#1513](https://github.com/gravity-ui/uikit/issues/1513)) ([8de1653](https://github.com/gravity-ui/uikit/commit/8de16536b7541835d58cc651a3ab4248f0e1ebf0))
* **Breadcrumbs:** unset more item alignment ([#1505](https://github.com/gravity-ui/uikit/issues/1505)) ([7d9797a](https://github.com/gravity-ui/uikit/commit/7d9797ad0b1389b2e732ebeafcae312f750ae9d8))
* **Dialog:** correct width's vars order ([#1510](https://github.com/gravity-ui/uikit/issues/1510)) ([f54da2d](https://github.com/gravity-ui/uikit/commit/f54da2de711e738a2089f26833be4dc2fa01ec6b))
* **Label:** isolate inner z-indexes ([#1519](https://github.com/gravity-ui/uikit/issues/1519)) ([200c052](https://github.com/gravity-ui/uikit/commit/200c0522dfeedd637f0656fa27c23a2cb9f844bf))
* **layout:** ability to override breakpoint during theme ([#1512](https://github.com/gravity-ui/uikit/issues/1512)) ([bad4fa9](https://github.com/gravity-ui/uikit/commit/bad4fa9e8336cd4b06a9875aef948fc8caaaf293))
* **ListItemView:** fix indentation in depth more than 10 ([#1517](https://github.com/gravity-ui/uikit/issues/1517)) ([2cde017](https://github.com/gravity-ui/uikit/commit/2cde017be22a58b331a4aecff40ca3e83cb23e26))
* **ListItemView:** some changes after feedback ([#1516](https://github.com/gravity-ui/uikit/issues/1516)) ([b274498](https://github.com/gravity-ui/uikit/commit/b2744989b4398ae7755e8ea9ae6fed0516bf8618))
* prevent deselection of required table column items ([#1508](https://github.com/gravity-ui/uikit/issues/1508)) ([a69050c](https://github.com/gravity-ui/uikit/commit/a69050cd7213dacce7868a0259359d59e52a1743))
* return `--g-color-private-white-20-solid` css variable ([#1511](https://github.com/gravity-ui/uikit/issues/1511)) ([4a366be](https://github.com/gravity-ui/uikit/commit/4a366be252609c1369262a2e76101e82b6d87a67))
* **theme:** add option for controlling :root color-scheme ([#1468](https://github.com/gravity-ui/uikit/issues/1468)) ([f6237e1](https://github.com/gravity-ui/uikit/commit/f6237e1356248668693f1cc34c7515a8e6a52e41))

## [6.10.2](https://github.com/gravity-ui/uikit/compare/v6.10.1...v6.10.2) (2024-04-10)


Expand Down
1 change: 1 addition & 0 deletions CODEOWNERS
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
/src/components/controls/TextInput @korvin89
/src/components/Toaster @ogonkov
/src/components/Tooltip @amje
/src/components/layout @IsaevAlexandr

/src/hooks/useActionHandlers @ogonkov
/src/hooks/useFileInput @korvin89
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gravity-ui/uikit",
"version": "6.10.2",
"version": "6.13.0",
"description": "Gravity UI base styling and components",
"license": "MIT",
"repository": {
Expand Down
4 changes: 4 additions & 0 deletions src/components/Alert/Alert.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,8 @@ $block: '.#{variables.$ns}alert';
&__actions_minContent {
width: min-content;
}

&__close-btn {
flex-shrink: 0;
}
}
1 change: 1 addition & 0 deletions src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export const Alert = (props: AlertProps) => {
{onClose && (
<Button
view="flat"
className={bAlert('close-btn')}
onClick={onClose}
extraProps={{
'aria-label': i18n('label_close'),
Expand Down
2 changes: 1 addition & 1 deletion src/components/Alert/__snapshots__/Alert.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
</div>
<button
aria-label="Close"
class="g-button g-button_view_flat g-button_size_m g-button_pin_round-round"
class="g-button g-button_view_flat g-button_size_m g-button_pin_round-round g-alert__close-btn"
type="button"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/__stories__/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export const InsideText: Story = {
<Button {...args} /> dolor
<br />
sit{' '}
<Button {...args}>
<Button {...args} extraProps={{'aria-label': 'Icon button inside text'}}>
<IconComponent data={Globe} />
</Button>{' '}
amet
Expand Down
1 change: 1 addition & 0 deletions src/components/Card/Card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ $block: '.#{variables.$ns}card';
--_--background-color: transparent;
--_--border-color: transparent;
--_--border-width: 0;
--_--box-shadow: none;

box-shadow: var(--g-card-box-shadow, var(--_--box-shadow));
box-sizing: border-box;
Expand Down
17 changes: 17 additions & 0 deletions src/components/Divider/__stories__/Divider.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,23 @@ import {Divider} from '../Divider';
const meta: Meta<typeof Divider> = {
title: 'Components/Utils/Divider',
component: Divider,
parameters: {
a11y: {
element: '#storybook-root',
config: {
rules: [
{
id: 'aria-allowed-attr', // https://github.com/gravity-ui/uikit/issues/1336
enabled: false,
},
{
id: 'aria-required-parent', // https://github.com/gravity-ui/uikit/issues/1336
enabled: false,
},
],
},
},
},
};

export default meta;
Expand Down
14 changes: 6 additions & 8 deletions src/components/List/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,26 @@ import React from 'react';

import isEqual from 'lodash/isEqual';
import isObject from 'lodash/isObject';
import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
import type {
DraggableProvided,
DraggableRubric,
DraggableStateSnapshot,
DropResult,
DroppableProvided,
} from 'react-beautiful-dnd';
import AutoSizer from 'react-virtualized-auto-sizer';
import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
import type {Size} from 'react-virtualized-auto-sizer';
import {VariableSizeList} from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import type {VariableSizeListProps} from 'react-window';
import {VariableSizeList} from 'react-window';

import {SelectLoadingIndicator} from '../Select/components/SelectList/SelectLoadingIndicator';
import {TextInput} from '../controls';
import {MobileContext} from '../mobile';
import {useDirection} from '../theme';
import {block} from '../utils/cn';
import {getUniqId} from '../utils/common';

import {ListLoadingIndicator} from './ListLoadingIndicator';
import {ListItem, SimpleContainer, defaultRenderItem} from './components';
import {listNavigationIgnoredKeys} from './constants';
import type {ListItemData, ListItemProps, ListProps} from './types';
Expand Down Expand Up @@ -260,9 +260,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
const {onLoadMore} = this.props;

if (isObject(item) && 'value' in item && item.value === this.loadingItem.value) {
return (
<SelectLoadingIndicator onIntersect={itemIndex === 0 ? undefined : onLoadMore} />
);
return <ListLoadingIndicator onIntersect={itemIndex === 0 ? undefined : onLoadMore} />;
}

return this.props.renderItem
Expand Down Expand Up @@ -421,7 +419,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T

private renderVirtualizedContainer() {
// Otherwise, react-window will not update the list items
const items = [...this.getItems()];
const items = [...this.getItemsWithLoading()];

if (this.props.sortable) {
return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/List/ListLoadingIndicator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import {Loader} from '../Loader';
import {block} from '../utils/cn';

const b = block('list');
export const SelectLoadingIndicator = (props: {onIntersect?: () => void}) => {
export const ListLoadingIndicator = (props: {onIntersect?: () => void}) => {
const ref = React.useRef<HTMLDivElement | null>(null);

useIntersection({element: ref.current, onIntersect: props?.onIntersect});

return (
<div ref={ref} className={b('loading-indicator')}>
<Loader />
<Loader qa={'list-loader'} />
</div>
);
};
68 changes: 68 additions & 0 deletions src/components/List/__tests__/List.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';

import _ from 'react-virtualized-auto-sizer';

import {setupIntersectionObserverMock} from '../../../../test-utils/setupIntersectionObserverMock';
import {cleanup, render, screen} from '../../../../test-utils/utils';
import {List} from '../List';
import type {ListProps} from '../types';

function setup(props: Partial<ListProps<string>> = {}) {
const baseProps: ListProps<string> = {
items: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'],
itemsHeight: 150,
itemHeight: 28,
filterable: false,
};

return render(
<div>
<List<string> {...baseProps} {...props} />
</div>,
);
}

const mockOnLoadMorFn = jest.fn();

beforeAll(() => {
setupIntersectionObserverMock();
});

afterEach(() => {
cleanup();
jest.clearAllMocks();
});

describe('base List', () => {
it('should render loading indicator', () => {
setup({virtualized: false, onLoadMore: mockOnLoadMorFn, loading: true});

const loader = screen.getByTestId('list-loader');
expect(loader).toBeInTheDocument();
});
it('should call onLoadMore callback when loading indicator is visible', () => {
setup({virtualized: false, onLoadMore: mockOnLoadMorFn, loading: true});

const loader = screen.getByTestId('list-loader');

expect(loader).toBeVisible();
expect(mockOnLoadMorFn).toHaveBeenCalled();
});
});

describe('virtualized List', () => {
it('should render loading indicator', () => {
setup({virtualized: true, onLoadMore: mockOnLoadMorFn, loading: true});

const loader = screen.getByTestId('list-loader');
expect(loader).toBeInTheDocument();
});

it('should call onLoadMore callback when loading indicator is visible', () => {
setup({virtualized: true, onLoadMore: mockOnLoadMorFn, loading: true});

const loader = screen.getByTestId('list-loader');
expect(loader).toBeVisible();
expect(mockOnLoadMorFn).toHaveBeenCalled();
});
});
58 changes: 28 additions & 30 deletions src/components/Modal/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,34 +102,32 @@ export function Modal({
});

return (
<Portal container={container}>
<CSSTransition
nodeRef={containerRef}
in={open}
addEndListener={(done) =>
containerRef.current?.addEventListener('animationend', done)
}
classNames={getCSSTransitionClassNames(b)}
mountOnEnter={!keepMounted}
unmountOnExit={!keepMounted}
appear={true}
onEnter={() => {
setInTransition(true);
onTransitionEnter?.();
}}
onExit={() => {
setInTransition(true);
onTransitionExit?.();
}}
onEntered={() => {
setInTransition(false);
onTransitionEntered?.();
}}
onExited={() => {
setInTransition(false);
onTransitionExited?.();
}}
>
<CSSTransition
nodeRef={containerRef}
in={open}
addEndListener={(done) => containerRef.current?.addEventListener('animationend', done)}
classNames={getCSSTransitionClassNames(b)}
mountOnEnter={!keepMounted}
unmountOnExit={!keepMounted}
appear={true}
onEnter={() => {
setInTransition(true);
onTransitionEnter?.();
}}
onExit={() => {
setInTransition(true);
onTransitionExit?.();
}}
onEntered={() => {
setInTransition(false);
onTransitionEntered?.();
}}
onExited={() => {
setInTransition(false);
onTransitionExited?.();
}}
>
<Portal container={container}>
<div ref={containerRef} style={style} className={b({open}, className)} data-qa={qa}>
<div className={b('content-aligner')}>
<div className={b('content-wrapper')}>
Expand Down Expand Up @@ -157,7 +155,7 @@ export function Modal({
</div>
</div>
</div>
</CSSTransition>
</Portal>
</Portal>
</CSSTransition>
);
}
Loading

0 comments on commit b86c7a0

Please sign in to comment.