Skip to content

Commit 5716aea

Browse files
hbuchelHeather Buchel
hbuchel
and
Heather Buchel
authored
fix(docs): mobilize css classes tables (#2220)
* fix(docs): mobilize css classes tables Co-authored-by: Heather Buchel <[email protected]>
1 parent 6d53bef commit 5716aea

File tree

3 files changed

+109
-58
lines changed

3 files changed

+109
-58
lines changed

‎docs/src/components/ComponentClassTable.tsx‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react';
22
import {
33
Table,
44
ComponentClassObject,
5-
View,
65
TableRow,
76
TableBody,
87
TableHead,
@@ -19,27 +18,37 @@ export const ComponentClassTable = ({ componentName }) => {
1918
value.components.includes(componentName)
2019
);
2120
})
22-
.map((value: any) => (
21+
.map((value: { className: string; description?: string }) => (
2322
<TableRow key={value.className}>
2423
<TableCell>
25-
<code>{value.className}</code>
24+
<span className="docs-responsive-table__label" aria-hidden="true">
25+
Class
26+
</span>
27+
<span className="docs-responsive-table__value">
28+
<code>{value.className}</code>
29+
</span>
30+
</TableCell>
31+
<TableCell>
32+
<span className="docs-responsive-table__label" aria-hidden="true">
33+
Description
34+
</span>
35+
<span className="docs-responsive-table__value">
36+
{value.description}
37+
</span>
2638
</TableCell>
27-
<TableCell>{value.description}</TableCell>
2839
</TableRow>
2940
));
3041
}, [componentName]);
3142

3243
return (
33-
<View className="docs-css-classes">
34-
<Table variation="bordered">
35-
<TableHead>
36-
<TableRow>
37-
<TableCell as="th">Class</TableCell>
38-
<TableCell as="th">Description</TableCell>
39-
</TableRow>
40-
</TableHead>
41-
<TableBody>{targetClasses}</TableBody>
42-
</Table>
43-
</View>
44+
<Table variation="bordered" size="small" className="docs-responsive-table">
45+
<TableHead>
46+
<TableRow>
47+
<TableCell as="th">Class</TableCell>
48+
<TableCell as="th">Description</TableCell>
49+
</TableRow>
50+
</TableHead>
51+
<TableBody>{targetClasses}</TableBody>
52+
</Table>
4453
);
4554
};

‎docs/src/components/ComponentVariableTable.tsx‎

Lines changed: 20 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import * as React from 'react';
2-
import {
3-
Table,
4-
View,
5-
TableRow,
6-
TableCell,
7-
TableBody,
8-
useTheme,
9-
} from '@aws-amplify/ui-react';
2+
import { Alert, Grid, useTheme } from '@aws-amplify/ui-react';
103

114
function extractClasses(themeObject) {
125
if (!themeObject || typeof themeObject !== 'object') return [];
@@ -24,39 +17,25 @@ function extractClasses(themeObject) {
2417

2518
export const ComponentVariableTable = ({ componentName }) => {
2619
const { tokens } = useTheme();
27-
const variableNames = React.useMemo(() => {
28-
const variableNames = extractClasses(
29-
tokens?.components?.[componentName]
30-
).sort();
31-
let tableRows = [];
32-
if (variableNames.length) {
33-
for (let i = 0; i < variableNames.length / 2; i++) {
34-
const variableOne = variableNames[i * 2];
35-
const variableTwo = variableNames[i * 2 + 1];
36-
tableRows.push(
37-
<TableRow key={`${variableOne}-${variableTwo || ''}`}>
38-
<TableCell>
39-
<code>{variableOne}</code>
40-
</TableCell>
41-
{variableTwo && (
42-
<TableCell>
43-
<code>{variableTwo}</code>
44-
</TableCell>
45-
)}
46-
</TableRow>
47-
);
48-
}
49-
} else {
50-
return 'No variables available for this component';
51-
}
52-
return tableRows;
53-
}, [componentName]);
20+
const variableNames = extractClasses(
21+
tokens?.components?.[componentName]
22+
).sort();
5423

55-
return (
56-
<View className="docs-css-variables">
57-
<Table variation="bordered">
58-
<TableBody>{variableNames}</TableBody>
59-
</Table>
60-
</View>
24+
return variableNames.length > 0 ? (
25+
<Grid
26+
className="docs-grid-bordered"
27+
as="ul"
28+
templateColumns={{ base: '1fr', medium: '1fr 1fr' }}
29+
>
30+
{variableNames.map((name) => {
31+
return (
32+
<li key={name}>
33+
<code>{name}</code>
34+
</li>
35+
);
36+
})}
37+
</Grid>
38+
) : (
39+
<Alert>No variables available for this component</Alert>
6140
);
6241
};

‎docs/src/styles/docs/styleTable.scss‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,72 @@
1+
@import 'variables';
2+
13
.docs-component-styles {
24
width: 100%;
3-
margin-bottom: var(--amplify-space-large);
45
overflow: auto;
5-
66
pre {
77
white-space: pre-wrap;
88
}
99
}
10+
11+
.docs-grid-bordered {
12+
border: solid var(--amplify-colors-border-tertiary);
13+
border-width: var(--amplify-border-widths-small) 0 0 var(--amplify-border-widths-small);
14+
li {
15+
list-style: none;
16+
padding: var(--amplify-space-small);
17+
font-size: var(--amplify-font-sizes-small);
18+
border: solid var(--amplify-colors-border-tertiary);
19+
border-width: 0 var(--amplify-border-widths-small) var(--amplify-border-widths-small) 0;
20+
}
21+
}
22+
23+
.docs-responsive-table__label {
24+
display: none;
25+
@media (max-width: $breakpoint-medium) {
26+
padding: var(--amplify-space-xxs);
27+
background: var(--amplify-colors-neutral-10);
28+
flex: 0 0 6rem;
29+
display: flex;
30+
align-items: center;
31+
color: var(--amplify-colors-font-tertiary);
32+
}
33+
@media (max-width: $breakpoint-small) {
34+
display: none;
35+
}
36+
}
37+
38+
@media (max-width: $breakpoint-medium) {
39+
.docs-responsive-table {
40+
display: block;
41+
thead, tr, tbody {
42+
display: block;
43+
}
44+
thead {
45+
/* We can't `display: none` a thead or SR won't recognize it */
46+
height: 0;
47+
overflow: hidden;
48+
}
49+
td {
50+
padding: 0;
51+
display: flex;
52+
align-items: stretch;
53+
&:not(:last-child) {
54+
border-bottom: var(--amplify-border-widths-small) solid var(--amplify-colors-border-tertiary);
55+
}
56+
}
57+
tr {
58+
border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
59+
margin-block-end: var(--amplify-space-small);
60+
}
61+
}
62+
63+
.docs-responsive-table__value {
64+
display: block;
65+
flex: 0 1 auto;
66+
max-width: 100%;
67+
overflow: auto;
68+
padding: var(--amplify-space-xxs);
69+
}
70+
}
71+
72+

0 commit comments

Comments
 (0)