Skip to content

Commit b1d9375

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-8): refactored toggle-group
1 parent 29274da commit b1d9375

File tree

10 files changed

+194
-197
lines changed

10 files changed

+194
-197
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
88

99
figma.connect(
1010
Slider,
11-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3155-97956&t=IzSunfrnw18ti37Y-11',
11+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=3155-97956',
1212
{
1313
props: {
1414
// boolean

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,15 @@ import { Spinner } from '@patternfly/react-core';
33

44
// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
55

6-
figma.connect(
7-
Spinner,
8-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-332&t=IzSunfrnw18ti37Y-11',
9-
{
10-
props: {
11-
// enum
12-
size: figma.enum('Size', {
13-
sm: 'sm',
14-
md: 'md',
15-
lg: 'lg',
16-
xl: 'xl'
17-
})
18-
},
19-
example: (props) => <Spinner aria-label="Loading..." size={props.size} />
20-
}
21-
);
6+
figma.connect(Spinner, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=790-332', {
7+
props: {
8+
// enum
9+
size: figma.enum('Size', {
10+
sm: 'sm',
11+
md: 'md',
12+
lg: 'lg',
13+
xl: 'xl'
14+
})
15+
},
16+
example: (props) => <Spinner aria-label="Loading..." size={props.size} />
17+
});

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

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,17 @@ import { Tabs } from '@patternfly/react-core';
33

44
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
55

6-
figma.connect(
7-
Tabs,
8-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6583',
9-
{
10-
props: {
11-
children: figma.children('*'),
12-
isBox: figma.enum('Type', {
13-
Boxed: true,
14-
'Boxed Light': true
15-
})
16-
},
17-
example: (props) => (
18-
<Tabs
19-
aria-label="Horizontal subtabs example"
20-
isSubtab={true}
21-
isBox={props.isBox}
22-
onSelect={() => {}}
23-
role="region"
24-
>
25-
{props.children}
26-
</Tabs>
27-
)
28-
}
29-
);
6+
figma.connect(Tabs, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=14327-6583', {
7+
props: {
8+
children: figma.children('*'),
9+
isBox: figma.enum('Type', {
10+
Boxed: true,
11+
'Boxed Light': true
12+
})
13+
},
14+
example: (props) => (
15+
<Tabs aria-label="Horizontal subtabs example" isSubtab={true} isBox={props.isBox} onSelect={() => {}} role="region">
16+
{props.children}
17+
</Tabs>
18+
)
19+
});

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

Lines changed: 50 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,55 @@ import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
66
// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
77
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
88

9-
figma.connect(
10-
Tab,
11-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6161',
12-
{
13-
props: {
14-
// string
15-
tabText: figma.string('Tab Text'),
16-
// eventKey: figma.string('Event key'), // TODO: DESIGN: Add event key
9+
figma.connect(Tab, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=14327-6161', {
10+
props: {
11+
// string
12+
tabText: figma.string('Tab Text'),
13+
// eventKey: figma.string('Event key'), // TODO: DESIGN: Add event key
1714

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-
}),
15+
// boolean
16+
actions: figma.boolean('Help button', {
17+
true: (ref: React.RefObject<HTMLDivElement>) => (
18+
<>
19+
<TabAction aria-label="Help action for tab" ref={ref}>
20+
<HelpIcon />
21+
</TabAction>
22+
{helpPopover('Help popover for tab')}
23+
</>
24+
),
25+
false: undefined
26+
}),
27+
onClose: figma.boolean('Close button', {
28+
true: () => {},
29+
false: undefined
30+
}),
31+
hasIcon: figma.boolean('Has icon', {
32+
true: (
33+
<TabTitleIcon>
34+
<UsersIcon />
35+
</TabTitleIcon>
36+
),
37+
false: undefined
38+
}),
4239

43-
// enum
44-
isDisabled: figma.enum('State', { Disabled: true })
45-
},
46-
example: (props) => (
47-
<Tab
48-
actions={props.actions}
49-
aria-label="Tab context"
50-
eventKey={0}
51-
isDisabled={props.isDisabled}
52-
onClose={props.onClose}
53-
title={
54-
<>
55-
<TabTitleText>{props.tabText}</TabTitleText>
56-
{props.hasIcon}
57-
</>
58-
}
59-
>
60-
{props.tabText} Content
61-
</Tab>
62-
)
63-
}
64-
);
40+
// enum
41+
isDisabled: figma.enum('State', { Disabled: true })
42+
},
43+
example: (props) => (
44+
<Tab
45+
actions={props.actions}
46+
aria-label="Tab context"
47+
eventKey={0}
48+
isDisabled={props.isDisabled}
49+
onClose={props.onClose}
50+
title={
51+
<>
52+
<TabTitleText>{props.tabText}</TabTitleText>
53+
{props.hasIcon}
54+
</>
55+
}
56+
>
57+
{props.tabText} Content
58+
</Tab>
59+
)
60+
});

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

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,17 @@ import { Tabs } from '@patternfly/react-core';
33

44
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
55

6-
figma.connect(
7-
Tabs,
8-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6503',
9-
{
10-
props: {
11-
children: figma.children('*'),
12-
isBox: figma.enum('Type', {
13-
Boxed: true,
14-
'Boxed Light': true
15-
})
16-
},
17-
example: (props) => (
18-
<Tabs activeKey="activeTabKey" aria-label="Tabs example" isBox={props.isBox} onSelect={() => {}} role="region">
19-
{props.children}
20-
</Tabs>
21-
)
22-
}
23-
);
6+
figma.connect(Tabs, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=14327-6503', {
7+
props: {
8+
children: figma.children('*'),
9+
isBox: figma.enum('Type', {
10+
Boxed: true,
11+
'Boxed Light': true
12+
})
13+
},
14+
example: (props) => (
15+
<Tabs activeKey="activeTabKey" aria-label="Tabs example" isBox={props.isBox} onSelect={() => {}} role="region">
16+
{props.children}
17+
</Tabs>
18+
)
19+
});

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

Lines changed: 48 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,57 +6,53 @@ import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
66
// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
77
// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
88

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'),
9+
figma.connect(Tab, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=14327-6407', {
10+
props: {
11+
// string
12+
tabText: figma.string('Text'),
1613

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-
}),
14+
// boolean
15+
actions: figma.boolean('Help icon', {
16+
true: (ref: React.RefObject<HTMLDivElement>) => (
17+
<>
18+
<TabAction aria-label="Help action for tab" ref={ref}>
19+
<HelpIcon />
20+
</TabAction>
21+
{helpPopover(`Help popover for tab`)}
22+
</>
23+
),
24+
false: undefined
25+
}),
26+
onClose: figma.boolean('Close Icon', {
27+
true: () => {},
28+
false: undefined
29+
}),
30+
hasIcon: figma.boolean('Has icon', {
31+
true: (
32+
<TabTitleIcon>
33+
<UsersIcon />
34+
</TabTitleIcon>
35+
),
36+
false: undefined
37+
}),
4138

42-
// enum
43-
isDisabled: figma.enum('State', { Disabled: true })
44-
// eventKey: figma.string('Event key'), // TODO: DESIGN: 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-
);
39+
// enum
40+
isDisabled: figma.enum('State', { Disabled: true })
41+
// eventKey: figma.string('Event key'), // TODO: DESIGN: Add event key
42+
},
43+
example: (props) => (
44+
<Tab
45+
eventKey={0}
46+
isDisabled={props.isDisabled}
47+
onClose={props.onClose}
48+
title={
49+
<>
50+
<TabTitleText>{props.tabText}</TabTitleText>
51+
{props.hasIcon}
52+
</>
53+
}
54+
>
55+
{props.tabText} Content
56+
</Tab>
57+
)
58+
});

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

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,29 @@ import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
66

77
figma.connect(
88
Timestamp,
9-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7472-6718',
9+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7472-6718',
1010
{
1111
props: {
12+
// date: figma.string('Date'),
1213
// string
1314
defaultTimestampContent: figma.string('✏️ Default timestamp content'),
1415

1516
// boolean
16-
hasTooltip: figma.boolean('With tooltip underline', {
17-
true: {
18-
tooltip: { variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time (UTC)' }
19-
},
17+
tooltip: figma.boolean('With tooltip underline', {
18+
true: { variant: TimestampTooltipVariant.default },
2019
false: undefined
2120
}),
2221

2322
// enum
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'
35-
}),
36-
children: figma.children('*')
23+
date: figma.enum('Format', {
24+
Default: figma.string('✏️ Default timestamp content'),
25+
'Without time': figma.string('✏️ Without time'),
26+
'Without day': figma.string('✏️ Without day'),
27+
Abbreviated: figma.string('✏️ Without time'),
28+
Numberic: figma.string('✏️ Without time'),
29+
'Custom content': figma.string('✏️ Without time')
30+
})
3731
},
38-
example: (props) => (
39-
<Timestamp
40-
date={props.defaultTimestampContent}
41-
timeFormat={props.timeFormat}
42-
dateFormat={props.dateFormat}
43-
dateContent={props.dateFormat}
44-
tooltip={props.hasTooltip}
45-
/>
46-
)
32+
example: (props) => <Timestamp tooltip={props.tooltip} date={props.date} />
4733
}
4834
);

0 commit comments

Comments
 (0)