Skip to content

Commit 6910869

Browse files
domihustinovadomihustinova
committed
fix(Table): allow scope prop only for table header
1 parent 2cfdf1e commit 6910869

File tree

4 files changed

+36
-46
lines changed

4 files changed

+36
-46
lines changed

‎packages/orbit-components/src/Table/README.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ Table below contains all types of the props available in the Table component.
4040

4141
| Name | Type | Default | Description |
4242
| :----------- | :-------------- | :---------- | :----------------------------------------------------------------------------------------- |
43-
| **children** | `React.Node` | | The content of the Table, normally [`TableHead`](#tablehead) or [`TableHead`](#TableHead). |
43+
| **children** | `React.Node` | | The content of the Table, normally [`TableHead`](#tablehead) or [`TableBody`](#tablebody). |
4444
| compact | `boolean` | `false` | If `true`, the Table will have more compact styles. |
4545
| dataTest | `string` | | Optional prop for testing purposes. |
46-
| id | `string` | | Set `id` for `Table` |
46+
| id | `string` | | Set `id` for Table. |
4747
| striped | `boolean` | `true` | Functionality of table where every second line is grey |
4848
| type | [`enum`](#enum) | `"primary"` | The type of Table. |
4949

@@ -113,15 +113,15 @@ import TableCell from "@kiwicom/orbit-components/lib/Table/TableCell";
113113

114114
Table below contains all types of the props in TableCell component.
115115

116-
| Name | Type | Default | Description |
117-
| :------------ | :-------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
118-
| align | [`enum`](#enum) | `"left"` | The align of text in the TableCell. |
119-
| as | [`enum`](#enum) | `"td"` | possibility to render TableCell in different HTML |
120-
| children | `React.Node` | | The content of the TableCell. |
121-
| dataTest | `string` | | Optional prop for testing purposes. |
122-
| scope | [`enum`](#enum) | | The scope attribute identifies whether a table header is a column header or a row header. More about a11y reasons [here](https://webaim.org/techniques/tables/data) |
123-
| verticalAlign | [`enum`](#enum) | | The vertical align of the content in the TableCell. |
124-
| whiteSpace | [`enum`](#enum) | | The white-space setting of text in the TableCell. |
116+
| Name | Type | Default | Description |
117+
| :------------ | :-------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------- |
118+
| align | [`enum`](#enum) | `"left"` | The align of text in the TableCell. |
119+
| as | [`enum`](#enum) | `"td"` | Possibility to render TableCell in different HTML. |
120+
| children | `React.Node` | | The content of the TableCell. |
121+
| dataTest | `string` | | Optional prop for testing purposes. |
122+
| scope | [`enum`](#enum) | | Can be set only when `as="th"`. Identifies whether a table header is a column header or a row header. See the Accessibility tab. |
123+
| verticalAlign | [`enum`](#enum) | | The vertical align of the content in the TableCell. |
124+
| whiteSpace | [`enum`](#enum) | | The white-space setting of text in the TableCell. |
125125

126126
#### enum
127127

‎packages/orbit-components/src/Table/Table.stories.tsx

+4-20
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import * as React from "react";
22
import type { Meta, StoryObj } from "@storybook/react";
33

44
import { ALIGN_OPTIONS, WHITE_SPACE } from "./TableCell/consts";
5-
import { TYPE_OPTIONS, TYPE_AS } from "./consts";
5+
import { TYPE_OPTIONS } from "./consts";
66
import RenderInRtl from "../utils/rtl/RenderInRtl";
7+
import type { Props } from "./TableCell/types";
78

89
import Table, { TableFooter, TableHead, TableBody, TableRow, TableCell } from ".";
910

@@ -15,8 +16,7 @@ const tableRow = (
1516
</TableRow>
1617
);
1718

18-
type TablePropsAndCustomArgs = React.ComponentProps<typeof Table> &
19-
React.ComponentProps<typeof TableCell>;
19+
type TablePropsAndCustomArgs = React.ComponentProps<typeof Table> & Omit<Props, "as" | "scope">;
2020

2121
const meta: Meta<TablePropsAndCustomArgs> = {
2222
title: "Table",
@@ -50,7 +50,7 @@ export const Playground: Story = {
5050
<TableHead>
5151
<TableRow>
5252
{Array.from({ length: 4 }, (_, idx) => (
53-
<TableCell key={idx} {...args}>
53+
<TableCell as="th" scope="col" key={idx} {...args}>
5454
{children}
5555
</TableCell>
5656
))}
@@ -93,8 +93,6 @@ export const Playground: Story = {
9393
verticalAlign: "middle",
9494
whiteSpace: WHITE_SPACE.NOWRAP,
9595
children: "Lorem ipsum dolor sit amet",
96-
as: TYPE_AS.TD,
97-
scope: "col",
9896
},
9997

10098
argTypes: {
@@ -111,13 +109,6 @@ export const Playground: Story = {
111109
},
112110
// TableCell category
113111
children: { table: { category: "TableCell" } },
114-
scope: {
115-
options: ["col", "row", "colgroup", "rowgroup"],
116-
control: {
117-
type: "select",
118-
},
119-
table: { category: "TableCell" },
120-
},
121112
align: {
122113
options: Object.values(ALIGN_OPTIONS),
123114
control: {
@@ -139,13 +130,6 @@ export const Playground: Story = {
139130
},
140131
table: { category: "TableCell" },
141132
},
142-
as: {
143-
options: Object.values(TYPE_AS),
144-
control: {
145-
type: "select",
146-
},
147-
table: { category: "TableCell" },
148-
},
149133
},
150134
};
151135

‎packages/orbit-components/src/Table/TableCell/index.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,16 @@ const whitespaceStyles: Record<WhiteSpace, string> = {
2020
"pre-wrap": "whitespace-pre-wrap",
2121
};
2222

23-
const TableCell = ({
24-
align = ALIGN_OPTIONS.LEFT,
25-
scope,
26-
as: Component = TYPE_AS.TD,
27-
verticalAlign,
28-
whiteSpace,
29-
dataTest,
30-
children,
31-
}: Props) => {
23+
const TableCell = (props: Props) => {
24+
const {
25+
align = ALIGN_OPTIONS.LEFT,
26+
as: Component = TYPE_AS.TD,
27+
verticalAlign,
28+
whiteSpace,
29+
dataTest,
30+
children,
31+
} = props;
32+
3233
return (
3334
<Component
3435
className={cx(
@@ -40,7 +41,7 @@ const TableCell = ({
4041
(align === ALIGN_OPTIONS.END || align === ALIGN_OPTIONS.RIGHT) && "text-end",
4142
)}
4243
data-test={dataTest}
43-
scope={scope}
44+
scope={props.as === TYPE_AS.TH ? props.scope : undefined}
4445
>
4546
{children}
4647
</Component>

‎packages/orbit-components/src/Table/TableCell/types.d.ts

+10-5
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,20 @@
33
import type { SharedProps } from "../types";
44

55
export type Align = "start" | "end" | "left" | "center" | "right";
6-
export type As = "th" | "td";
76
export type Scope = "col" | "row" | "colgroup" | "rowgroup";
87
export type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
98
export type VerticalAlign = "baseline" | "middle" | "top" | "bottom";
109

11-
export interface Props extends SharedProps {
12-
readonly as?: As;
13-
readonly scope?: Scope;
10+
export type Props = SharedProps & {
1411
readonly align?: Align;
1512
readonly whiteSpace?: WhiteSpace;
1613
readonly verticalAlign?: VerticalAlign;
17-
}
14+
} & (
15+
| {
16+
readonly as?: "th";
17+
readonly scope?: Scope;
18+
}
19+
| {
20+
readonly as?: "td";
21+
}
22+
);

0 commit comments

Comments
 (0)