Skip to content

Commit

Permalink
Rename Table -> TableView, skip some codemods for now (#7118)
Browse files Browse the repository at this point in the history
  • Loading branch information
@devongovett
devongovett authored Sep 30, 2024
1 parent e60fb42 commit 82f0c99
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 54 deletions.
38 changes: 19 additions & 19 deletions ...t-spectrum/s2/chromatic/Table.stories.tsx → ...ectrum/s2/chromatic/TableView.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@
*/

import {action} from '@storybook/addon-actions';
import {Cell, Column, Content, Heading, IllustratedMessage, Link, Row, Table, TableBody, TableHeader} from '../src';
import {Cell, Column, Content, Heading, IllustratedMessage, Link, Row, TableBody, TableHeader, TableView} from '../src';
import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
import type {Meta} from '@storybook/react';
import {SortDescriptor} from 'react-aria-components';
import {style} from '../style/spectrum-theme' with {type: 'macro'};
import {useAsyncList} from '@react-stately/data';
import {useState} from 'react';

const meta: Meta<typeof Table> = {
component: Table,
const meta: Meta<typeof TableView> = {
component: TableView,
parameters: {
chromaticProvider: {disableAnimations: true}
},
Expand All @@ -30,7 +30,7 @@ const meta: Meta<typeof Table> = {
export default meta;

const StaticTable = (args: any) => (
<Table aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
<TableView aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
<TableHeader>
<Column isRowHeader>Name</Column>
<Column>Type</Column>
Expand Down Expand Up @@ -61,7 +61,7 @@ const StaticTable = (args: any) => (
<Cell>Long long long long long long long cell</Cell>
</Row>
</TableBody>
</Table>
</TableView>
);

export const Example = {
Expand Down Expand Up @@ -104,7 +104,7 @@ let items = [
];

const DynamicTable = (args: any) => (
<Table aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
<TableView aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
<TableHeader columns={columns}>
{(column) => (
<Column width={150} minWidth={150} isRowHeader={column.isRowHeader}>{column.name}</Column>
Expand All @@ -119,7 +119,7 @@ const DynamicTable = (args: any) => (
</Row>
)}
</TableBody>
</Table>
</TableView>
);

export const Dynamic = {
Expand All @@ -145,7 +145,7 @@ function renderEmptyState() {
}

const EmptyStateTable = (args: any) => (
<Table aria-label="Empty state" {...args} styles={style({height: 320, width: 320})}>
<TableView aria-label="Empty state" {...args} styles={style({height: 320, width: 320})}>
<TableHeader columns={columns}>
{(column) => (
<Column minWidth={200} width={200} isRowHeader={column.isRowHeader}>{column.name}</Column>
Expand All @@ -154,7 +154,7 @@ const EmptyStateTable = (args: any) => (
<TableBody items={[]} renderEmptyState={renderEmptyState}>
{[]}
</TableBody>
</Table>
</TableView>
);

export const EmptyState = {
Expand All @@ -173,7 +173,7 @@ let dividerColumns = [

const ShowDividers = (args: any) => {
return (
<Table aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
<TableView aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
<TableHeader columns={dividerColumns}>
{(column) => (
<Column width={150} minWidth={150} isRowHeader={column.isRowHeader}>{column.name}</Column>
Expand All @@ -188,7 +188,7 @@ const ShowDividers = (args: any) => {
</Row>
)}
</TableBody>
</Table>
</TableView>
);
};

Expand All @@ -209,7 +209,7 @@ let alignColumns = [

const TextAlign = (args: any) => {
return (
<Table aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
<TableView aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
<TableHeader columns={alignColumns}>
{(column) => (
<Column width={150} minWidth={150} isRowHeader={column.isRowHeader} align={column?.align as 'start' | 'center' | 'end'}>{column.name}</Column>
Expand All @@ -224,7 +224,7 @@ const TextAlign = (args: any) => {
</Row>
)}
</TableBody>
</Table>
</TableView>
);
};

Expand Down Expand Up @@ -262,7 +262,7 @@ const OnLoadMoreTable = (args: any) => {
});

return (
<Table {...args} aria-label="Load more table" loadingState={list.loadingState} onLoadMore={list.loadMore} styles={style({width: 320, height: 320})}>
<TableView {...args} aria-label="Load more table" loadingState={list.loadingState} onLoadMore={list.loadMore} styles={style({width: 320, height: 320})}>
<TableHeader>
<Column id="name" isRowHeader>Name</Column>
<Column id="height">Height</Column>
Expand All @@ -280,7 +280,7 @@ const OnLoadMoreTable = (args: any) => {
</Row>
)}
</TableBody>
</Table>
</TableView>
);
};

Expand Down Expand Up @@ -340,7 +340,7 @@ const SortableTable = (args: any) => {
};

return (
<Table aria-label="sortable table" {...args} sortDescriptor={sortDescriptor} onSortChange={onSortChange} styles={style({height: 320})}>
<TableView aria-label="sortable table" {...args} sortDescriptor={sortDescriptor} onSortChange={onSortChange} styles={style({height: 320})}>
<TableHeader columns={sortcolumns}>
{(column) => (
<Column isRowHeader={column.isRowHeader} allowsSorting>{column.name}</Column>
Expand All @@ -355,7 +355,7 @@ const SortableTable = (args: any) => {
</Row>
)}
</TableBody>
</Table>
</TableView>
);
};

Expand Down Expand Up @@ -391,7 +391,7 @@ const SortableResizableTable = (args: any) => {
};

return (
<Table aria-label="sortable table" {...args} sortDescriptor={isSortable ? sortDescriptor : null} onSortChange={isSortable ? onSortChange : null} styles={style({width: 384, height: 320})}>
<TableView aria-label="sortable table" {...args} sortDescriptor={isSortable ? sortDescriptor : null} onSortChange={isSortable ? onSortChange : null} styles={style({width: 384, height: 320})}>
<TableHeader columns={args.columns}>
{(column: any) => (
<Column isRowHeader={column.isRowHeader} allowsSorting={column.isSortable} allowsResizing={column.allowsResizing} align={column.align}>{column.name}</Column>
Expand All @@ -406,7 +406,7 @@ const SortableResizableTable = (args: any) => {
</Row>
)}
</TableBody>
</Table>
</TableView>
);
};

Expand Down
10 changes: 5 additions & 5 deletions packages/@react-spectrum/s2/src/Table.tsx → ...ages/@react-spectrum/s2/src/TableView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,12 @@ interface S2TableProps {
}

// TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
export interface TableProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {
export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {
/** Spectrum-defined styles, returned by the `style()` macro. */
styles?: StylesPropWithHeight
}

let InternalTableContext = createContext<TableProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean}>({});
let InternalTableContext = createContext<TableViewProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean}>({});

const tableWrapper = style({
minHeight: 0,
Expand Down Expand Up @@ -251,7 +251,7 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
}
}

function Table(props: TableProps, ref: DOMRef<HTMLDivElement>) {
function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
let {
UNSAFE_style,
UNSAFE_className,
Expand Down Expand Up @@ -1106,5 +1106,5 @@ export function Row<T extends object>({id, columns, children, ...otherProps}: Ro
/**
* Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
*/
const _Table = forwardRef(Table);
export {_Table as Table};
const _TableView = forwardRef(TableView);
export {_TableView as TableView};
4 changes: 2 additions & 2 deletions packages/@react-spectrum/s2/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export {Skeleton, useIsSkeleton} from './Skeleton';
export {SkeletonCollection} from './SkeletonCollection';
export {StatusLight, StatusLightContext} from './StatusLight';
export {Switch, SwitchContext} from './Switch';
export {Table, TableHeader, TableBody, Row, Cell, Column} from './Table';
export {TableView, TableHeader, TableBody, Row, Cell, Column} from './TableView';
export {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
export {TagGroup, Tag, TagGroupContext} from './TagGroup';
export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextField';
Expand Down Expand Up @@ -124,7 +124,7 @@ export type {SkeletonProps} from './Skeleton';
export type {SkeletonCollectionProps} from './SkeletonCollection';
export type {StatusLightProps} from './StatusLight';
export type {SwitchProps} from './Switch';
export type {TableProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from './Table';
export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from './TableView';
export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs';
export type {TagGroupProps, TagProps} from './TagGroup';
export type {TextFieldProps, TextAreaProps} from './TextField';
Expand Down
Loading

1 comment on commit 82f0c99

@rspbot
Copy link

@rspbot rspbot commented on 82f0c99 Sep 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdaccio builds:
CRA Test App
NextJS Test App
RAC Tailwind Example
RAC Spectrum + Tailwind Example
S2 Parcel Example
S2 Webpack Example
CRA Test App Size
NextJS App Size
Publish stats
Size diff since last release
Docs
Storybook
S2 Storybook

Please sign in to comment.