Skip to content

Commit 5c09d9d

Browse files
rebeccaalpertrebeccaalpert
committed
Address feedback
1 parent 1e69ed1 commit 5c09d9d

File tree

9 files changed

+227
-102
lines changed

9 files changed

+227
-102
lines changed

‎src/components/AutoLinkHeader.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Flex, FlexItem, Content, Button } from '@patternfly/react-core'
2+
import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon'
3+
import { slugger } from '../utils/slugger'
4+
import { css } from '@patternfly/react-styles'
5+
6+
interface AutoLinkHeaderProps extends React.HTMLProps<HTMLDivElement> {
7+
id?: string
8+
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
9+
children: React.ReactNode | string
10+
metaText?: React.ReactNode | string
11+
className?: string
12+
}
13+
14+
export const AutoLinkHeader = ({
15+
id,
16+
headingLevel,
17+
children,
18+
metaText,
19+
className,
20+
}: AutoLinkHeaderProps) => {
21+
const slug = id || slugger(children)
22+
23+
return (
24+
<Flex
25+
alignItems={{ default: 'alignItemsCenter' }}
26+
spaceItems={{ default: 'spaceItemsSm' }}
27+
>
28+
<FlexItem>
29+
<Content
30+
id={slug}
31+
component={headingLevel}
32+
className={css('ws-heading', className)}
33+
tabIndex={-1}
34+
isEditorial
35+
>
36+
<Button
37+
href={`#${slug}`}
38+
component="a"
39+
className="ws-heading-anchor"
40+
tabIndex={-1}
41+
aria-hidden
42+
variant="plain"
43+
isInline
44+
>
45+
<LinkIcon
46+
className="ws-heading-anchor-icon"
47+
style={{ verticalAlign: 'middle' }}
48+
/>
49+
</Button>
50+
{children}
51+
</Content>
52+
</FlexItem>
53+
{metaText && <FlexItem>{metaText}</FlexItem>}
54+
</Flex>
55+
)
56+
}

‎src/components/CSSSearch.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ import { SearchInput } from '@patternfly/react-core'
33

44
interface CSSSearchProps {
55
getDebouncedFilteredRows: (value: string) => void
6+
'aria-label'?: string
7+
placeholder?: string
68
}
79

810
export const CSSSearch: React.FC<CSSSearchProps> = ({
911
getDebouncedFilteredRows,
12+
'aria-label': ariaLabel = 'Filter CSS Variables',
13+
placeholder = 'Filter CSS Variables',
1014
}: CSSSearchProps) => {
1115
const [filterValue, setFilterValue] = useState('')
1216

@@ -20,8 +24,8 @@ export const CSSSearch: React.FC<CSSSearchProps> = ({
2024

2125
return (
2226
<SearchInput
23-
aria-label="Filter CSS Variables"
24-
placeholder="Filter CSS Variables"
27+
aria-label={ariaLabel}
28+
placeholder={placeholder}
2529
value={filterValue}
2630
onChange={onFilterChange}
2731
/>

‎src/components/CSSTable.astro‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,33 @@
11
---
22
import { CSSTable as CSSTableComponent } from './CSSTable'
3+
import { AutoLinkHeader } from './AutoLinkHeader'
4+
import { Stack, StackItem } from '@patternfly/react-core'
35
46
const { cssPrefix } = Astro.props
57
---
68

79
{
8-
cssPrefix?.map((prefix: string, index: number) => (
9-
<CSSTableComponent key={index} cssPrefix={prefix} client:only="react" />
10-
))
10+
cssPrefix?.length > 0 && (
11+
<Stack hasGutter>
12+
<StackItem>
13+
<AutoLinkHeader
14+
headingLevel="h2"
15+
className="pf-v6-c-content--h2"
16+
id="css-variables"
17+
>
18+
CSS variables
19+
</AutoLinkHeader>
20+
</StackItem>
21+
22+
{cssPrefix?.map((prefix: string, index: number) => (
23+
<StackItem key={index}>
24+
<CSSTableComponent
25+
autoLinkHeader={cssPrefix.length > 1}
26+
cssPrefix={prefix}
27+
client:only="react"
28+
/>
29+
</StackItem>
30+
))}
31+
</Stack>
32+
)
1133
}

‎src/components/CSSTable.tsx‎

Lines changed: 76 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,7 @@ import LevelUpAltIcon from '@patternfly/react-icons/dist/esm/icons/level-up-alt-
55
import * as tokensModule from '@patternfly/react-tokens/dist/esm/componentIndex'
66
import React from 'react'
77
import { CSSSearch } from './CSSSearch'
8-
9-
export type ComponentProp = {
10-
isOpen: boolean
11-
cells: [
12-
string,
13-
{
14-
type: string
15-
key: string
16-
ref: any
17-
props: any
18-
},
19-
]
20-
details: {
21-
parent: number
22-
fullWidth: boolean
23-
data: any
24-
}
25-
}
8+
import { AutoLinkHeader } from './AutoLinkHeader'
269

2710
type Value = {
2811
name: string
@@ -47,16 +30,17 @@ type List = {
4730
}
4831

4932
type FilteredRows = {
50-
cells: (React.ReactNode | string | string[])[]
33+
cells: React.ReactNode[]
5134
isOpen?: boolean
5235
details?: { parent: number; fullWidth: boolean; data: React.ReactNode }
5336
}
5437

5538
interface CSSTableProps extends React.HTMLProps<HTMLDivElement> {
5639
cssPrefix: string
57-
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
5840
hideSelectorColumn?: boolean
5941
selector?: string
42+
debounceLength?: number
43+
autoLinkHeader?: boolean
6044
}
6145

6246
const isColorRegex = /^(#|rgb)/
@@ -96,9 +80,10 @@ const flattenList = (files: FileList[]) => {
9680

9781
export const CSSTable: React.FunctionComponent<CSSTableProps> = ({
9882
cssPrefix,
99-
headingLevel = 'h3',
10083
hideSelectorColumn = false,
10184
selector,
85+
debounceLength = 500,
86+
autoLinkHeader,
10287
}) => {
10388
const prefixToken = cssPrefix.replace('pf-v6-', '').replace(/-+/g, '_')
10489

@@ -182,9 +167,7 @@ export const CSSTable: React.FunctionComponent<CSSTableProps> = ({
182167
const [searchRE, setSearchRE] = useState<RegExp>(INITIAL_REGEX)
183168
const [rows, setRows] = useState(getFilteredRows(searchRE))
184169

185-
const SectionHeading = headingLevel
186-
//const publicProps = componentProps?.filter((prop) => !prop.isHidden)
187-
const hasPropsToRender = !(typeof cssPrefix === 'undefined')
170+
const hasPrefixToRender = !(typeof cssPrefix === 'undefined')
188171

189172
const onCollapse = (
190173
_event: React.MouseEvent,
@@ -208,75 +191,78 @@ export const CSSTable: React.FunctionComponent<CSSTableProps> = ({
208191
const newSearchRE = new RegExp(value, 'i')
209192
setSearchRE(newSearchRE)
210193
setRows(getFilteredRows(newSearchRE))
211-
}, 500)
194+
}, debounceLength)
212195

213196
return (
214-
<div>
215-
<SectionHeading>CSS variables</SectionHeading>
216-
<Stack hasGutter>
217-
{hasPropsToRender && (
218-
<>
219-
<CSSSearch getDebouncedFilteredRows={getDebouncedFilteredRows} />
220-
<Table
221-
variant="compact"
222-
aria-label={`CSS Variables prefixed with ${cssPrefix}`}
223-
>
224-
<Thead>
225-
<Tr>
226-
{!hideSelectorColumn && (
227-
<React.Fragment>
228-
<Th screenReaderText="Expand or collapse column" />
229-
<Th>Selector</Th>
230-
</React.Fragment>
231-
)}
232-
<Th>Variable</Th>
233-
<Th>Value</Th>
234-
</Tr>
235-
</Thead>
236-
{!hideSelectorColumn ? (
237-
rows.map((row, rowIndex: number) => (
238-
<Tbody key={rowIndex} isExpanded={row.isOpen}>
239-
<Tr>
240-
<Td
241-
expand={
242-
row.details
243-
? {
244-
rowIndex,
245-
isExpanded: row.isOpen || false,
246-
onToggle: onCollapse,
247-
expandId: `css-vars-expandable-toggle-${cssPrefix}`,
248-
}
249-
: undefined
250-
}
251-
/>
252-
<Td dataLabel="Selector">{row.cells[0]}</Td>
253-
<Td dataLabel="Variable">{row.cells[1]}</Td>
254-
<Td dataLabel="Value">{row.cells[2]}</Td>
255-
</Tr>
256-
{row.details ? (
257-
<Tr isExpanded={row.isOpen}>
258-
{!row.details.fullWidth ? <Td /> : null}
259-
<Td dataLabel="Selector" colSpan={5}>
260-
{row.details.data}
261-
</Td>
262-
</Tr>
263-
) : null}
264-
</Tbody>
265-
))
266-
) : (
267-
<Tbody>
268-
{rows.map((row, rowIndex: number) => (
269-
<Tr key={rowIndex}>
270-
<Td dataLabel="Variable">{row.cells[0]}</Td>
271-
<Td dataLabel="Value">{row.cells[1]}</Td>
197+
<Stack hasGutter>
198+
{hasPrefixToRender && (
199+
<>
200+
{autoLinkHeader && (
201+
<AutoLinkHeader
202+
headingLevel="h3"
203+
className="pf-v6-u-mt-lg pf-v6-u-mb-md"
204+
>{`Prefixed with '${cssPrefix}'`}</AutoLinkHeader>
205+
)}
206+
<CSSSearch getDebouncedFilteredRows={getDebouncedFilteredRows} />
207+
<Table
208+
variant="compact"
209+
aria-label={`CSS Variables prefixed with ${cssPrefix}`}
210+
>
211+
<Thead>
212+
<Tr>
213+
{!hideSelectorColumn && (
214+
<React.Fragment>
215+
<Th screenReaderText="Expand or collapse column" />
216+
<Th>Selector</Th>
217+
</React.Fragment>
218+
)}
219+
<Th>Variable</Th>
220+
<Th>Value</Th>
221+
</Tr>
222+
</Thead>
223+
{!hideSelectorColumn ? (
224+
rows.map((row, rowIndex: number) => (
225+
<Tbody key={rowIndex} isExpanded={row.isOpen}>
226+
<Tr>
227+
<Td
228+
expand={
229+
row.details
230+
? {
231+
rowIndex,
232+
isExpanded: row.isOpen || false,
233+
onToggle: onCollapse,
234+
expandId: `css-vars-expandable-toggle-${cssPrefix}`,
235+
}
236+
: undefined
237+
}
238+
/>
239+
<Td dataLabel="Selector">{row.cells[0]}</Td>
240+
<Td dataLabel="Variable">{row.cells[1]}</Td>
241+
<Td dataLabel="Value">{row.cells[2]}</Td>
242+
</Tr>
243+
{row.details ? (
244+
<Tr isExpanded={row.isOpen}>
245+
{!row.details.fullWidth ? <Td /> : null}
246+
<Td dataLabel="Selector" colSpan={5}>
247+
{row.details.data}
248+
</Td>
272249
</Tr>
273-
))}
250+
) : null}
274251
</Tbody>
275-
)}
276-
</Table>
277-
</>
278-
)}
279-
</Stack>
280-
</div>
252+
))
253+
) : (
254+
<Tbody>
255+
{rows.map((row, rowIndex: number) => (
256+
<Tr key={rowIndex}>
257+
<Td dataLabel="Variable">{row.cells[0]}</Td>
258+
<Td dataLabel="Value">{row.cells[1]}</Td>
259+
</Tr>
260+
))}
261+
</Tbody>
262+
)}
263+
</Table>
264+
</>
265+
)}
266+
</Stack>
281267
)
282268
}

‎src/pages/[section]/[...page].astro‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import { getCollection, render } from 'astro:content'
3-
import { Title } from '@patternfly/react-core'
3+
import { Title, Stack, StackItem } from '@patternfly/react-core'
44
import MainLayout from '../../layouts/Main.astro'
55
import { content } from '../../content'
66
import { kebabCase } from 'change-case'
@@ -45,6 +45,12 @@ if (section === 'components') {
4545
)
4646
}
4747
<Content />
48-
<PropsTables propComponents={propComponents} server:defer />
49-
<CSSTable cssPrefix={cssPrefix} server:defer />
48+
<Stack hasGutter>
49+
<StackItem>
50+
<PropsTables propComponents={propComponents} server:defer />
51+
</StackItem>
52+
<StackItem>
53+
<CSSTable cssPrefix={cssPrefix} server:defer />
54+
</StackItem>
55+
</Stack>
5056
</MainLayout>

‎src/pages/[section]/[page]/[...tab].astro‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
Title,
55
PageSection,
66
Content as PFContent,
7+
Stack,
8+
StackItem,
79
} from '@patternfly/react-core'
810
import MainLayout from '../../../layouts/Main.astro'
911
import { content } from '../../../content'
@@ -133,7 +135,13 @@ const currentPath = Astro.url.pathname
133135
LiveExample,
134136
}}
135137
/>
136-
<PropsTables propComponents={propComponents} server:defer />
137-
<CSSTable cssPrefix={cssPrefix} server:defer />
138+
<Stack hasGutter>
139+
<StackItem>
140+
<PropsTables propComponents={propComponents} server:defer />
141+
</StackItem>
142+
<StackItem>
143+
<CSSTable cssPrefix={cssPrefix} server:defer />
144+
</StackItem>
145+
</Stack>
138146
</PageSection>
139147
</MainLayout>

0 commit comments

Comments
 (0)