From cbf81cc7f5663f430a529a06d209172c984cd77e Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Wed, 2 Jul 2025 18:09:54 -0400 Subject: [PATCH 1/3] feat(CC-menu): added menu --- .../components/Menu/Menu.figma.tsx | 286 ++++++++++++++++++ .../components/Menu/MenuItem.figma.tsx | 153 ++++++++++ .../components/Menu/MenuToggle.figma.tsx | 58 ++++ .../Menu/MenuToggleWithButtonStyle.figma.tsx | 49 +++ .../Menu/MenuTypeaheadToggle.figma.tsx | 46 +++ 5 files changed, 592 insertions(+) create mode 100644 packages/code-connect/components/Menu/Menu.figma.tsx create mode 100644 packages/code-connect/components/Menu/MenuItem.figma.tsx create mode 100644 packages/code-connect/components/Menu/MenuToggle.figma.tsx create mode 100644 packages/code-connect/components/Menu/MenuToggleWithButtonStyle.figma.tsx create mode 100644 packages/code-connect/components/Menu/MenuTypeaheadToggle.figma.tsx diff --git a/packages/code-connect/components/Menu/Menu.figma.tsx b/packages/code-connect/components/Menu/Menu.figma.tsx new file mode 100644 index 00000000000..d7eb68e1a4d --- /dev/null +++ b/packages/code-connect/components/Menu/Menu.figma.tsx @@ -0,0 +1,286 @@ +import figma from '@figma/code-connect'; +import { + Divider, + DrilldownMenu, + Menu, + MenuContent, + MenuGroup, + MenuItem, + MenuItemAction, + MenuList +} from '@patternfly/react-core'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; + +// Documentation for Menu can be found at https://www.patternfly.org/components/menu + +const drilldownMenuModel = { + id: 'drilldown-drilldownMenuStart', + children: ( + + + Start rollout + + + + + Application grouping + + + Group A + Group B + Group C + + } + > + Application grouping + + Count + + + Labels + + + Label 1 + Label 2 + Label 3 + + } + > + Labels + + Annotations + + ) +}; + +figma.connect( + Menu, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', + { + variant: { Menu: 'Titled Groups' }, + props: { + children: figma.children('*') + }, + example: (props) => ( + + + + {props.children} + + + + {props.children} + + + + ) + } +); + +figma.connect( + Menu, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', + { + props: { + ...drilldownMenuModel, + + // boolean + showSearchInput: figma.boolean('Show search input', { + true: true, + false: undefined + }), + + // enum + isPlain: figma.enum('Menu', { 'Plain Menu': true }), + + actions: figma.enum('Menu', { + 'With Actions': ( + } actionId="code" onClick={() => {}} aria-label="Code" /> + ) + }), + + onSelect: figma.enum('Menu', { 'Option Select': () => {} }), + + // enum + drilldown: figma.enum('Menu', { + Basic: { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + drilldownMenu: undefined, + onGetMenuHeight: undefined + }, + 'Plain Menu': { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + drilldownMenu: undefined, + onGetMenuHeight: undefined + }, + 'With Actions': { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + drilldownMenu: undefined, + onGetMenuHeight: undefined + }, + 'With Separator': { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + onGetMenuHeight: undefined + }, + 'With Links': { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + drilldownMenu: undefined, + onGetMenuHeight: undefined, + onSelect: undefined + }, + 'Option Select': { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + drilldownMenu: undefined, + onGetMenuHeight: undefined, + onSelect: undefined + }, + 'Item Checkbox': { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + drilldownMenu: undefined, + onGetMenuHeight: undefined, + onSelect: undefined + }, + 'With favorites': { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + drilldownMenu: undefined, + onGetMenuHeight: undefined, + onSelect: undefined + }, + Danger: { + containsDrilldown: false, + drilldownItemPath: undefined, + drilledInMenus: undefined, + activeMenu: undefined, + onDrillIn: undefined, + onDrillOut: undefined, + drilldownMenu: undefined, + onGetMenuHeight: undefined, + onSelect: undefined + }, + 'Drill Down Breadcrumbs': { + containsDrilldown: true, + drilldownItemPath: 'drilldownPath', + drilledInMenus: 'menuDrilledIn', + activeMenu: 'activeMenu', + onDrillIn: () => {}, + onDrillOut: () => {}, + drilldownMenu: drilldownMenuModel, + onGetMenuHeight: () => {}, + onSelect: () => {} + }, + 'Drill Down Start': { + containsDrilldown: true, + drilldownItemPath: 'drilldownPath', + drilledInMenus: 'menuDrilledIn', + activeMenu: 'activeMenu', + onDrillIn: () => {}, + onDrillOut: () => {}, + drilldownMenu: drilldownMenuModel, + onGetMenuHeight: () => {}, + onSelect: () => {} + }, + 'Drill Down Return': { + containsDrilldown: true, + drilldownItemPath: 'drilldownPath', + drilledInMenus: 'menuDrilledIn', + activeMenu: 'activeMenu', + onDrillIn: () => {}, + onDrillOut: () => {}, + drilldownMenu: drilldownMenuModel, + onGetMenuHeight: () => {}, + onSelect: () => {} + } + }), + + // menu: figma.enum('Menu', { + // // Basic: 'basic', + // // 'Plain Menu': 'plain-menu', + // 'With Actions': 'with-actions', + // 'With Separator': 'with-separator', + // 'With Links': 'with-links', + // 'With Icons': 'with-icons', + // 'Titled Groups': 'titled-groups', + // 'Drill Down Start': 'drill-down-start', + // 'Drill Down Return': 'drill-down-return', + // 'Option Select': 'option-select', + // 'Item Checkbox': 'item-checkbox', + // 'With favorites': 'with-favorites', + // Danger: 'danger', + // 'Drill Down Breadcrumbs': 'drill-down-breadcrumbs' + // }), + + children: figma.children('*') + }, + + example: (props) => ( + + + {props.children} + + + ) + } +); diff --git a/packages/code-connect/components/Menu/MenuItem.figma.tsx b/packages/code-connect/components/Menu/MenuItem.figma.tsx new file mode 100644 index 00000000000..abfff0623e9 --- /dev/null +++ b/packages/code-connect/components/Menu/MenuItem.figma.tsx @@ -0,0 +1,153 @@ +import figma from '@figma/code-connect'; +import { + Divider, + DrilldownMenu, + MenuItem, + MenuItemAction, + MenuFooter, + MenuBreadcrumb, + MenuList, + MenuGroup +} from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; + +// TODO: File bug with Figma CC. The description prop is not working as expected. Strings behind boolean props are working in other components, however they +// do not work here. My assumption is that prepending/appending periods to the string is causing the issue and as a matter of consistency, should not be used. +// TODO: DESIGN: "Show Descr. has a trailing space in the prop. Remove trailing space. +// doesn't but should +// description: figma.boolean('Show Descr. ', { +// true: 'This is a description', +// false: undefined +// }), + +figma.connect( + MenuItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', + { + variant: { 'Menu Item': 'Separator' }, + props: {}, + example: () => + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', + { + variant: { 'Menu Item': 'Drill Down - Breadcrumb' }, + props: { + breadcrumb: figma.children('*') + }, + example: (props) => {props.breadcrumb} + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', + { + variant: { 'Menu Item': 'Footer' }, + props: { + children: figma.children('*') + }, + example: (props) => {props.children} + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', + { + variant: { 'Menu Item': 'Group Header' }, + props: { + children: figma.children('*'), + menuItemText: figma.string('Menu item Text') + }, + example: (props) => ( + <> + + + + Link 1 + + Link 2 + + + + + + + Link 1 + + + Link 2 + + + + + ) + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', + { + props: { + // string + menuItemText: figma.string('Menu item Text'), + + // boolean + actions: figma.boolean('Show action icon', { + true: } actionId="alert" aria-label="Alert" />, + false: undefined + }), + icon: figma.boolean('Show Leading Icon', { + true: , + false: undefined + }), + + isDrilldown: figma.enum('Menu Item', { + 'Drill Down - Breadcrumb': , + 'Drill Down - Start': , + 'Drill Down - Return': + }), + + hasCheckbox: figma.enum('Menu Item', { 'Checkbox select': true }), + isDanger: figma.enum('Menu Item', { Danger: true }), + isSelected: figma.enum('State', { Selected: true }), + isDisabled: figma.enum('State', { Disabled: true }), + withExternalLink: figma.enum('Menu Item', { + 'With external link on hover': { isExternalLink: true, to: '#', itemId: 0 }, + + // reset conditional values + Basic: { isExternalLink: false, to: undefined }, + 'Checkbox select': { isExternalLink: false, to: undefined }, + 'Option Select': { isExternalLink: false, to: undefined }, + 'Drill Down - Breadcrumb': { isExternalLink: false, to: undefined }, + 'Drill Down - Start': { isExternalLink: false, to: undefined }, + 'Drill Down - Return': { isExternalLink: false, to: undefined }, + Danger: { isExternalLink: false, to: undefined } + }) + }, + example: (props) => ( + + {props.menuItemText} + + ) + } +); diff --git a/packages/code-connect/components/Menu/MenuToggle.figma.tsx b/packages/code-connect/components/Menu/MenuToggle.figma.tsx new file mode 100644 index 00000000000..de4faf2cb9b --- /dev/null +++ b/packages/code-connect/components/Menu/MenuToggle.figma.tsx @@ -0,0 +1,58 @@ +import figma from '@figma/code-connect'; +import { Avatar, MenuToggle } from '@patternfly/react-core'; +import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; + +// Documentation for MenuToggle can be found at https://www.patternfly.org/components/menu-toggle + +figma.connect( + MenuToggle, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7829-30614', + { + props: { + // boolean + hasCheckbox: figma.boolean('Show Checkbox'), + showAvatar: figma.boolean('Show Avatar', { + true: , + false: undefined + }), + showBadge: figma.boolean('Show Badge', { + true: figma.children('Badge'), + false: undefined + }), + showCustomIcon: figma.boolean('Show Custom Icon', { + true: , + false: undefined + }), + toggleText: figma.boolean('Toggle text', { + true: figma.string('✏️ Toggle Text'), + false: undefined + }), + + // enum + isDisabled: figma.enum('State', { Disabled: true }), + status: figma.enum('State', { + Danger: 'danger', + Warning: 'warning', + Success: 'success' + }), + variant: figma.enum('Style', { + 'Plain - Icon': 'plain', + 'Plain text': 'plainText' + }) + }, + example: (props) => ( + + {props.toggleText} + + ) + } +); diff --git a/packages/code-connect/components/Menu/MenuToggleWithButtonStyle.figma.tsx b/packages/code-connect/components/Menu/MenuToggleWithButtonStyle.figma.tsx new file mode 100644 index 00000000000..45406e81af1 --- /dev/null +++ b/packages/code-connect/components/Menu/MenuToggleWithButtonStyle.figma.tsx @@ -0,0 +1,49 @@ +import figma from '@figma/code-connect'; +import { Avatar, MenuToggle } from '@patternfly/react-core'; +import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; + +// Documentation for MenuToggle can be found at https://www.patternfly.org/components/menu-toggle-with-button-style + +figma.connect( + MenuToggle, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3466-40444', + { + props: { + // boolean + hasCheckbox: figma.boolean('Show Checkbox'), + showBadge: figma.boolean('Show Badge', { + true: figma.children('Badge'), + false: undefined + }), + showCustomIcon: figma.boolean('Show Custom Icon', { + true: , + false: undefined + }), + showAvatar: figma.boolean('Show Avatar', { + true: , + false: undefined + }), + toggleText: figma.boolean('Toggle text', { + true: figma.string('✏️ Toggle Text'), + false: undefined + }), + + // enum + isDisabled: figma.enum('State', { Disabled: true }), + isSelected: figma.enum('State', { Selected: true }) + }, + example: (props) => ( + + {props.toggleText} + + ) + } +); diff --git a/packages/code-connect/components/Menu/MenuTypeaheadToggle.figma.tsx b/packages/code-connect/components/Menu/MenuTypeaheadToggle.figma.tsx new file mode 100644 index 00000000000..d749d8022ca --- /dev/null +++ b/packages/code-connect/components/Menu/MenuTypeaheadToggle.figma.tsx @@ -0,0 +1,46 @@ +import figma from '@figma/code-connect'; +import { MenuToggle, Avatar } from '@patternfly/react-core'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; + +// Documentation for MenuToggle can be found at https://www.patternfly.org/components/menu-typeahead-toggle + +figma.connect( + MenuToggle, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2689-49976', + { + props: { + // boolean + hasCheckbox: figma.boolean('Show Checkbox'), + showBadge: figma.boolean('Show Badge', { + true: figma.children('Badge'), + false: undefined + }), + showCustomIcon: figma.boolean('Show Custom Icon', { + true: , + false: undefined + }), + showAvatar: figma.boolean('Show Avatar', { + true: , + false: undefined + }), + toggleText: figma.boolean('Toggle text', { + true: figma.string('✏️ Toggle Text'), + false: undefined + }), + + // enum + isSelected: figma.enum('State', { Selected: true }) + }, + example: (props) => ( + + {props.toggleText} + + ) + } +); From 1c914b31f39e7767245d7f6f0c0611894fb4b735 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 16 Sep 2025 16:03:32 -0400 Subject: [PATCH 2/3] feat(CC-menu): udpating menu props --- .../components/Menu/Menu.figma.tsx | 500 +++++++++--------- .../components/Menu/MenuItem.figma.tsx | 257 ++++++--- packages/code-connect/figma.config.json | 6 +- 3 files changed, 427 insertions(+), 336 deletions(-) diff --git a/packages/code-connect/components/Menu/Menu.figma.tsx b/packages/code-connect/components/Menu/Menu.figma.tsx index d7eb68e1a4d..39700e32df1 100644 --- a/packages/code-connect/components/Menu/Menu.figma.tsx +++ b/packages/code-connect/components/Menu/Menu.figma.tsx @@ -13,274 +13,282 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i // Documentation for Menu can be found at https://www.patternfly.org/components/menu -const drilldownMenuModel = { - id: 'drilldown-drilldownMenuStart', - children: ( - - - Start rollout - - - - - Application grouping - - - Group A - Group B - Group C - - } - > - Application grouping - - Count - - - Labels - - - Label 1 - Label 2 - Label 3 - - } - > - Labels - - Annotations - - ) -}; +// const drilldownMenuModel = { +// id: 'drilldown-drilldownMenuStart', +// children: ( +// +// +// Start rollout +// +// +// +// +// Application grouping +// +// +// Group A +// Group B +// Group C +// +// } +// > +// Application grouping +// +// Count +// +// +// Labels +// +// +// Label 1 +// Label 2 +// Label 3 +// +// } +// > +// Labels +// +// Annotations +// +// ) +// }; figma.connect( Menu, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', { - variant: { Menu: 'Titled Groups' }, props: { - children: figma.children('*') + isPlain: figma.enum('Menu', { 'Plain Menu': true }), + menuItems: figma.children('Menu Item') }, example: (props) => ( - + {}} isPlain={props.isPlain}> - + {props.menuItems} + + {/* + {props.children} {props.children} {props.children} - + */} ) } ); +// figma.connect( +// Menu, +// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', +// { +// variant: { Menu: 'Titled Groups' }, +// props: { +// children: figma.children('xx') +// }, +// example: (props) => ( +// +// +// {props.children} -figma.connect( - Menu, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', - { - props: { - ...drilldownMenuModel, +// +// {props.children} +// +// +// +// {props.children} +// +// +// +// ) +// } +// ); - // boolean - showSearchInput: figma.boolean('Show search input', { - true: true, - false: undefined - }), - - // enum - isPlain: figma.enum('Menu', { 'Plain Menu': true }), +// figma.connect( +// Menu, +// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', +// { +// variant: { Menu: 'Drilldown Start' }, +// props: { +// ...drilldownMenuModel, - actions: figma.enum('Menu', { - 'With Actions': ( - } actionId="code" onClick={() => {}} aria-label="Code" /> - ) - }), +// // boolean +// showSearchInput: figma.boolean('Show search input', { +// true: true, +// false: undefined +// }), - onSelect: figma.enum('Menu', { 'Option Select': () => {} }), +// // enum +// isPlain: figma.enum('Menu', { 'Plain Menu': true }), +// actions: figma.enum('Menu', { +// 'With Actions': ( +// } actionId="code" onClick={() => {}} aria-label="Code" /> +// ) +// }), +// onSelect: figma.enum('Menu', { 'Option Select': () => {} }), +// drilldown: figma.enum('Menu', { +// Basic: { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// drilldownMenu: undefined, +// onGetMenuHeight: undefined +// }, +// 'Plain Menu': { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// drilldownMenu: undefined, +// onGetMenuHeight: undefined +// }, +// 'With Actions': { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// drilldownMenu: undefined, +// onGetMenuHeight: undefined +// }, +// 'With Separator': { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// onGetMenuHeight: undefined +// }, +// 'With Links': { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// drilldownMenu: undefined, +// onGetMenuHeight: undefined, +// onSelect: undefined +// }, +// 'Option Select': { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// drilldownMenu: undefined, +// onGetMenuHeight: undefined, +// onSelect: undefined +// }, +// 'Item Checkbox': { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// drilldownMenu: undefined, +// onGetMenuHeight: undefined, +// onSelect: undefined +// }, +// 'With favorites': { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// drilldownMenu: undefined, +// onGetMenuHeight: undefined, +// onSelect: undefined +// }, +// Danger: { +// containsDrilldown: false, +// drilldownItemPath: undefined, +// drilledInMenus: undefined, +// activeMenu: undefined, +// onDrillIn: undefined, +// onDrillOut: undefined, +// drilldownMenu: undefined, +// onGetMenuHeight: undefined, +// onSelect: undefined +// }, +// 'Drill Down Breadcrumbs': { +// containsDrilldown: true, +// drilldownItemPath: 'drilldownPath', +// drilledInMenus: 'menuDrilledIn', +// activeMenu: 'activeMenu', +// onDrillIn: () => {}, +// onDrillOut: () => {}, +// drilldownMenu: drilldownMenuModel, +// onGetMenuHeight: () => {}, +// onSelect: () => {} +// }, +// 'Drill Down Start': { +// containsDrilldown: true, +// drilldownItemPath: 'drilldownPath', +// drilledInMenus: 'menuDrilledIn', +// activeMenu: 'activeMenu', +// onDrillIn: () => {}, +// onDrillOut: () => {}, +// drilldownMenu: drilldownMenuModel, +// onGetMenuHeight: () => {}, +// onSelect: () => {} +// }, +// 'Drill Down Return': { +// containsDrilldown: true, +// drilldownItemPath: 'drilldownPath', +// drilledInMenus: 'menuDrilledIn', +// activeMenu: 'activeMenu', +// onDrillIn: () => {}, +// onDrillOut: () => {}, +// drilldownMenu: drilldownMenuModel, +// onGetMenuHeight: () => {}, +// onSelect: () => {} +// } +// }), - // enum - drilldown: figma.enum('Menu', { - Basic: { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - drilldownMenu: undefined, - onGetMenuHeight: undefined - }, - 'Plain Menu': { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - drilldownMenu: undefined, - onGetMenuHeight: undefined - }, - 'With Actions': { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - drilldownMenu: undefined, - onGetMenuHeight: undefined - }, - 'With Separator': { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - onGetMenuHeight: undefined - }, - 'With Links': { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - drilldownMenu: undefined, - onGetMenuHeight: undefined, - onSelect: undefined - }, - 'Option Select': { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - drilldownMenu: undefined, - onGetMenuHeight: undefined, - onSelect: undefined - }, - 'Item Checkbox': { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - drilldownMenu: undefined, - onGetMenuHeight: undefined, - onSelect: undefined - }, - 'With favorites': { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - drilldownMenu: undefined, - onGetMenuHeight: undefined, - onSelect: undefined - }, - Danger: { - containsDrilldown: false, - drilldownItemPath: undefined, - drilledInMenus: undefined, - activeMenu: undefined, - onDrillIn: undefined, - onDrillOut: undefined, - drilldownMenu: undefined, - onGetMenuHeight: undefined, - onSelect: undefined - }, - 'Drill Down Breadcrumbs': { - containsDrilldown: true, - drilldownItemPath: 'drilldownPath', - drilledInMenus: 'menuDrilledIn', - activeMenu: 'activeMenu', - onDrillIn: () => {}, - onDrillOut: () => {}, - drilldownMenu: drilldownMenuModel, - onGetMenuHeight: () => {}, - onSelect: () => {} - }, - 'Drill Down Start': { - containsDrilldown: true, - drilldownItemPath: 'drilldownPath', - drilledInMenus: 'menuDrilledIn', - activeMenu: 'activeMenu', - onDrillIn: () => {}, - onDrillOut: () => {}, - drilldownMenu: drilldownMenuModel, - onGetMenuHeight: () => {}, - onSelect: () => {} - }, - 'Drill Down Return': { - containsDrilldown: true, - drilldownItemPath: 'drilldownPath', - drilledInMenus: 'menuDrilledIn', - activeMenu: 'activeMenu', - onDrillIn: () => {}, - onDrillOut: () => {}, - drilldownMenu: drilldownMenuModel, - onGetMenuHeight: () => {}, - onSelect: () => {} - } - }), +// children: figma.children('*') +// }, - // menu: figma.enum('Menu', { - // // Basic: 'basic', - // // 'Plain Menu': 'plain-menu', - // 'With Actions': 'with-actions', - // 'With Separator': 'with-separator', - // 'With Links': 'with-links', - // 'With Icons': 'with-icons', - // 'Titled Groups': 'titled-groups', - // 'Drill Down Start': 'drill-down-start', - // 'Drill Down Return': 'drill-down-return', - // 'Option Select': 'option-select', - // 'Item Checkbox': 'item-checkbox', - // 'With favorites': 'with-favorites', - // Danger: 'danger', - // 'Drill Down Breadcrumbs': 'drill-down-breadcrumbs' - // }), - - children: figma.children('*') - }, - - example: (props) => ( - - - {props.children} - - - ) - } -); +// example: (props) => ( +// +// +// {props.children} +// +// +// ) +// } +// ); diff --git a/packages/code-connect/components/Menu/MenuItem.figma.tsx b/packages/code-connect/components/Menu/MenuItem.figma.tsx index abfff0623e9..2fa6cab4bd4 100644 --- a/packages/code-connect/components/Menu/MenuItem.figma.tsx +++ b/packages/code-connect/components/Menu/MenuItem.figma.tsx @@ -1,5 +1,6 @@ import figma from '@figma/code-connect'; import { + Button, Divider, DrilldownMenu, MenuItem, @@ -9,8 +10,9 @@ import { MenuList, MenuGroup } from '@patternfly/react-core'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +// import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; // TODO: File bug with Figma CC. The description prop is not working as expected. Strings behind boolean props are working in other components, however they // do not work here. My assumption is that prepending/appending periods to the string is causing the issue and as a matter of consistency, should not be used. @@ -21,6 +23,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i // false: undefined // }), +// Menu Item Separator figma.connect( MenuItem, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', @@ -31,65 +34,21 @@ figma.connect( } ); +// Menu Item Footer figma.connect( - MenuItem, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', - { - variant: { 'Menu Item': 'Drill Down - Breadcrumb' }, - props: { - breadcrumb: figma.children('*') - }, - example: (props) => {props.breadcrumb} - } -); - -figma.connect( - MenuItem, + MenuFooter, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', { variant: { 'Menu Item': 'Footer' }, props: { - children: figma.children('*') + children: figma.children('Inline link') }, example: (props) => {props.children} } ); -figma.connect( - MenuItem, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', - { - variant: { 'Menu Item': 'Group Header' }, - props: { - children: figma.children('*'), - menuItemText: figma.string('Menu item Text') - }, - example: (props) => ( - <> - - - - Link 1 - - Link 2 - - - - - - - Link 1 - - - Link 2 - - - - - ) - } -); - +// Base Menu Item +// Menu Item Group Header figma.connect( MenuItem, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', @@ -99,55 +58,183 @@ figma.connect( menuItemText: figma.string('Menu item Text'), // boolean - actions: figma.boolean('Show action icon', { - true: } actionId="alert" aria-label="Alert" />, - false: undefined - }), - icon: figma.boolean('Show Leading Icon', { - true: , - false: undefined - }), - - isDrilldown: figma.enum('Menu Item', { - 'Drill Down - Breadcrumb': , - 'Drill Down - Start': , - 'Drill Down - Return': - }), + icon: figma.boolean('Show Leading Icon', { true: , false: undefined }), + action: figma.boolean('Show action icon', { true: , false: undefined }), + description: figma.boolean('Show Description', { true: figma.string('Description Text'), false: undefined }), + // enum hasCheckbox: figma.enum('Menu Item', { 'Checkbox select': true }), - isDanger: figma.enum('Menu Item', { Danger: true }), isSelected: figma.enum('State', { Selected: true }), isDisabled: figma.enum('State', { Disabled: true }), - withExternalLink: figma.enum('Menu Item', { - 'With external link on hover': { isExternalLink: true, to: '#', itemId: 0 }, - - // reset conditional values - Basic: { isExternalLink: false, to: undefined }, - 'Checkbox select': { isExternalLink: false, to: undefined }, - 'Option Select': { isExternalLink: false, to: undefined }, - 'Drill Down - Breadcrumb': { isExternalLink: false, to: undefined }, - 'Drill Down - Start': { isExternalLink: false, to: undefined }, - 'Drill Down - Return': { isExternalLink: false, to: undefined }, - Danger: { isExternalLink: false, to: undefined } - }) + isDanger: figma.enum('State', { Danger: true }), + isExternalLink: figma.enum('Menu Item', { 'With external link on hover': true }), + actions: figma.boolean('Show action icon', { + true: ( + } + actionId="code" + // eslint-disable-next-line no-console + onClick={() => console.log('clicked on code icon')} + aria-label="Code" + /> + ), + false: undefined + }), + to: figma.enum('Menu Item', { 'With external link on hover': '#to-link' }) }, example: (props) => ( {props.menuItemText} ) } ); + +// figma.connect( +// MenuItem, +// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', +// { +// variant: { 'Menu Item': 'Option Select' }, +// props: { +// menuItemText: figma.string('Menu item Text'), +// hasCheckbox: figma.enum('Menu Item', { 'Checkbox select': true }), +// isSelected: figma.enum('State', { Selected: true }), +// isDisabled: figma.enum('State', { Disabled: true }) +// }, +// example: (props) => ( +// } +// isSelected={props.isSelected} +// isDisabled={props.isDisabled} +// itemId={0} +// onSelect={() => {}} +// role="listbox" +// activeItemId={props.activeItemId} +// selected={props.selected} +// > +// {props.menuItemText} +// +// ) +// } +// ); + +// figma.connect( +// MenuItem, +// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', +// { +// variant: { 'Menu Item': 'Drill Down - Breadcrumb' }, +// props: { +// breadcrumb: figma.children('*') +// }, +// example: (props) => {props.breadcrumb} +// } +// ); + +// figma.connect( +// MenuItem, +// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', +// { +// variant: { 'Menu Item': 'Group Header' }, +// props: { +// children: figma.children('*'), +// menuItemText: figma.string('Menu item Text') +// }, +// example: (props) => ( +// <> +// +// +// +// Link 1 +// +// Link 2 +// +// +// +// +// +// +// Link 1 +// +// +// Link 2 +// +// +// +// +// ) +// } +// ); + +// figma.connect( +// MenuItem, +// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', +// { +// props: { +// // string +// menuItemText: figma.string('Menu item Text'), + +// // boolean +// actions: figma.boolean('Show action icon', { +// true: } actionId="alert" aria-label="Alert" />, +// false: undefined +// }), +// icon: figma.boolean('Show Leading Icon', { +// true: , +// false: undefined +// }), + +// isDrilldown: figma.enum('Menu Item', { +// 'Drill Down - Breadcrumb': , +// 'Drill Down - Start': , +// 'Drill Down - Return': +// }), + +// hasCheckbox: figma.enum('Menu Item', { 'Checkbox select': true }), +// isDanger: figma.enum('Menu Item', { Danger: true }), +// isSelected: figma.enum('State', { Selected: true }), +// isDisabled: figma.enum('State', { Disabled: true }), +// withExternalLink: figma.enum('Menu Item', { +// 'With external link on hover': { isExternalLink: true, to: '#', itemId: 0 }, + +// // reset conditional values +// Basic: { isExternalLink: false, to: undefined }, +// 'Checkbox select': { isExternalLink: false, to: undefined }, +// 'Option Select': { isExternalLink: false, to: undefined }, +// 'Drill Down - Breadcrumb': { isExternalLink: false, to: undefined }, +// 'Drill Down - Start': { isExternalLink: false, to: undefined }, +// 'Drill Down - Return': { isExternalLink: false, to: undefined }, +// Danger: { isExternalLink: false, to: undefined } +// }) +// }, +// example: (props) => ( +// +// {props.menuItemText} +// +// ) +// } +// ); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 2537e14be2b..59259b8dbdf 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -2,11 +2,7 @@ "codeConnect": { "parser": "react", "include": [ - "components/DatePicker/*.tsx", - "components/EmptyState/*.tsx", - "components/FileUpload/*.tsx", - "components/Hint/*.tsx", - "components/InlineEdit/*.tsx" + "components/Menu/*.tsx" ], "paths": { "src/components": "src/components" From 14c189eceb0546c6d61f7c199c4af36e6f589f47 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Mon, 22 Sep 2025 09:44:22 -0400 Subject: [PATCH 3/3] feat(CC-menu): updated props, updated integration --- .../components/Menu/Menu.figma.tsx | 456 ++++++++---------- .../components/Menu/MenuItem.figma.tsx | 199 ++------ .../components/Menu/MenuToggle.figma.tsx | 2 +- .../Menu/MenuToggleWithButtonStyle.figma.tsx | 2 +- .../Menu/MenuTypeaheadToggle.figma.tsx | 2 +- packages/code-connect/figma.config.json | 10 +- 6 files changed, 248 insertions(+), 423 deletions(-) diff --git a/packages/code-connect/components/Menu/Menu.figma.tsx b/packages/code-connect/components/Menu/Menu.figma.tsx index 39700e32df1..1134b7c4f3e 100644 --- a/packages/code-connect/components/Menu/Menu.figma.tsx +++ b/packages/code-connect/components/Menu/Menu.figma.tsx @@ -4,291 +4,231 @@ import { DrilldownMenu, Menu, MenuContent, + MenuSearch, MenuGroup, MenuItem, - MenuItemAction, - MenuList + MenuList, + MenuSearchInput, + SearchInput, + MenuItemAction } from '@patternfly/react-core'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +// TODO: DESIGN: Create menu group +// TODO: DESIGN: Create menu list // Documentation for Menu can be found at https://www.patternfly.org/components/menu -// const drilldownMenuModel = { -// id: 'drilldown-drilldownMenuStart', -// children: ( -// -// -// Start rollout -// -// -// -// -// Application grouping -// -// -// Group A -// Group B -// Group C -// -// } -// > -// Application grouping -// -// Count -// -// -// Labels -// -// -// Label 1 -// Label 2 -// Label 3 -// -// } -// > -// Labels -// -// Annotations -// -// ) -// }; - figma.connect( Menu, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2590-18585', { props: { + hasSearchDivider: figma.boolean('Show search input', { + true: , + false: undefined + }), + searchInput: figma.boolean('Show search input', { + true: ( + + + {}} /> + + + ), + false: undefined + }), isPlain: figma.enum('Menu', { 'Plain Menu': true }), - menuItems: figma.children('Menu Item') + menuItems: figma.children('.MenuItem') }, example: (props) => ( - {}} isPlain={props.isPlain}> + {}} isPlain={props.isPlain}> + {props.searchInput} + {props.hasSearchDivider} {props.menuItems} - {/* - {props.children} - {props.children} + + ) + } +); + +// static example, grouping components don't exist in Figma design +figma.connect( + Menu, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2590-18585', + { + variant: { Menu: 'Titled Groups' }, + props: { + // ...sharedProps, + isPlain: figma.enum('Menu', { 'Plain Menu': true }) + }, + example: (props) => ( + {}} isPlain={props.isPlain}> + + + + + Link not in group + + + + + + + + Link 1 + + Link 2 + - - {props.children} + + + + Link 1 + + + Link 2 + + - */} + ) } ); -// figma.connect( -// Menu, -// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', -// { -// variant: { Menu: 'Titled Groups' }, -// props: { -// children: figma.children('xx') -// }, -// example: (props) => ( -// -// -// {props.children} -// -// {props.children} -// -// -// -// {props.children} -// -// -// -// ) -// } -// ); +// static example, grouping components don't exist in Figma design +const drilldownMenuModel = { + id: 'drilldown-drilldownMenuStart', + children: ( + + + Start rollout + + + + + Application grouping + + + Group A + Group B + Group C + + } + > + Application grouping + + Count + + + Labels + + + Label 1 + Label 2 + Label 3 + + } + > + Labels + + Annotations + + ) +}; -// figma.connect( -// Menu, -// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', -// { -// variant: { Menu: 'Drilldown Start' }, -// props: { -// ...drilldownMenuModel, +figma.connect( + Menu, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2590-18585', + { + variant: { Menu: 'Drill Down Start' }, + props: { + ...drilldownMenuModel, -// // boolean -// showSearchInput: figma.boolean('Show search input', { -// true: true, -// false: undefined -// }), + // boolean + showSearchInput: figma.boolean('Show search input', { + true: true, + false: undefined + }), -// // enum -// isPlain: figma.enum('Menu', { 'Plain Menu': true }), -// actions: figma.enum('Menu', { -// 'With Actions': ( -// } actionId="code" onClick={() => {}} aria-label="Code" /> -// ) -// }), -// onSelect: figma.enum('Menu', { 'Option Select': () => {} }), -// drilldown: figma.enum('Menu', { -// Basic: { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// drilldownMenu: undefined, -// onGetMenuHeight: undefined -// }, -// 'Plain Menu': { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// drilldownMenu: undefined, -// onGetMenuHeight: undefined -// }, -// 'With Actions': { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// drilldownMenu: undefined, -// onGetMenuHeight: undefined -// }, -// 'With Separator': { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// onGetMenuHeight: undefined -// }, -// 'With Links': { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// drilldownMenu: undefined, -// onGetMenuHeight: undefined, -// onSelect: undefined -// }, -// 'Option Select': { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// drilldownMenu: undefined, -// onGetMenuHeight: undefined, -// onSelect: undefined -// }, -// 'Item Checkbox': { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// drilldownMenu: undefined, -// onGetMenuHeight: undefined, -// onSelect: undefined -// }, -// 'With favorites': { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// drilldownMenu: undefined, -// onGetMenuHeight: undefined, -// onSelect: undefined -// }, -// Danger: { -// containsDrilldown: false, -// drilldownItemPath: undefined, -// drilledInMenus: undefined, -// activeMenu: undefined, -// onDrillIn: undefined, -// onDrillOut: undefined, -// drilldownMenu: undefined, -// onGetMenuHeight: undefined, -// onSelect: undefined -// }, -// 'Drill Down Breadcrumbs': { -// containsDrilldown: true, -// drilldownItemPath: 'drilldownPath', -// drilledInMenus: 'menuDrilledIn', -// activeMenu: 'activeMenu', -// onDrillIn: () => {}, -// onDrillOut: () => {}, -// drilldownMenu: drilldownMenuModel, -// onGetMenuHeight: () => {}, -// onSelect: () => {} -// }, -// 'Drill Down Start': { -// containsDrilldown: true, -// drilldownItemPath: 'drilldownPath', -// drilledInMenus: 'menuDrilledIn', -// activeMenu: 'activeMenu', -// onDrillIn: () => {}, -// onDrillOut: () => {}, -// drilldownMenu: drilldownMenuModel, -// onGetMenuHeight: () => {}, -// onSelect: () => {} -// }, -// 'Drill Down Return': { -// containsDrilldown: true, -// drilldownItemPath: 'drilldownPath', -// drilledInMenus: 'menuDrilledIn', -// activeMenu: 'activeMenu', -// onDrillIn: () => {}, -// onDrillOut: () => {}, -// drilldownMenu: drilldownMenuModel, -// onGetMenuHeight: () => {}, -// onSelect: () => {} -// } -// }), + // enum + isPlain: figma.enum('Menu', { 'Plain Menu': true }), + actions: figma.enum('Menu', { + 'With Actions': ( + } actionId="code" onClick={() => {}} aria-label="Code" /> + ) + }), + onSelect: figma.enum('Menu', { 'Option Select': () => {} }), + drilldown: figma.enum('Menu', { + 'Drill Down Breadcrumbs': { + containsDrilldown: true, + drilldownItemPath: 'drilldownPath', + drilledInMenus: 'menuDrilledIn', + activeMenu: 'activeMenu', + onDrillIn: () => {}, + onDrillOut: () => {}, + drilldownMenu: drilldownMenuModel, + onGetMenuHeight: () => {}, + onSelect: () => {} + }, + 'Drill Down Start': { + containsDrilldown: true, + drilldownItemPath: 'drilldownPath', + drilledInMenus: 'menuDrilledIn', + activeMenu: 'activeMenu', + onDrillIn: () => {}, + onDrillOut: () => {}, + drilldownMenu: drilldownMenuModel, + onGetMenuHeight: () => {}, + onSelect: () => {} + }, + 'Drill Down Return': { + containsDrilldown: true, + drilldownItemPath: 'drilldownPath', + drilledInMenus: 'menuDrilledIn', + activeMenu: 'activeMenu', + onDrillIn: () => {}, + onDrillOut: () => {}, + drilldownMenu: drilldownMenuModel, + onGetMenuHeight: () => {}, + onSelect: () => {} + } + }), -// children: figma.children('*') -// }, + children: figma.children('*') + }, -// example: (props) => ( -// -// -// {props.children} -// -// -// ) -// } -// ); + example: (props) => ( + + + {props.children} + + + ) + } +); diff --git a/packages/code-connect/components/Menu/MenuItem.figma.tsx b/packages/code-connect/components/Menu/MenuItem.figma.tsx index 2fa6cab4bd4..d673e1ee5d7 100644 --- a/packages/code-connect/components/Menu/MenuItem.figma.tsx +++ b/packages/code-connect/components/Menu/MenuItem.figma.tsx @@ -1,15 +1,5 @@ import figma from '@figma/code-connect'; -import { - Button, - Divider, - DrilldownMenu, - MenuItem, - MenuItemAction, - MenuFooter, - MenuBreadcrumb, - MenuList, - MenuGroup -} from '@patternfly/react-core'; +import { Divider, MenuItem, MenuItemAction, MenuFooter } from '@patternfly/react-core'; // import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; @@ -26,7 +16,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; // Menu Item Separator figma.connect( MenuItem, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2579-17546', { variant: { 'Menu Item': 'Separator' }, props: {}, @@ -37,11 +27,11 @@ figma.connect( // Menu Item Footer figma.connect( MenuFooter, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2579-17546', { variant: { 'Menu Item': 'Footer' }, props: { - children: figma.children('Inline link') + children: figma.children('*') }, example: (props) => {props.children} } @@ -51,7 +41,7 @@ figma.connect( // Menu Item Group Header figma.connect( MenuItem, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2579-17546', { props: { // string @@ -60,13 +50,13 @@ figma.connect( // boolean icon: figma.boolean('Show Leading Icon', { true: , false: undefined }), action: figma.boolean('Show action icon', { true: , false: undefined }), - description: figma.boolean('Show Description', { true: figma.string('Description Text'), false: undefined }), + + // description: figma.boolean('showDescr', { true: figma.string('Descr. Text'), false: undefined }), + description: 'This is a description', // figma bug, cannot use string directly, needs to be wrapped in an object // enum - hasCheckbox: figma.enum('Menu Item', { 'Checkbox select': true }), - isSelected: figma.enum('State', { Selected: true }), isDisabled: figma.enum('State', { Disabled: true }), - isDanger: figma.enum('State', { Danger: true }), + isDanger: figma.enum('Menu Item', { Danger: true }), isExternalLink: figma.enum('Menu Item', { 'With external link on hover': true }), actions: figma.boolean('Show action icon', { true: ( @@ -85,12 +75,10 @@ figma.connect( example: (props) => ( ( -// } -// isSelected={props.isSelected} -// isDisabled={props.isDisabled} -// itemId={0} -// onSelect={() => {}} -// role="listbox" -// activeItemId={props.activeItemId} -// selected={props.selected} -// > -// {props.menuItemText} -// -// ) -// } -// ); - -// figma.connect( -// MenuItem, -// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', -// { -// variant: { 'Menu Item': 'Drill Down - Breadcrumb' }, -// props: { -// breadcrumb: figma.children('*') -// }, -// example: (props) => {props.breadcrumb} -// } -// ); - -// figma.connect( -// MenuItem, -// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', -// { -// variant: { 'Menu Item': 'Group Header' }, -// props: { -// children: figma.children('*'), -// menuItemText: figma.string('Menu item Text') -// }, -// example: (props) => ( -// <> -// -// -// -// Link 1 -// -// Link 2 -// -// -// -// -// -// -// Link 1 -// -// -// Link 2 -// -// -// -// -// ) -// } -// ); - -// figma.connect( -// MenuItem, -// 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2579-17546', -// { -// props: { -// // string -// menuItemText: figma.string('Menu item Text'), - -// // boolean -// actions: figma.boolean('Show action icon', { -// true: } actionId="alert" aria-label="Alert" />, -// false: undefined -// }), -// icon: figma.boolean('Show Leading Icon', { -// true: , -// false: undefined -// }), - -// isDrilldown: figma.enum('Menu Item', { -// 'Drill Down - Breadcrumb': , -// 'Drill Down - Start': , -// 'Drill Down - Return': -// }), +figma.connect( + MenuItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2579-17546', + { + variant: { 'Menu Item': 'Option Select' }, + props: { + menuItemText: figma.string('Menu item Text'), + hasCheckbox: figma.enum('Menu Item', { 'Checkbox select': true }), -// hasCheckbox: figma.enum('Menu Item', { 'Checkbox select': true }), -// isDanger: figma.enum('Menu Item', { Danger: true }), -// isSelected: figma.enum('State', { Selected: true }), -// isDisabled: figma.enum('State', { Disabled: true }), -// withExternalLink: figma.enum('Menu Item', { -// 'With external link on hover': { isExternalLink: true, to: '#', itemId: 0 }, + isSelected: figma.enum('State', { + Default: undefined, + Hover: undefined, + Selected: true, + Disabled: undefined + }), -// // reset conditional values -// Basic: { isExternalLink: false, to: undefined }, -// 'Checkbox select': { isExternalLink: false, to: undefined }, -// 'Option Select': { isExternalLink: false, to: undefined }, -// 'Drill Down - Breadcrumb': { isExternalLink: false, to: undefined }, -// 'Drill Down - Start': { isExternalLink: false, to: undefined }, -// 'Drill Down - Return': { isExternalLink: false, to: undefined }, -// Danger: { isExternalLink: false, to: undefined } -// }) -// }, -// example: (props) => ( -// -// {props.menuItemText} -// -// ) -// } -// ); + isDisabled: figma.enum('State', { Disabled: true }) + }, + example: (props) => ( + } + isSelected={props.isSelected} + isDisabled={props.isDisabled} + itemId="" + onSelect={() => {}} + role="listbox" + activeItemId="" + > + {props.menuItemText} + + ) + } +); diff --git a/packages/code-connect/components/Menu/MenuToggle.figma.tsx b/packages/code-connect/components/Menu/MenuToggle.figma.tsx index de4faf2cb9b..060ac712b30 100644 --- a/packages/code-connect/components/Menu/MenuToggle.figma.tsx +++ b/packages/code-connect/components/Menu/MenuToggle.figma.tsx @@ -7,7 +7,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; figma.connect( MenuToggle, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7829-30614', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7829-30614', { props: { // boolean diff --git a/packages/code-connect/components/Menu/MenuToggleWithButtonStyle.figma.tsx b/packages/code-connect/components/Menu/MenuToggleWithButtonStyle.figma.tsx index 45406e81af1..b2b4d6157d2 100644 --- a/packages/code-connect/components/Menu/MenuToggleWithButtonStyle.figma.tsx +++ b/packages/code-connect/components/Menu/MenuToggleWithButtonStyle.figma.tsx @@ -7,7 +7,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; figma.connect( MenuToggle, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3466-40444', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=36729-9067', { props: { // boolean diff --git a/packages/code-connect/components/Menu/MenuTypeaheadToggle.figma.tsx b/packages/code-connect/components/Menu/MenuTypeaheadToggle.figma.tsx index d749d8022ca..a94efd90753 100644 --- a/packages/code-connect/components/Menu/MenuTypeaheadToggle.figma.tsx +++ b/packages/code-connect/components/Menu/MenuTypeaheadToggle.figma.tsx @@ -6,7 +6,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; figma.connect( MenuToggle, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2689-49976', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=36729-9027', { props: { // boolean diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 59259b8dbdf..3e77f3d990b 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -1,9 +1,9 @@ { "codeConnect": { - "parser": "react", - "include": [ - "components/Menu/*.tsx" - ], + "include": ["components/Menu/*.tsx"], + "documentUrlSubstitutions": { + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components" + }, "paths": { "src/components": "src/components" }, @@ -26,4 +26,4 @@ } } } -} \ No newline at end of file +}