Skip to content

Commit 1ef1f14

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-8): verification complete
1 parent 14f289b commit 1ef1f14

11 files changed

Lines changed: 199 additions & 70 deletions

File tree

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

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
11
import figma from '@figma/code-connect';
2-
import { Slider } from '@patternfly/react-core';
2+
import { Button, Slider } from '@patternfly/react-core';
3+
import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
4+
import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
5+
6+
// TODO: FIGMA: Define left/right actions
7+
// Documentation for Slider can be found at https://www.patternfly.org/components/slider
38

49
figma.connect(
510
Slider,
611
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3155-97956&t=IzSunfrnw18ti37Y-11',
712
{
813
props: {
914
// boolean
10-
leftAction: figma.boolean('Left action'),
15+
isInputVisible: figma.boolean('Value input'),
1116
minmaxValues: figma.boolean('Min/max values'),
12-
rightAction: figma.boolean('Right action'),
1317
valueInput: figma.boolean('Value input'),
14-
15-
// enum
16-
state: figma.enum('State', {
17-
Default: undefined,
18-
Active: 'active',
19-
Disabled: 'disabled',
20-
Hover: 'hover'
18+
startActions: figma.boolean('Left action', {
19+
true: <Button variant="plain" aria-label="Minus" onClick={onMinusClick} icon={<MinusIcon />} />,
20+
false: undefined
2121
}),
22+
endActions: figma.boolean('Right action', {
23+
true: <Button variant="plain" aria-label="Plus" onClick={onPlusClick} icon={<PlusIcon />} />,
24+
false: undefined
25+
}),
26+
// enum
27+
isActive: figma.enum('State', { Active: true }),
28+
isContinuous: figma.enum('Type', { Continuous: true }),
2229
isDisabled: figma.enum('State', { Disabled: true }),
23-
type: figma.enum('Type', {
24-
Continuous: 'continuous',
25-
Discrete: 'discrete'
26-
})
30+
showTicks: figma.enum('Type', { Discrete: true })
2731
},
2832
example: (props) => (
29-
// Documentation for Slider can be found at https://www.patternfly.org/components/slider
3033
<Slider
31-
areCustomStepsContinuous={props.type}
34+
areCustomStepsContinuous={props.isContinuous}
35+
isActive={props.isActive}
36+
isInputVisible={props.isInputVisible}
3237
isDisabled={props.isDisabled}
38+
max={200}
39+
step={50}
40+
value={100}
3341
showBoundaries={props.minmaxValues}
34-
showTicks={props.type}
42+
showTicks={props.showTicks}
43+
startActions={props.startActions}
44+
endActions={props.endActions}
3545
/>
3646
)
3747
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import figma from '@figma/code-connect';
22
import { Spinner } from '@patternfly/react-core';
33

4+
// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
5+
46
figma.connect(
57
Spinner,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-332&t=IzSunfrnw18ti37Y-11',
@@ -14,9 +16,6 @@ figma.connect(
1416
xl: 'xl'
1517
})
1618
},
17-
example: (props) => (
18-
// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
19-
<Spinner aria-label="Loading..." size={props.size} />
20-
)
19+
example: (props) => <Spinner aria-label="Loading..." size={props.size} />
2120
}
2221
);

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import figma from '@figma/code-connect';
22

3-
figma.connect(
4-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8034-8230&m=dev',
5-
{
6-
props: {
7-
// enum
8-
type: figma.enum('Type', {
9-
Overlay: 'overlay',
10-
Vertical: 'vertical'
11-
})
12-
},
13-
example: (props) => (
14-
// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
15-
<>{props.type}</>
16-
)
17-
}
18-
);
3+
// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
4+
5+
figma.connect('https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8034-8230', {
6+
props: {
7+
// enum
8+
type: figma.enum('Type', {
9+
Overlay: 'overlay',
10+
Vertical: 'vertical'
11+
})
12+
},
13+
example: (props) => <>{props.type}</>
14+
});

‎packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import figma from '@figma/code-connect';
22
import { Tabs } from '@patternfly/react-core';
33

4+
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
5+
46
figma.connect(
57
Tabs,
6-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6583&m=dev',
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6583',
79
{
810
props: {
911
children: figma.children('*'),

‎packages/code-connect/components/Tabs/HorizontalTab.figma.tsx‎

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,63 @@
11
import figma from '@figma/code-connect';
2-
import { Tab, TabTitleText, Timestamp } from '@patternfly/react-core';
2+
import { Tab, TabAction, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
3+
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4+
import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
5+
6+
// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
7+
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
38

49
figma.connect(
5-
Timestamp,
10+
Tab,
611
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6161',
712
{
813
props: {
914
// string
1015
tabText: figma.string('Tab Text'),
16+
// eventKey: figma.string('Event key'), // TODO: FIGMA: Add event key
17+
18+
// boolean
19+
actions: figma.boolean('Help button', {
20+
true: (ref: React.RefObject<HTMLDivElement>) => (
21+
<>
22+
<TabAction aria-label="Help action for tab" ref={ref}>
23+
<HelpIcon />
24+
</TabAction>
25+
{helpPopover('Help popover for tab')}
26+
</>
27+
),
28+
false: undefined
29+
}),
30+
onClose: figma.boolean('Close button', {
31+
true: () => {},
32+
false: undefined
33+
}),
34+
hasIcon: figma.boolean('Has icon', {
35+
true: (
36+
<TabTitleIcon>
37+
<UsersIcon />
38+
</TabTitleIcon>
39+
),
40+
false: undefined
41+
}),
1142

1243
// enum
13-
isDisabled: figma.enum('State', {
14-
Disabled: true
15-
})
44+
isDisabled: figma.enum('State', { Disabled: true })
1645
},
1746
example: (props) => (
1847
<Tab
19-
isDisabled={props.isDisabled}
48+
actions={props.actions}
49+
aria-label="Tab context"
2050
eventKey={0}
21-
title={<TabTitleText>{props.tabText}</TabTitleText>}
22-
aria-label="Default content"
51+
isDisabled={props.isDisabled}
52+
onClose={props.onClose}
53+
title={
54+
<>
55+
<TabTitleText>{props.tabText}</TabTitleText>
56+
{props.hasIcon}
57+
</>
58+
}
2359
>
24-
{props.tabText}
60+
{props.tabText} Content
2561
</Tab>
2662
)
2763
}

‎packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import figma from '@figma/code-connect';
22
import { Tabs } from '@patternfly/react-core';
33

4+
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
5+
46
figma.connect(
57
Tabs,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6503',
79
{
810
props: {
911
children: figma.children('*'),
1012
isBox: figma.enum('Type', {
11-
Boxed: false,
13+
Boxed: true,
1214
'Boxed Light': true
1315
})
1416
},
1517
example: (props) => (
16-
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
1718
<Tabs onSelect={() => {}} isBox={props.isBox} aria-label="Tabs example" role="region">
1819
{props.children}
1920
</Tabs>

‎packages/code-connect/components/Tabs/TabVertical.figma.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import figma from '@figma/code-connect';
2+
import { Tab, TabAction, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
3+
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4+
import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
5+
6+
// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
7+
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
8+
9+
figma.connect(
10+
Tab,
11+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6407',
12+
{
13+
props: {
14+
// string
15+
tabText: figma.string('Text'),
16+
17+
// boolean
18+
actions: figma.boolean('Help icon', {
19+
true: (ref: React.RefObject<HTMLDivElement>) => (
20+
<>
21+
<TabAction aria-label="Help action for tab" ref={ref}>
22+
<HelpIcon />
23+
</TabAction>
24+
{helpPopover(`Help popover for tab`)}
25+
</>
26+
),
27+
false: undefined
28+
}),
29+
onClose: figma.boolean('Close Icon', {
30+
true: () => {},
31+
false: undefined
32+
}),
33+
hasIcon: figma.boolean('Has icon', {
34+
true: (
35+
<TabTitleIcon>
36+
<UsersIcon />
37+
</TabTitleIcon>
38+
),
39+
false: undefined
40+
}),
41+
42+
// enum
43+
isDisabled: figma.enum('State', { Disabled: true })
44+
// eventKey: figma.string('Event key'), // TODO: FIGMA: Add event key
45+
},
46+
example: (props) => (
47+
<Tab
48+
eventKey={0}
49+
isDisabled={props.isDisabled}
50+
onClose={props.onClose}
51+
title={
52+
<>
53+
<TabTitleText>{props.tabText}</TabTitleText>
54+
{props.hasIcon}
55+
</>
56+
}
57+
>
58+
{props.tabText} Content
59+
</Tab>
60+
)
61+
}
62+
);

‎packages/code-connect/components/Tabs/VerticalTabs.figma.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
import figma from '@figma/code-connect';
22
import { Tabs } from '@patternfly/react-core';
33

4+
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
5+
46
figma.connect(
57
Tabs,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6656',
79
{
810
props: {
911
children: figma.children('*'),
12+
isExpandable: figma.enum('Type', {
13+
Expandable: {
14+
default: 'expandable'
15+
},
16+
false: undefined
17+
}),
1018
isBox: figma.enum('Type', {
1119
Boxed: true,
12-
'Boxed Light': true,
13-
'Inset Boxed': true
20+
'Boxed Light': true
1421
}),
1522
inset: figma.enum('Type', {
1623
Inset: { default: 'insetMd' },
1724
'Inset Boxed': { default: 'insetMd' }
1825
})
1926
},
2027
example: (props) => (
21-
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
22-
<Tabs isBox={props.isBox} isVertical={true} inset={props.inset} onSelect={() => {}} role="region">
28+
<Tabs isBox={props.isBox} isVertical={true} onSelect={() => {}} role="region">
2329
{props.children}
2430
</Tabs>
2531
)

‎packages/code-connect/components/TimeStamp/Timestamp.figma.tsx‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,48 @@
11
import figma from '@figma/code-connect';
2-
import { Timestamp } from '@patternfly/react-core';
2+
import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
3+
4+
// TODO: FIGMA: Refine intent, enum/dropdown options confuse date and time formats. They shoudd be separated
5+
// Documentation for Timestamp can be found at https://www.patternfly.org/components/timestamp
36

47
figma.connect(
58
Timestamp,
69
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7472-6718',
710
{
811
props: {
912
// string
10-
abbreviatedContent: figma.string('✏️ Abbreviated content'),
1113
defaultTimestampContent: figma.string('✏️ Default timestamp content'),
12-
numericContent: figma.string('✏️ Numeric content'),
13-
withoutDay: figma.string('✏️ Without day'),
14-
withoutTime: figma.string('✏️ Without time'),
1514

1615
// boolean
17-
tooltipUnderline: figma.boolean('With tooltip underline'),
16+
hasTooltip: figma.boolean('With tooltip underline', {
17+
true: {
18+
tooltip: { variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time (UTC)' }
19+
},
20+
false: undefined
21+
}),
1822

1923
// enum
20-
content: figma.enum('Format', {
21-
Default: figma.string('✏️ Default timestamp content'),
22-
'Without time': figma.string('✏️ Without time'),
23-
'Without day': figma.string('✏️ Without day'),
24-
Abbreviated: figma.string('✏️ Abbreviated content'),
25-
Numeric: figma.string('✏️ Numeric content')
24+
dateFormat: figma.enum('Format', {
25+
Default: 'full',
26+
'Without time': 'medium',
27+
'Without day': undefined,
28+
Abbreviated: 'short',
29+
Numeric: 'numeric'
30+
}),
31+
timeFormat: figma.enum('Format', {
32+
'Without time': undefined,
33+
Abbreviated: 'short',
34+
Numeric: 'numeric'
2635
}),
2736
children: figma.children('*')
2837
},
2938
example: (props) => (
30-
// Documentation for Timestamp can be found at https://www.patternfly.org/components/timestamp
31-
<Timestamp date={props.content} tooltip={props.tooltipUnderline} />
39+
<Timestamp
40+
date={props.defaultTimestampContent}
41+
timeFormat={props.timeFormat}
42+
dateFormat={props.dateFormat}
43+
dateContent={props.dateFormat}
44+
tooltip={props.hasTooltip}
45+
/>
3246
)
3347
}
3448
);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import figma from '@figma/code-connect';
22
import { ToggleGroup } from '@patternfly/react-core';
33

4+
// Documentation for ToggleGroup can be found at https://www.patternfly.org/components/toggle-group
5+
46
figma.connect(
57
ToggleGroup,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7644-56919',

0 commit comments

Comments
 (0)