From b1e42edbc91c751932e8aaf444c73e2cc4155d76 Mon Sep 17 00:00:00 2001 From: Kurt Doherty Date: Tue, 16 Sep 2025 06:53:17 +1000 Subject: [PATCH] feat: add code connect for `FolderTabs`, `PrimaryTabs`, `SecondaryTabs`, and `Tooltip` --- figma.config.json | 16 ++++++++++-- .../count-label/count-label.figma.tsx | 20 +++++++++++++++ .../folder-tabs/count-label/count-label.tsx | 2 ++ src/core/folder-tabs/folder-tabs.figma.tsx | 25 +++++++++++++++++++ src/core/folder-tabs/tab/tab.figma.tsx | 24 ++++++++++++++++++ src/core/folder-tabs/tab/tab.tsx | 2 ++ .../primary-tabs/primary-tabs-item.figma.tsx | 13 ++++++++++ src/core/primary-tabs/primary-tabs-item.tsx | 2 ++ src/core/primary-tabs/primary-tabs.figma.tsx | 10 ++++++++ .../secondary-tabs-item.figma.tsx | 13 ++++++++++ .../secondary-tabs/secondary-tabs-item.tsx | 2 ++ .../secondary-tabs/secondary-tabs.figma.tsx | 10 ++++++++ src/core/tooltip/tooltip.figma.tsx | 13 ++++++++++ src/storybook/changelog.mdx | 1 + vite.config.ts | 2 ++ 15 files changed, 153 insertions(+), 2 deletions(-) create mode 100644 src/core/folder-tabs/count-label/count-label.figma.tsx create mode 100644 src/core/folder-tabs/folder-tabs.figma.tsx create mode 100644 src/core/folder-tabs/tab/tab.figma.tsx create mode 100644 src/core/primary-tabs/primary-tabs-item.figma.tsx create mode 100644 src/core/primary-tabs/primary-tabs.figma.tsx create mode 100644 src/core/secondary-tabs/secondary-tabs-item.figma.tsx create mode 100644 src/core/secondary-tabs/secondary-tabs.figma.tsx create mode 100644 src/core/tooltip/tooltip.figma.tsx diff --git a/figma.config.json b/figma.config.json index e4e9371b6..738da1038 100644 --- a/figma.config.json +++ b/figma.config.json @@ -1,7 +1,7 @@ { "codeConnect": { "include": [ - "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,link,select-native,split-button,tag,tag-group}/**/*.{tsx,jsx}" + "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,folder-tabs,link,primary-tabs,secondary-tabs,select-native,split-button,tag,tag-group,tooltip}/**/*.{tsx,jsx}" ], "importPaths": { "src/core/*": "@reapit/elements/core/*", @@ -31,13 +31,25 @@ "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=86-1823", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12955-37788", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9645", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28409", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28306", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28415", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28421", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-19347", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15272-53111", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-63400", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11867-66681", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12404-18248", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9778", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-10149", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2356-10273", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=60-1049", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436", "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=118-6272", - "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982" + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=209-5342", + "": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436" } } } diff --git a/src/core/folder-tabs/count-label/count-label.figma.tsx b/src/core/folder-tabs/count-label/count-label.figma.tsx new file mode 100644 index 000000000..5c34643b5 --- /dev/null +++ b/src/core/folder-tabs/count-label/count-label.figma.tsx @@ -0,0 +1,20 @@ +import figma from '@figma/code-connect' +import { FolderTabs } from '../folder-tabs' + +figma.connect(FolderTabs.CountLabel, '', { + variant: { Variant: 'Count' }, + props: { + children: figma.string('Label'), + count: figma.string('Count'), + }, + example: (props) => {props.children}, +}) + +figma.connect(FolderTabs.CountLabel, '', { + variant: { Variant: 'Count' }, + props: { + children: figma.string('Label'), + count: figma.string('Count'), + }, + example: (props) => {props.children}, +}) diff --git a/src/core/folder-tabs/count-label/count-label.tsx b/src/core/folder-tabs/count-label/count-label.tsx index 2485c5eae..50b360e35 100644 --- a/src/core/folder-tabs/count-label/count-label.tsx +++ b/src/core/folder-tabs/count-label/count-label.tsx @@ -23,3 +23,5 @@ export function FolderTabCountLabel({ children, count, ...rest }: FolderTabCount ) } + +FolderTabCountLabel.displayName = 'FolderTabs.CountLabel' diff --git a/src/core/folder-tabs/folder-tabs.figma.tsx b/src/core/folder-tabs/folder-tabs.figma.tsx new file mode 100644 index 000000000..94ba6d503 --- /dev/null +++ b/src/core/folder-tabs/folder-tabs.figma.tsx @@ -0,0 +1,25 @@ +import { FolderTabs } from './folder-tabs' +import figma from '@figma/code-connect' + +// NOTE: This is the top-most folder tabs component in Figma +figma.connect(FolderTabs, '', { + props: { + children: figma.children('Folder tabs'), + }, + example: (props) => {props.children}, +}) + +// NOTE: These two are the two breakpoint-specific folder tab components in Figma +figma.connect(FolderTabs, '', { + props: { + children: figma.children('Tab *'), + }, + example: (props) => {props.children}, +}) + +figma.connect(FolderTabs, '', { + props: { + children: figma.children('Tab *'), + }, + example: (props) => {props.children}, +}) diff --git a/src/core/folder-tabs/tab/tab.figma.tsx b/src/core/folder-tabs/tab/tab.figma.tsx new file mode 100644 index 000000000..68565c49a --- /dev/null +++ b/src/core/folder-tabs/tab/tab.figma.tsx @@ -0,0 +1,24 @@ +import figma from '@figma/code-connect' +import { FolderTabs } from '../folder-tabs' + +figma.connect(FolderTabs.Item, '', { + props: { + children: figma.children('↳Content'), + }, + example: (props) => ( + + {props.children} + + ), +}) + +figma.connect(FolderTabs.Item, '', { + props: { + children: figma.children('↳Content'), + }, + example: (props) => ( + + {props.children} + + ), +}) diff --git a/src/core/folder-tabs/tab/tab.tsx b/src/core/folder-tabs/tab/tab.tsx index 9e43dc8ce..7bae6860b 100644 --- a/src/core/folder-tabs/tab/tab.tsx +++ b/src/core/folder-tabs/tab/tab.tsx @@ -30,3 +30,5 @@ export function FolderTab({ children, ...rest }: FolderTab.Props) { ) } + +FolderTab.displayName = 'FolderTabs.Item' diff --git a/src/core/primary-tabs/primary-tabs-item.figma.tsx b/src/core/primary-tabs/primary-tabs-item.figma.tsx new file mode 100644 index 000000000..b236656bb --- /dev/null +++ b/src/core/primary-tabs/primary-tabs-item.figma.tsx @@ -0,0 +1,13 @@ +import figma from '@figma/code-connect' +import { PrimaryTabs } from './primary-tabs' + +figma.connect(PrimaryTabs.Item, '', { + props: { + children: figma.string('Tab name'), + }, + example: (props) => ( + + {props.children} + + ), +}) diff --git a/src/core/primary-tabs/primary-tabs-item.tsx b/src/core/primary-tabs/primary-tabs-item.tsx index d3fff8fd8..5b5972a32 100644 --- a/src/core/primary-tabs/primary-tabs-item.tsx +++ b/src/core/primary-tabs/primary-tabs-item.tsx @@ -20,3 +20,5 @@ export function PrimaryTabsItem(props: PrimaryTabsItem.Props) { ) } + +PrimaryTabsItem.displayName = 'PrimaryTabs.Item' diff --git a/src/core/primary-tabs/primary-tabs.figma.tsx b/src/core/primary-tabs/primary-tabs.figma.tsx new file mode 100644 index 000000000..7f7fe002e --- /dev/null +++ b/src/core/primary-tabs/primary-tabs.figma.tsx @@ -0,0 +1,10 @@ +import figma from '@figma/code-connect' +import { PrimaryTabs } from './primary-tabs' + +figma.connect(PrimaryTabs, '', { + variant: { Variant: 'Default' }, + props: { + children: figma.children('Tab item'), + }, + example: (props) => {props.children}, +}) diff --git a/src/core/secondary-tabs/secondary-tabs-item.figma.tsx b/src/core/secondary-tabs/secondary-tabs-item.figma.tsx new file mode 100644 index 000000000..116010fda --- /dev/null +++ b/src/core/secondary-tabs/secondary-tabs-item.figma.tsx @@ -0,0 +1,13 @@ +import figma from '@figma/code-connect' +import { SecondaryTabs } from './secondary-tabs' + +figma.connect(SecondaryTabs.Item, '', { + props: { + children: figma.string('Tab name'), + }, + example: (props) => ( + + {props.children} + + ), +}) diff --git a/src/core/secondary-tabs/secondary-tabs-item.tsx b/src/core/secondary-tabs/secondary-tabs-item.tsx index 4f55af0e6..591ed9597 100644 --- a/src/core/secondary-tabs/secondary-tabs-item.tsx +++ b/src/core/secondary-tabs/secondary-tabs-item.tsx @@ -21,3 +21,5 @@ export function SecondaryTabsItem(props: SecondaryTabsItem.Props) { ) } + +SecondaryTabsItem.displayName = 'SecondaryTabs.Item' diff --git a/src/core/secondary-tabs/secondary-tabs.figma.tsx b/src/core/secondary-tabs/secondary-tabs.figma.tsx new file mode 100644 index 000000000..f7c9b9bb0 --- /dev/null +++ b/src/core/secondary-tabs/secondary-tabs.figma.tsx @@ -0,0 +1,10 @@ +import figma from '@figma/code-connect' +import { SecondaryTabs } from './secondary-tabs' + +figma.connect(SecondaryTabs, '', { + variant: { Variant: 'Secondary' }, + props: { + children: figma.children('Secondary tab item'), + }, + example: (props) => {props.children}, +}) diff --git a/src/core/tooltip/tooltip.figma.tsx b/src/core/tooltip/tooltip.figma.tsx new file mode 100644 index 000000000..27628439d --- /dev/null +++ b/src/core/tooltip/tooltip.figma.tsx @@ -0,0 +1,13 @@ +import figma from '@figma/code-connect' +import { Tooltip } from './tooltip' + +figma.connect(Tooltip, '', { + props: { + children: figma.string('Description'), + }, + example: (props) => ( + + {props.children} + + ), +}) diff --git a/src/storybook/changelog.mdx b/src/storybook/changelog.mdx index d9cca7f34..67a8b29f8 100644 --- a/src/storybook/changelog.mdx +++ b/src/storybook/changelog.mdx @@ -24,6 +24,7 @@ Beta versions should be relatively stable but subject to occssional breaking cha - Renamed `FeaturesItem` to `FeatureItem`. If consumers are using `Features.Item` or the common items like `Features.Bedrooms`, this change will have no impact. - **feat:** Added Figma Code Connect for `BottomBar`, `ButtonGroup`, `ChipSelect` and `CompactSelectNative`. - **feat:** Added Figma Code Connect for `Divider`, `EmptyData`, `SelectNative`, and `SplitButton`. +- **feat:** Added Figma Code Connect for `FolderTabs`, `PrimaryTabs`, `SecondaryTabs`, and `Tooltip`. ### **5.0.0-beta.51 - 12/09/25** diff --git a/vite.config.ts b/vite.config.ts index 3bac2e3fb..e20d9ee74 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -122,6 +122,8 @@ export default defineConfig({ '**/__story__/**', // - barrel files '**/index.ts', + // - our figma code connect files + '**/*.figma.*', // - our tests themselves '**/*.test.*', // - our stories