Skip to content

TableView CSF 3 update for FocusRing clipping #3934

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
snowystinger merged 8 commits into from
Feb 1, 2023
Merged

TableView CSF 3 update for FocusRing clipping #3934

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5c3b66e
TableView CSF 3 update
snowystinger Jan 19, 2023
85c9281
fix tests
snowystinger Jan 19, 2023
74f0681
fix widths for halo focus
snowystinger Jan 19, 2023
748688a
Merge branch 'main' into tableview-internal-halo-focus-rings
snowystinger Jan 19, 2023
bd91abf
review comments
snowystinger Jan 30, 2023
bbf311d
Merge branch 'main' into tableview-internal-halo-focus-rings
snowystinger Jan 30, 2023
d82958b
Merge branch 'main' into tableview-internal-halo-focus-rings
snowystinger Jan 30, 2023
e4bbdb5
Merge branch 'main' into tableview-internal-halo-focus-rings
LFDanLu Jan 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/@react-spectrum/table/src/TableView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ const DEFAULT_HEADER_HEIGHT = {
};

const DEFAULT_HIDE_HEADER_CELL_WIDTH = {
medium: 36,
large: 44
medium: 38,
large: 46
};

const ROW_HEIGHTS = {
Expand Down
4 changes: 2 additions & 2 deletions packages/@react-spectrum/table/stories/CRUDExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import React, {useState} from 'react';
import {TextField} from '@react-spectrum/textfield';
import {useListData} from '@react-stately/data';

export function CRUDExample() {
export function CRUDExample(props) {
let list = useListData({
initialItems: [
{id: 1, firstName: 'Sam', lastName: 'Smith', birthday: 'May 3'},
Expand All @@ -51,7 +51,7 @@ export function CRUDExample() {
<Item key="bulk-delete" aria-label="Delete selected items"><Delete /></Item>
}
</ActionGroup>
<TableView aria-label="People" width={500} height={300} selectionMode="multiple" isQuiet selectedKeys={list.selectedKeys} onSelectionChange={list.setSelectedKeys}>
<TableView aria-label="People" width={500} height={300} selectionMode="multiple" {...props} selectedKeys={list.selectedKeys} onSelectionChange={list.setSelectedKeys}>
<TableHeader>
<Column isRowHeader key="firstName">First Name</Column>
<Column isRowHeader key="lastName">Last Name</Column>
Expand Down
4 changes: 2 additions & 2 deletions packages/@react-spectrum/table/stories/HidingColumns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ let data = [
{id: 6, planName: 'Plan 6: $800k, MRI', audienceType: 'Demo+strategic', netBudget: '$800,000', targetOTP: '22.5%', reach: '11.5%'}
];

export function HidingColumns() {
export function HidingColumns(props) {
let [visibleColumns, setVisibleColumns] = React.useState(new Set(columns.map(c => c.key)));
let toggleColumn = (key) => {
let columns = new Set(visibleColumns);
Expand All @@ -53,7 +53,7 @@ export function HidingColumns() {
<Checkbox key={c.key} isSelected={visibleColumns.has(c.key)} onChange={() => toggleColumn(c.key)}>{c.title}</Checkbox>
)}
</Form>
<TableView aria-label="Table with hideable columns" width={900} height={500} isQuiet selectionMode="single">
<TableView aria-label="Table with hideable columns" width={900} height={500} selectionMode="single" {...props}>
<TableHeader columns={columns.filter(c => visibleColumns.has(c.key))}>
{column => <Column>{column.title}</Column>}
</TableHeader>
Expand Down
4 changes: 2 additions & 2 deletions packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ let data = [
{id: 6, planName: 'Plan 6: $800k, MRI', audienceType: 'Demo+strategic', netBudget: '$800,000', targetOTP: '22.5%', reach: '11.5%'}
];

export function HidingColumnsAllowsResizing() {
export function HidingColumnsAllowsResizing(props) {
let [visibleColumns, setVisibleColumns] = React.useState(new Set(columns.map(c => c.key)));
let toggleColumn = (key) => {
let columns = new Set(visibleColumns);
Expand All @@ -53,7 +53,7 @@ export function HidingColumnsAllowsResizing() {
<Checkbox key={c.key} isSelected={visibleColumns.has(c.key)} onChange={() => toggleColumn(c.key)}>{c.title}</Checkbox>
)}
</Form>
<TableView aria-label="Table with hideable columns" width={900} height={500} isQuiet selectionMode="single">
<TableView aria-label="Table with hideable columns" width={900} height={500} {...props}>
<TableHeader columns={columns.filter(c => visibleColumns.has(c.key))}>
{column => <Column allowsResizing={column.allowsResizing}>{column.title}</Column>}
</TableHeader>
Expand Down
Loading