From e0995b70f5370cb1c6e81edc68543c79b87c2960 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:39:55 -0400 Subject: [PATCH 01/24] Change DropdownMenu to Popover --- .../src/core/Table/columns/actionColumn.tsx | 62 ++++++++++--------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index e4ce1fc01c9..900b23df422 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -5,13 +5,14 @@ import * as React from 'react'; import type { HeaderProps } from '../../../react-table/react-table.js'; import { Checkbox } from '../../Checkbox/Checkbox.js'; -import { SvgColumnManager } from '../../../utils/index.js'; -import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js'; +import { SvgColumnManager, type PortalProps } from '../../../utils/index.js'; import { IconButton } from '../../Buttons/IconButton.js'; -import { MenuItem } from '../../Menu/MenuItem.js'; import { tableResizeStartAction } from '../Table.js'; import { SELECTION_CELL_ID } from './selectionColumn.js'; import { EXPANDER_CELL_ID } from './expanderColumn.js'; +import { Popover, usePopover } from '../../Popover/Popover.js'; +import { Surface } from '../../Surface/Surface.js'; +import { Flex } from '../../Flex/Flex.js'; const ACTION_CELL_ID = 'iui-table-action'; @@ -19,10 +20,17 @@ type ActionColumnProps = { columnManager?: | boolean | { - dropdownMenuProps: Omit< - React.ComponentPropsWithoutRef, - 'menuItems' | 'children' - >; + dropdownMenuProps: React.ComponentPropsWithoutRef<'div'> & { + /** + * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'. + * @default 'menu' + */ + role?: string; + } & Pick< + Parameters[0], + 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' + > & + Pick; }; }; @@ -94,45 +102,41 @@ export const ActionColumn = >({ }); }; return ( - e.stopPropagation()} - onChange={onClick} - aria-labelledby={`iui-column-${column.id}`} - /> - } - onClick={onClick} + checked={checked} disabled={column.disableToggleVisibility} - > -
- {column.render('Header')} -
- + onClick={(e) => e.stopPropagation()} + onChange={onClick} + label={column.render('Header')} + /> ); }); - const dropdownMenuProps = + const popoverProps = typeof columnManager !== 'boolean' ? columnManager.dropdownMenuProps : {}; return ( - + + {headerCheckBoxes()} + + + } + {...popoverProps} onVisibleChange={(open) => { setIsOpen(open); - dropdownMenuProps?.onVisibleChange?.(open); + popoverProps?.onVisibleChange?.(open); }} > - + ); }, }; From 42d8018a59f9acd32bd64078fe345799d51d60c8 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:31:04 -0400 Subject: [PATCH 02/24] Fixed unit tests --- .../src/core/Table/Table.test.tsx | 37 ++++++++----------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index 354a3db86c4..897da5f18a8 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -2927,9 +2927,9 @@ it('should render empty action column with column manager', async () => { expect(columnManager).toHaveAttribute('data-iui-variant', 'borderless'); await userEvent.click(columnManager); - expect(document.querySelector('.iui-menu')).toBeTruthy(); + expect(document.querySelector('[role="dialog"]')).toBeTruthy(); - const columnManagerColumns = document.querySelectorAll('.iui-list-item'); + const columnManagerColumns = document.querySelectorAll('label'); expect(columnManagerColumns[0].textContent).toBe('Name'); expect(columnManagerColumns[1].textContent).toBe('Description'); expect(columnManagerColumns[2].textContent).toBe('View'); @@ -2978,11 +2978,11 @@ it('should render action column with column manager', async () => { await userEvent.click(columnManager); - const dropdownMenu = document.querySelector('.iui-menu') as HTMLDivElement; - expect(dropdownMenu).toBeTruthy(); + const popover = document.querySelector('[role="dialog"]') as HTMLDivElement; + expect(popover).toBeTruthy(); }); -it('should render dropdown menu with custom style and override default style', async () => { +it('should render popover with custom style and override default style', async () => { const columns: Column[] = [ { id: 'name', @@ -3002,6 +3002,7 @@ it('should render dropdown menu with custom style and override default style', a ActionColumn({ columnManager: { dropdownMenuProps: { + id: 'popover', className: 'testing-classname', style: { maxHeight: '600px', @@ -3027,12 +3028,12 @@ it('should render dropdown menu with custom style and override default style', a await userEvent.click(columnManager); - const dropdownMenu = document.querySelector('.iui-menu') as HTMLDivElement; - expect(dropdownMenu).toBeTruthy(); - expect(dropdownMenu.classList.contains('testing-classname')).toBeTruthy(); - expect(dropdownMenu).toHaveStyle('max-height: 600px'); - expect(dropdownMenu.style.backgroundColor).toEqual('red'); - expect(dropdownMenu).toHaveAttribute('role', 'listbox'); + const popover = document.querySelector('#popover') as HTMLDivElement; + expect(popover).toBeTruthy(); + expect(popover.classList.contains('testing-classname')).toBeTruthy(); + expect(popover).toHaveStyle('max-height: 600px'); + expect(popover.style.backgroundColor).toEqual('red'); + expect(popover).toHaveAttribute('role', 'listbox'); }); it('should hide column when deselected in column manager', async () => { @@ -3069,8 +3070,7 @@ it('should hide column when deselected in column manager', async () => { const columnManager = container.querySelector('.iui-button') as HTMLElement; await userEvent.click(columnManager); - const columnManagerColumns = - document.querySelectorAll('.iui-list-item'); + const columnManagerColumns = document.querySelectorAll('input'); await userEvent.click(columnManagerColumns[1]); headerCells = container.querySelectorAll( @@ -3109,14 +3109,9 @@ it('should be disabled in column manager if `disableToggleVisibility` is true', const columnManager = container.querySelector('.iui-button') as HTMLElement; await userEvent.click(columnManager); - const columnManagerColumns = - document.querySelectorAll('.iui-list-item'); - expect(columnManagerColumns[0]).toHaveAttribute('aria-disabled', 'true'); - - expect( - (columnManagerColumns[0].querySelector('.iui-checkbox') as HTMLInputElement) - .disabled, - ).toBeTruthy(); + const columnManagerColumns = document.querySelectorAll('label'); + expect(columnManagerColumns[0].classList).toContain('iui-disabled'); + expect(columnManagerColumns[0].querySelector('input')?.disabled).toBeTruthy(); }); it('should add selection column manually', () => { From 3854ef5407d2094b01dbb5227d3498a7ecc28525 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:32:05 -0400 Subject: [PATCH 03/24] Added hard-coded label --- .../itwinui-react/src/core/Table/columns/actionColumn.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index 900b23df422..f8ca92d2dab 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -133,7 +133,12 @@ export const ActionColumn = >({ popoverProps?.onVisibleChange?.(open); }} > - + From c6f8c33deaafeced870611858b881350f45ed62c Mon Sep 17 00:00:00 2001 From: Rohan <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:37:02 -0400 Subject: [PATCH 04/24] Remove isActive and controlled state --- .../itwinui-react/src/core/Table/columns/actionColumn.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index f8ca92d2dab..6e9e8ccbcd1 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -67,7 +67,6 @@ export const ActionColumn = >({ cellClassName: 'iui-slot', disableReordering: true, Header: ({ allColumns, dispatch, state }: HeaderProps) => { - const [isOpen, setIsOpen] = React.useState(false); const buttonRef = React.useRef(null); if (!columnManager) { @@ -128,14 +127,9 @@ export const ActionColumn = >({ } {...popoverProps} - onVisibleChange={(open) => { - setIsOpen(open); - popoverProps?.onVisibleChange?.(open); - }} > From 2e8f0f7a47691f871f073eb1ec20d03d86b93b1e Mon Sep 17 00:00:00 2001 From: Rohan <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:38:40 -0400 Subject: [PATCH 05/24] Removed onClick --- packages/itwinui-react/src/core/Table/columns/actionColumn.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index 6e9e8ccbcd1..fb0475907dd 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -105,7 +105,6 @@ export const ActionColumn = >({ key={column.id} checked={checked} disabled={column.disableToggleVisibility} - onClick={(e) => e.stopPropagation()} onChange={onClick} label={column.render('Header')} /> From 1868a17d32a07901886baa9546c4dd7bd12050f1 Mon Sep 17 00:00:00 2001 From: Rohan <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:43:31 -0400 Subject: [PATCH 06/24] Add visually hidden legend --- .../itwinui-react/src/core/Table/columns/actionColumn.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index fb0475907dd..2365b5f1f16 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -11,6 +11,7 @@ import { tableResizeStartAction } from '../Table.js'; import { SELECTION_CELL_ID } from './selectionColumn.js'; import { EXPANDER_CELL_ID } from './expanderColumn.js'; import { Popover, usePopover } from '../../Popover/Popover.js'; +import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js'; import { Surface } from '../../Surface/Surface.js'; import { Flex } from '../../Flex/Flex.js'; @@ -119,8 +120,9 @@ export const ActionColumn = >({ return ( + + Show/hide columns {headerCheckBoxes()} From b4eb444924292c0a5a876aa9b25863cf30a9648b Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:53:41 -0400 Subject: [PATCH 07/24] create `FieldsetBase` component --- .changeset/mean-hornets-attend.md | 5 +++++ apps/css-workshop/src/pages/fieldset.astro | 4 ++-- packages/itwinui-css/src/fieldset/fieldset.scss | 8 ++++++-- packages/itwinui-react/src/core/Fieldset/Fieldset.tsx | 7 +++---- .../itwinui-react/src/utils/components/FieldsetBase.tsx | 7 +++++++ packages/itwinui-react/src/utils/components/index.ts | 1 + 6 files changed, 24 insertions(+), 8 deletions(-) create mode 100644 .changeset/mean-hornets-attend.md create mode 100644 packages/itwinui-react/src/utils/components/FieldsetBase.tsx diff --git a/.changeset/mean-hornets-attend.md b/.changeset/mean-hornets-attend.md new file mode 100644 index 00000000000..8abdd08e8bd --- /dev/null +++ b/.changeset/mean-hornets-attend.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-css': minor +--- + +Added a new `iui-fieldset-base` class that removes default `
` styles. diff --git a/apps/css-workshop/src/pages/fieldset.astro b/apps/css-workshop/src/pages/fieldset.astro index ab5d3b3a638..4375fe0d01d 100644 --- a/apps/css-workshop/src/pages/fieldset.astro +++ b/apps/css-workshop/src/pages/fieldset.astro @@ -21,7 +21,7 @@ import Icon_ from '../components/Icon.astro';
-
+
General settings
@@ -76,7 +76,7 @@ import Icon_ from '../components/Icon.astro';
-
+
Advanced settings