Skip to content

Commit 6dac73a

Browse files
mattnoltingmattnolting
authored
feat(CC-batch-4): added batch 4 (#11830)
* feat(CC-batch-4): batch 4 * feat(CC-batch-4): moved directory, updated for review * feat(CC-batch-4): resolved lint errors * feat(CC-batch-4): updated props and comments * feat(CC-batch-4): updated dual list * feat(CC-batch-4): drawer and divider notes * feat(CC-batch-4): removed isCompact from row * feat(CC-batch-4): updated dual list uris * feat(CC-batch-4): removed unneccesary props * feat(CC-batch-4): updated panel content as prop * feat(CC-batch-4): removed dualListSelectorMain * feat(CC-batch-4): updated required props * feat(CC-batch-4): verification complete * feat(CC-batch-4): removed unnecessary description list files * feat(CC-batch-4): review-athon round 1 followup * feat(CC-batch-4): review-athon round 1 followup * feat(CC-batch-4): review-athon round 2 followup * feat(CC-batch-4): review-athon round 2 followup * feat(CC-batch-4): remove data list, misconfigured * feat(CC-batch-4): review-athon round 2 followup * feat(CC-batch-4): review-athon round 2 followup * feat(CC-batch-4): review-athon round 2 followup * feat(CC-batch-4): review-athon round 3 followup * feat(CC-batch-4): review-athon round 3 followup * feat(CC-batch-4): preparing rebase * feat(CC-batch-4): group review 4 followup * feat(CC-batch-4): group review 5 updates * feat(CC-batch-4): group review 5 updates * feat(CC-batch-4): group review 6 updates
1 parent 3bdab28 commit 6dac73a

19 files changed

+726
-5
lines changed

‎packages/code-connect/components/DataList/DataList.figma.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import figma from '@figma/code-connect';
2+
import { DataList } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: Separate examples, rename files to match their react counterparts.
5+
// Documentation for DataList can be found at https://www.patternfly.org/components/data-list
6+
7+
figma.connect(
8+
DataList,
9+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-80542',
10+
{
11+
props: {
12+
// enum
13+
isCompact: figma.enum('Size', { Compact: true }),
14+
15+
children: figma.children('*')
16+
},
17+
example: (props) => (
18+
<DataList aria-label="DataList example" isCompact={props.isCompact}>
19+
{props.children}
20+
</DataList>
21+
)
22+
}
23+
);

‎packages/code-connect/components/DataList/_1BuildItYourselfBasicRows.figma.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import figma from '@figma/code-connect';
2+
import { DataListItem, DataListItemRow } from '@patternfly/react-core';
3+
4+
figma.connect(
5+
DataListItemRow,
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-69488&m=dev',
7+
{
8+
props: {
9+
children: figma.children('*')
10+
},
11+
example: (props) => (
12+
// aria-labelledby should point to an ID within the DataListItemRow/DataListItemCell
13+
<DataListItem aria-labelledby="child-text-id">
14+
<DataListItemRow rowid="<row-id>">{props.children}</DataListItemRow>
15+
</DataListItem>
16+
)
17+
}
18+
);

‎packages/code-connect/components/DataList/_1BuildItYourselfClickableRows.figma.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import figma from '@figma/code-connect';
2+
import { DataListItem, DataListItemRow } from '@patternfly/react-core';
3+
4+
// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list
5+
6+
figma.connect(
7+
DataListItemRow,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-96947',
9+
{
10+
props: {
11+
children: figma.children('*')
12+
},
13+
example: (props) => (
14+
// aria-labelledby should point to an ID within the DataListItemRow/DataListItemCell
15+
<DataListItem aria-labelledby="child-text-id">
16+
<DataListItemRow rowid="<row-id>">{props.children}</DataListItemRow>
17+
</DataListItem>
18+
)
19+
}
20+
);

‎packages/code-connect/components/DataList/_1BuildItYourselfDraggableRows.figma.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import figma from '@figma/code-connect';
2+
import { DataList } from '@patternfly/react-core';
3+
4+
// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list
5+
// This variant has been refactored to use the DragDropSort component.
6+
// In order to use this variant, you must wrap the DataList component in a DragDropSort component.
7+
8+
figma.connect(
9+
DataList,
10+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=19618-55289',
11+
{
12+
example: () =>
13+
'Draggable DataList variant has been refactored to use the DragDropSort component. The design is the same, but the implementation is different. This component variant requires refactoring to work within the new context. For more information, see the example at https://www.patternfly.org/components/data-list/#draggable.'
14+
// Code example:
15+
// <DragDropSort
16+
// items={items}
17+
// onDrop={(_, newItems) => {
18+
// setItems(newItems);
19+
// }}
20+
// variant="DataList"
21+
// overlayProps={{ isCompact: true }}
22+
// >
23+
// <DataList aria-label="draggable data list example" isCompact {...props} />
24+
// </DragDropSort>
25+
}
26+
);

‎packages/code-connect/components/DataList/_2BaseComponentsActionCell.figma.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import figma from '@figma/code-connect';
2+
import { DataListAction } from '@patternfly/react-core';
3+
4+
// Documentation for DataListItemRow can be found at https://www.patternfly.org/components/data-list
5+
6+
figma.connect(
7+
DataListAction,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-33965',
9+
{
10+
example: () => (
11+
<DataListAction aria-labelledby="item1 action1" id="action1" aria-label="Actions">
12+
'Action'
13+
</DataListAction>
14+
)
15+
}
16+
);

‎packages/code-connect/components/DataList/_2BaseComponentsContentCell.figma.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import figma from '@figma/code-connect';
2+
import { Icon, DataListCell, DataListItem, DataListItemCells, DataListItemRow } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: Either name layers uniquely or create a dataListCell component to house
5+
// Documentation for DataList can be found at https://www.patternfly.org/components/data-list
6+
7+
figma.connect(
8+
DataListCell,
9+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-33934',
10+
{
11+
props: {
12+
showDescriptionText: figma.boolean('Show description text'),
13+
14+
// enum
15+
isIcon: figma.enum('Type', {
16+
'Filled - Plain text': true
17+
}),
18+
isFilled: figma.enum('Type', {
19+
'Filled - Plain text': true,
20+
'Filled - Link text': true
21+
}),
22+
23+
primaryContent: 'Main content',
24+
secondaryContent: 'Second content block'
25+
},
26+
example: (props) => (
27+
<DataListItem aria-labelledby="item1">
28+
<DataListItemRow>
29+
<DataListItemCells
30+
dataListCells={[
31+
<DataListCell isIcon={true} key="icon-content">
32+
<Icon name="info" />
33+
</DataListCell>,
34+
<DataListCell key="primary-content">
35+
<span id="item1">{props.primaryContent}</span>
36+
</DataListCell>,
37+
<DataListCell key="secondary-content">{props.secondaryContent}</DataListCell>
38+
]}
39+
/>
40+
</DataListItemRow>
41+
</DataListItem>
42+
)
43+
}
44+
);

‎packages/code-connect/components/DataList/_2BaseComponentsControlCell.figma.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
// DataListAction,
4+
DataListCheck,
5+
DataListControl,
6+
DataListToggle
7+
} from '@patternfly/react-core';
8+
9+
// TODO: 2. Base Components/Control cell - These cells need unique names. Either create components for DataListCell,
10+
// DataListToggle, DataListDragButton, DataListAction, DataListCheck
11+
// These component specifics are unreachable unless separated into their own entities
12+
// Documentation for DataListControl can be found at https://www.patternfly.org/components/data-list
13+
14+
// const selectableCell = {
15+
// <DataListCheck id="ex1-item1" aria-labelledby="ex1-item1" name="ex1-item1" />
16+
// return (
17+
// <>
18+
// {props.isSelectable}
19+
// {props.isExpandable}
20+
// {props.isDraggable}
21+
// <DataListAction aria-labelledby="item1 action1" id="action1" aria-label="Actions">
22+
// {props.children}
23+
// </DataListAction>
24+
// </>
25+
// );
26+
// };
27+
28+
figma.connect(
29+
DataListControl,
30+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6596-34013',
31+
{
32+
props: {
33+
isExpandable: figma.boolean('Row expansion', {
34+
true: <DataListToggle onClick={() => {}} isExpanded={false} id="toggle1" aria-controls="expand1" />,
35+
false: undefined
36+
}),
37+
isSelectable: figma.boolean('Row select', {
38+
true: <DataListCheck id="check-item1" aria-labelledby="item1" name="item1" />,
39+
false: undefined
40+
})
41+
},
42+
example: (props) => (
43+
<>
44+
{props.isSelectable}
45+
{props.isExpandable}
46+
</>
47+
)
48+
}
49+
);

‎packages/code-connect/components/DescriptionList/DescriptionList.figma.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { DescriptionList } from '@patternfly/react-core';
2+
import figma from '@figma/code-connect';
3+
4+
// Documentation for DescriptionList can be found at https://www.patternfly.org/components/description-list
5+
6+
figma.connect(
7+
DescriptionList,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3946',
9+
{
10+
props: {
11+
// enum
12+
isCompact: figma.enum('Spacing', { Compact: true }),
13+
isFluid: figma.enum('Orientation', { 'Horizontal - Fluid': true }),
14+
isHorizontal: figma.enum('Orientation', {
15+
'Horizontal - Fixed': true,
16+
'Horizontal - Fluid': true
17+
}),
18+
19+
children: figma.children('Description list item')
20+
},
21+
example: (props) => (
22+
<DescriptionList isFluid={props.isFluid} isCompact={props.isCompact} isHorizontal={props.isHorizontal}>
23+
{props.children}
24+
</DescriptionList>
25+
)
26+
}
27+
);

‎packages/code-connect/components/DescriptionList/DescriptionListInCard.figma.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import figma from '@figma/code-connect';
2+
import { Card, DescriptionList, DescriptionListTerm, DescriptionListDescription } from '@patternfly/react-core';
3+
4+
// Note: DescriptionList displaySize prop is set by displaySize.
5+
// Note: DescriptionList label and description are not dynamic. DescriptionList list label composition doesn't currently align with the React component.
6+
// Note: DescriptionListLabel requires updates to the React component to support dynamic composition.
7+
// TODO: DESIGN: Separate card and description list size properties.
8+
// Documentation for DescriptionList can be found at https://www.patternfly.org/components/description-list-in-card
9+
10+
figma.connect(
11+
DescriptionList,
12+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4421-28234&m=dev',
13+
{
14+
props: {
15+
displaySize: figma.enum('Card size', {
16+
Small: 'default',
17+
Default: 'lg',
18+
Large: '2xl'
19+
}),
20+
isHorizontal: figma.enum('Orientation', { Horizontal: true })
21+
},
22+
example: (props) => (
23+
<DescriptionList isHorizontal={props.isHorizontal} displaySize={props.displaySize}>
24+
<Card component="div">
25+
<DescriptionListTerm>Input label</DescriptionListTerm>
26+
<DescriptionListDescription>Description list item</DescriptionListDescription>
27+
</Card>
28+
</DescriptionList>
29+
)
30+
}
31+
);

‎packages/code-connect/components/DescriptionList/DescriptionListItem.figma.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import figma from '@figma/code-connect';
2+
import { DescriptionListGroup, DescriptionListDescription } from '@patternfly/react-core';
3+
4+
// Documentation for DescriptionListGroup can be found at https://www.patternfly.org/components/description-list
5+
6+
figma.connect(
7+
DescriptionListGroup,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3571',
9+
{
10+
props: {
11+
term: figma.children('Term label'),
12+
description: figma.string('✏️ Content')
13+
},
14+
15+
example: (props) => (
16+
<DescriptionListGroup>
17+
{props.term}
18+
<DescriptionListDescription>{props.description}</DescriptionListDescription>
19+
</DescriptionListGroup>
20+
)
21+
}
22+
);

0 commit comments

Comments
 (0)