From e49b7b2b4401d36e3f38e8b3a4a177b97bb19ddc Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 24 Jun 2025 22:10:41 -0400 Subject: [PATCH 1/2] feat(CC-button): button init --- .../components/Button/BlockButton.figma.tsx | 17 +++++ .../components/Button/Button.figma.tsx | 71 +++++++++++++++++++ .../components/Button/CTAButton.figma.tsx | 23 ++++++ .../Button/IconButtonPlainButton.figma.tsx | 12 ++++ .../components/Button/InlineLink.figma.tsx | 27 +++++++ .../components/Button/LinkButton.figma.tsx | 50 +++++++++++++ .../Button/StatefulButton.figma.tsx | 28 ++++++++ packages/code-connect/figma.config.json | 13 ++-- 8 files changed, 233 insertions(+), 8 deletions(-) create mode 100644 packages/code-connect/components/Button/BlockButton.figma.tsx create mode 100644 packages/code-connect/components/Button/Button.figma.tsx create mode 100644 packages/code-connect/components/Button/CTAButton.figma.tsx create mode 100644 packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx create mode 100644 packages/code-connect/components/Button/InlineLink.figma.tsx create mode 100644 packages/code-connect/components/Button/LinkButton.figma.tsx create mode 100644 packages/code-connect/components/Button/StatefulButton.figma.tsx diff --git a/packages/code-connect/components/Button/BlockButton.figma.tsx b/packages/code-connect/components/Button/BlockButton.figma.tsx new file mode 100644 index 00000000000..065c8fef389 --- /dev/null +++ b/packages/code-connect/components/Button/BlockButton.figma.tsx @@ -0,0 +1,17 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; + +// Block Button +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-800', { + props: { + buttonText: figma.string('Text'), + isClicked: figma.enum('State', { Clicked: true }), + isDisabled: figma.enum('State', { Disabled: true }), + iconPosition: figma.boolean('Icon at end', { true: 'end', false: undefined }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Button/Button.figma.tsx b/packages/code-connect/components/Button/Button.figma.tsx new file mode 100644 index 00000000000..75dc62a6126 --- /dev/null +++ b/packages/code-connect/components/Button/Button.figma.tsx @@ -0,0 +1,71 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; +import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; + +// Documentation for Button can be found at https://www.patternfly.org/components/button + +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-678', { + props: { + // string + buttonText: figma.string('Text'), + + // boolean + icon: figma.boolean('Icon at end', { + true: , + false: undefined + }), + iconPosition: figma.boolean('Icon at end', { + true: 'end', + false: undefined + }), + countOptions: figma.boolean('Count', { + true: { + count: '00', + isRead: false, + className: 'custom-badge-unread' + } + }), + + // enum + isAriaDisabled: figma.enum('State', { Disabled: true }), + isClicked: figma.enum('State', { Clicked: true }), + isDanger: figma.enum('Type', { + Danger: true, + 'Secondary danger': true + }), + isDisabled: figma.enum('State', { Disabled: true }), + isExpanded: figma.enum('State', { Expanded: true }), + isLoading: figma.enum('State', { Progress: true }), + isWarning: figma.enum('State', { Warning: true }), + size: figma.enum('Size', { Small: 'sm' }), + state: figma.enum('State', { + Read: 'read', + Unread: 'unread', + Attention: 'attention' + }), + tabIndex: 0, + variant: figma.enum('Type', { + Primary: 'primary', + Secondary: 'secondary', + Tertiary: 'tertiary', + Warning: 'warning', + 'Secondary danger': 'secondary', + 'Secondary progress': 'secondary' + }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Button/CTAButton.figma.tsx b/packages/code-connect/components/Button/CTAButton.figma.tsx new file mode 100644 index 00000000000..ec94d6ee664 --- /dev/null +++ b/packages/code-connect/components/Button/CTAButton.figma.tsx @@ -0,0 +1,23 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; +import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; + +// CTA Button +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-778', { + props: { + buttonText: figma.string('Text'), + icon: figma.enum('Type', { Inline: }), + iconPosition: figma.enum('Type', { Inline: 'end' }), + variant: figma.enum('Type', { + Primary: 'primary', + Secondary: 'secondary', + Tertiary: 'tertiary', + Link: 'link' + }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx b/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx new file mode 100644 index 00000000000..4055e432622 --- /dev/null +++ b/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; +import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; + +// Icon Button +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-736', { + props: { + isClicked: figma.enum('State', { Clicked: true }), + isDisabled: figma.enum('State', { Disabled: true }) + }, + example: (props) => + ) + } +); diff --git a/packages/code-connect/components/Button/LinkButton.figma.tsx b/packages/code-connect/components/Button/LinkButton.figma.tsx new file mode 100644 index 00000000000..99f59e472b1 --- /dev/null +++ b/packages/code-connect/components/Button/LinkButton.figma.tsx @@ -0,0 +1,50 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; + +// Link Button +figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-745', { + props: { + countOptions: figma.enum('Type', { + 'Button with count': { + count: '00', + isRead: false + } + }), + isClicked: figma.enum('State', { Clicked: true }), + isDisabled: figma.enum('State', { Disabled: true }), + isDanger: figma.enum('Type', { Danger: true }), + icon: figma.boolean('Icon at start', { + true: figma.children('IconWrapper'), + false: undefined + }), + iconPosition: figma.boolean('Icon at end', { + true: 'end', + false: undefined + }), + isLoading: figma.enum('Type', { Progress: true }), + size: figma.enum('Size', { Small: 'sm' }), + variant: figma.enum('Type', { + Primary: 'primary', + Secondary: 'secondary', + Tertiary: 'tertiary', + Warning: 'warning', + 'Secondary danger': 'secondary', + 'Secondary progress': 'secondary' + }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Button/StatefulButton.figma.tsx b/packages/code-connect/components/Button/StatefulButton.figma.tsx new file mode 100644 index 00000000000..df6f853e1e3 --- /dev/null +++ b/packages/code-connect/components/Button/StatefulButton.figma.tsx @@ -0,0 +1,28 @@ +import figma from '@figma/code-connect'; +import { Button } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +// Stateful Button +figma.connect( + Button, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=5805-20130', + { + props: { + state: figma.enum('Type', { + Read: 'read', + Unread: 'unread', + 'Unread - Needs attention': 'attention' + }), + icon: figma.boolean('Icon', { + true: , + false: undefined + }), + count: figma.string('Value') + }, + example: (props) => ( + + ) + } +); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 2537e14be2b..a366fb46c32 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -1,13 +1,10 @@ { "codeConnect": { "parser": "react", - "include": [ - "components/DatePicker/*.tsx", - "components/EmptyState/*.tsx", - "components/FileUpload/*.tsx", - "components/Hint/*.tsx", - "components/InlineEdit/*.tsx" - ], + "include": ["components/Button/*.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" }, @@ -30,4 +27,4 @@ } } } -} \ No newline at end of file +} From 738022babcd677f069f5d53bbb4b16042eec7bf5 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 7 Oct 2025 13:59:30 -0400 Subject: [PATCH 2/2] feat(CC-card): updated loadingProps() --- .../components/Button/Button.figma.tsx | 40 +++++++++++++------ .../Button/IconButtonPlainButton.figma.tsx | 12 +++++- 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/packages/code-connect/components/Button/Button.figma.tsx b/packages/code-connect/components/Button/Button.figma.tsx index 75dc62a6126..65c025fd173 100644 --- a/packages/code-connect/components/Button/Button.figma.tsx +++ b/packages/code-connect/components/Button/Button.figma.tsx @@ -10,7 +10,7 @@ figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/Patte buttonText: figma.string('Text'), // boolean - icon: figma.boolean('Icon at end', { + icon: figma.boolean('Icon at start', { true: , false: undefined }), @@ -27,23 +27,38 @@ figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/Patte }), // enum - isAriaDisabled: figma.enum('State', { Disabled: true }), isClicked: figma.enum('State', { Clicked: true }), + id: figma.enum('Type', { + Progress: 'loading-button', + 'Secondary progress': 'loading-button' + }), isDanger: figma.enum('Type', { Danger: true, 'Secondary danger': true }), isDisabled: figma.enum('State', { Disabled: true }), isExpanded: figma.enum('State', { Expanded: true }), - isLoading: figma.enum('State', { Progress: true }), - isWarning: figma.enum('State', { Warning: true }), - size: figma.enum('Size', { Small: 'sm' }), - state: figma.enum('State', { - Read: 'read', - Unread: 'unread', - Attention: 'attention' + isLoading: figma.enum('State', { + Progress: { + loadingProps: { + spinnerAriaValueText: 'Spinner aria value text', + spinnerAriaLabelledBy: 'Spinner aria labelled by', + spinnerAriaLabel: 'Spinner aria label', + isLoading: true + }, + onClick: () => {} + }, + 'Secondary progress': { + loadingProps: { + spinnerAriaValueText: 'Spinner aria value text', + spinnerAriaLabelledBy: 'Spinner aria labelled by', + spinnerAriaLabel: 'Spinner aria label', + isLoading: true + }, + onClick: () => {} + } }), - tabIndex: 0, + size: figma.enum('Size', { Small: 'sm' }), variant: figma.enum('Type', { Primary: 'primary', Secondary: 'secondary', @@ -57,11 +72,12 @@ figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/Patte