From 655beb517b3965cda10d36b3f8d5e36347fa53df Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Thu, 12 Jun 2025 19:39:44 -0400
Subject: [PATCH 1/3] feat(CC-batch-8): added batch 8 files

---
 .../components/Slider/Slider.figma.tsx        | 37 +++++++++++++++++++
 .../components/Spinner/Spinner.figma.tsx      | 22 +++++++++++
 .../components/Splitter/Splitter.figma.tsx    | 18 +++++++++
 .../Tabs/HorizontalSubTabs.figma.tsx          | 27 ++++++++++++++
 .../components/Tabs/HorizontalTab.figma.tsx   | 28 ++++++++++++++
 .../components/Tabs/HorizontalTabs.figma.tsx  | 22 +++++++++++
 .../components/Tabs/VerticalTabs.figma.tsx    | 27 ++++++++++++++
 .../components/TimeStamp/Timestamp.figma.tsx  | 34 +++++++++++++++++
 .../ToggleGroup/ToggleGroup.figma.tsx         | 33 +++++++++++++++++
 .../components/Tooltip/Tooltip.figma.tsx      | 37 +++++++++++++++++++
 10 files changed, 285 insertions(+)
 create mode 100644 packages/code-connect/components/Slider/Slider.figma.tsx
 create mode 100644 packages/code-connect/components/Spinner/Spinner.figma.tsx
 create mode 100644 packages/code-connect/components/Splitter/Splitter.figma.tsx
 create mode 100644 packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
 create mode 100644 packages/code-connect/components/Tabs/HorizontalTab.figma.tsx
 create mode 100644 packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx
 create mode 100644 packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
 create mode 100644 packages/code-connect/components/TimeStamp/Timestamp.figma.tsx
 create mode 100644 packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
 create mode 100644 packages/code-connect/components/Tooltip/Tooltip.figma.tsx

diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx
new file mode 100644
index 00000000000..0696603db9e
--- /dev/null
+++ b/packages/code-connect/components/Slider/Slider.figma.tsx
@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { Slider } from '@patternfly/react-core';
+
+figma.connect(
+  Slider,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3155-97956&t=IzSunfrnw18ti37Y-11',
+  {
+    props: {
+      // boolean
+      leftAction: figma.boolean('Left action'),
+      minmaxValues: figma.boolean('Min/max values'),
+      rightAction: figma.boolean('Right action'),
+      valueInput: figma.boolean('Value input'),
+
+      // enum
+      state: figma.enum('State', {
+        Default: 'default',
+        Active: 'active',
+        Disabled: 'disabled',
+        Hover: 'hover'
+      }),
+      type: figma.enum('Type', {
+        Continuous: 'continuous',
+        Discrete: 'discrete'
+      })
+    },
+    example: (props) => (
+      // Documentation for Slider can be found at https://www.patternfly.org/components/slider
+      <Slider
+        areCustomStepsContinuous={props.type === 'continuous'}
+        isDisabled={props.state === 'disabled'}
+        showBoundaries={props.minmaxValues}
+        showTicks={props.type === 'discrete'}
+      />
+    )
+  }
+);
diff --git a/packages/code-connect/components/Spinner/Spinner.figma.tsx b/packages/code-connect/components/Spinner/Spinner.figma.tsx
new file mode 100644
index 00000000000..60f2bdb14e8
--- /dev/null
+++ b/packages/code-connect/components/Spinner/Spinner.figma.tsx
@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import { Spinner } from '@patternfly/react-core';
+
+figma.connect(
+  Spinner,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-332&t=IzSunfrnw18ti37Y-11',
+  {
+    props: {
+      // enum
+      size: figma.enum('Size', {
+        sm: 'sm',
+        md: 'md',
+        lg: 'lg',
+        xl: 'xl'
+      })
+    },
+    example: (props) => (
+      // Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+      <Spinner aria-label="Loading..." size={props.size} />
+    )
+  }
+);
diff --git a/packages/code-connect/components/Splitter/Splitter.figma.tsx b/packages/code-connect/components/Splitter/Splitter.figma.tsx
new file mode 100644
index 00000000000..5837687e987
--- /dev/null
+++ b/packages/code-connect/components/Splitter/Splitter.figma.tsx
@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect';
+
+figma.connect(
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8034-8230&m=dev',
+  {
+    props: {
+      // enum
+      type: figma.enum('Type', {
+        Overlay: 'overlay',
+        Vertical: 'vertical'
+      })
+    },
+    example: (props) => (
+      // Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+      <>{props.type}</>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
new file mode 100644
index 00000000000..645d3552f8c
--- /dev/null
+++ b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+figma.connect(
+  Tabs,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6583&m=dev',
+  {
+    props: {
+      children: figma.children('*'),
+      isBox: figma.enum('Type', {
+        Boxed: false,
+        'Boxed Light': true
+      })
+    },
+    example: (props) => (
+      <Tabs
+        aria-label="Horizontal subtabs example"
+        isSubtab={true}
+        isBox={props.isBox}
+        onSelect={() => {}}
+        role="region"
+      >
+        {props.children}
+      </Tabs>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx b/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx
new file mode 100644
index 00000000000..ed4bcff826a
--- /dev/null
+++ b/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx
@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { Tab, TabTitleText, Timestamp } from '@patternfly/react-core';
+
+figma.connect(
+  Timestamp,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6161',
+  {
+    props: {
+      // string
+      tabText: figma.string('Tab Text'),
+
+      // enum
+      isDisabled: figma.enum('State', {
+        Disabled: true
+      })
+    },
+    example: (props) => (
+      <Tab
+        isDisabled={props.isDisabled}
+        eventKey={0}
+        title={<TabTitleText>{props.tabText}</TabTitleText>}
+        aria-label="Default content"
+      >
+        {props.tabText}
+      </Tab>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx
new file mode 100644
index 00000000000..24cec4b0224
--- /dev/null
+++ b/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx
@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+figma.connect(
+  Tabs,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6503',
+  {
+    props: {
+      children: figma.children('*'),
+      isBox: figma.enum('Type', {
+        Boxed: false,
+        'Boxed Light': true
+      })
+    },
+    example: (props) => (
+      // Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+      <Tabs onSelect={() => {}} isBox={props.isBox} aria-label="Tabs example" role="region">
+        {props.children}
+      </Tabs>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
new file mode 100644
index 00000000000..413d44bf4c6
--- /dev/null
+++ b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+figma.connect(
+  Tabs,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6656',
+  {
+    props: {
+      children: figma.children('*'),
+      isBox: figma.enum('Type', {
+        Boxed: false,
+        'Boxed Light': true,
+        'Inset Boxed': true
+      }),
+      inset: figma.enum('Type', {
+        Inset: { default: 'insetMd' },
+        'Inset Boxed': { default: 'insetMd' }
+      })
+    },
+    example: (props) => (
+      // Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+      <Tabs isBox={props.isBox} isVertical={true} inset={props.inset} onSelect={() => {}} role="region">
+        {props.children}
+      </Tabs>
+    )
+  }
+);
diff --git a/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx b/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx
new file mode 100644
index 00000000000..1ee78a39ea6
--- /dev/null
+++ b/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx
@@ -0,0 +1,34 @@
+import figma from '@figma/code-connect';
+import { Timestamp } from '@patternfly/react-core';
+
+figma.connect(
+  Timestamp,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7472-6718',
+  {
+    props: {
+      // string
+      abbreviatedContent: figma.string('✏️ Abbreviated content'),
+      defaultTimestampContent: figma.string('✏️ Default timestamp content'),
+      numericContent: figma.string('✏️ Numeric content'),
+      withoutDay: figma.string('✏️ Without day'),
+      withoutTime: figma.string('✏️ Without time'),
+
+      // boolean
+      tooltipUnderline: figma.boolean('With tooltip underline'),
+
+      // enum
+      content: figma.enum('Format', {
+        Default: figma.string('✏️ Default timestamp content'),
+        'Without time': figma.string('✏️ Without time'),
+        'Without day': figma.string('✏️ Without day'),
+        Abbreviated: figma.string('✏️ Abbreviated content'),
+        Numeric: figma.string('✏️ Numeric content')
+      }),
+      children: figma.children('*')
+    },
+    example: (props) => (
+      // Documentation for Timestamp can be found at https://www.patternfly.org/components/timestamp
+      <Timestamp date={props.content} tooltip={props.tooltipUnderline} />
+    )
+  }
+);
diff --git a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
new file mode 100644
index 00000000000..e278100da1d
--- /dev/null
+++ b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
@@ -0,0 +1,33 @@
+import figma from '@figma/code-connect';
+import { ToggleGroup } from '@patternfly/react-core';
+
+figma.connect(
+  ToggleGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7644-56919',
+  {
+    props: {
+      // enum
+      size: figma.enum('Size', {
+        Default: 'default',
+        Compact: 'compact'
+      }),
+
+      // nested props
+      leftItem: figma.nestedProps('Base components/Toggle groups parts', {
+        text: figma.string('Text')
+      }),
+      middleItem1: figma.nestedProps('Base components/Toggle groups parts', {
+        text: figma.string('Text')
+      }),
+      middleItem2: figma.nestedProps('Base components/Toggle groups parts', {
+        text: figma.string('Text')
+      }),
+      rightItem: figma.nestedProps('Base components/Toggle groups parts', {
+        text: figma.string('Text')
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => <ToggleGroup aria-label="Toggle group example">{props.children}</ToggleGroup>
+  }
+);
diff --git a/packages/code-connect/components/Tooltip/Tooltip.figma.tsx b/packages/code-connect/components/Tooltip/Tooltip.figma.tsx
new file mode 100644
index 00000000000..3429393c2cc
--- /dev/null
+++ b/packages/code-connect/components/Tooltip/Tooltip.figma.tsx
@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { Tooltip } from '@patternfly/react-core';
+
+figma.connect(
+  Tooltip,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6598-70985',
+  {
+    props: {
+      // string
+      content: figma.string('Text'),
+
+      // enum
+      position: figma.enum('Type', {
+        'Bottom-left': 'bottom-start',
+        'Bottom-middle': 'bottom',
+        'Bottom-right': 'bottom-end',
+        'Left-bottom': 'left-end',
+        'Left-middle': 'left',
+        'Left-top': 'left-start',
+        'Right-bottom': 'right-end',
+        'Right-middle': 'right',
+        'Right-top': 'right-start',
+        'Top-left': 'top-start',
+        'Top-middle': 'top',
+        'Top-right': 'top-end'
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      // Documentation for Tooltip can be found at https://www.patternfly.org/components/tooltip
+      <Tooltip content={props.content} position={props.position}>
+        {props.children}
+      </Tooltip>
+    )
+  }
+);

From 14f289ba3c320abf1f8a7906a39156ffaeed6b49 Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Tue, 17 Jun 2025 09:27:49 -0400
Subject: [PATCH 2/3] feat(CC-batch-8): updated required props

---
 packages/code-connect/components/Slider/Slider.figma.tsx | 9 +++++----
 .../components/Tabs/HorizontalSubTabs.figma.tsx          | 2 +-
 .../code-connect/components/Tabs/VerticalTabs.figma.tsx  | 2 +-
 .../components/ToggleGroup/ToggleGroup.figma.tsx         | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx
index 0696603db9e..839c292ab12 100644
--- a/packages/code-connect/components/Slider/Slider.figma.tsx
+++ b/packages/code-connect/components/Slider/Slider.figma.tsx
@@ -14,11 +14,12 @@ figma.connect(
 
       // enum
       state: figma.enum('State', {
-        Default: 'default',
+        Default: undefined,
         Active: 'active',
         Disabled: 'disabled',
         Hover: 'hover'
       }),
+      isDisabled: figma.enum('State', { Disabled: true }),
       type: figma.enum('Type', {
         Continuous: 'continuous',
         Discrete: 'discrete'
@@ -27,10 +28,10 @@ figma.connect(
     example: (props) => (
       // Documentation for Slider can be found at https://www.patternfly.org/components/slider
       <Slider
-        areCustomStepsContinuous={props.type === 'continuous'}
-        isDisabled={props.state === 'disabled'}
+        areCustomStepsContinuous={props.type}
+        isDisabled={props.isDisabled}
         showBoundaries={props.minmaxValues}
-        showTicks={props.type === 'discrete'}
+        showTicks={props.type}
       />
     )
   }
diff --git a/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
index 645d3552f8c..8add074f8ca 100644
--- a/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
+++ b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
@@ -8,7 +8,7 @@ figma.connect(
     props: {
       children: figma.children('*'),
       isBox: figma.enum('Type', {
-        Boxed: false,
+        Boxed: true,
         'Boxed Light': true
       })
     },
diff --git a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
index 413d44bf4c6..722c764d8f7 100644
--- a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
+++ b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
@@ -8,7 +8,7 @@ figma.connect(
     props: {
       children: figma.children('*'),
       isBox: figma.enum('Type', {
-        Boxed: false,
+        Boxed: true,
         'Boxed Light': true,
         'Inset Boxed': true
       }),
diff --git a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
index e278100da1d..8493f8a66da 100644
--- a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
+++ b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
@@ -8,7 +8,7 @@ figma.connect(
     props: {
       // enum
       size: figma.enum('Size', {
-        Default: 'default',
+        Default: undefined,
         Compact: 'compact'
       }),
 

From 1ef1f14e77b53e9dd5eece47305cff9bf74f897f Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Tue, 24 Jun 2025 11:21:21 -0400
Subject: [PATCH 3/3] feat(CC-batch-8): verification complete

---
 .../components/Slider/Slider.figma.tsx        | 44 ++++++++-----
 .../components/Spinner/Spinner.figma.tsx      |  7 +--
 .../components/Splitter/Splitter.figma.tsx    | 28 ++++-----
 .../Tabs/HorizontalSubTabs.figma.tsx          |  4 +-
 .../components/Tabs/HorizontalTab.figma.tsx   | 54 +++++++++++++---
 .../components/Tabs/HorizontalTabs.figma.tsx  |  5 +-
 .../components/Tabs/TabVertical.figma.tsx     | 62 +++++++++++++++++++
 .../components/Tabs/VerticalTabs.figma.tsx    | 14 +++--
 .../components/TimeStamp/Timestamp.figma.tsx  | 42 ++++++++-----
 .../ToggleGroup/ToggleGroup.figma.tsx         |  2 +
 .../components/Tooltip/Tooltip.figma.tsx      |  7 ++-
 11 files changed, 199 insertions(+), 70 deletions(-)
 create mode 100644 packages/code-connect/components/Tabs/TabVertical.figma.tsx

diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx
index 839c292ab12..34c67c25b60 100644
--- a/packages/code-connect/components/Slider/Slider.figma.tsx
+++ b/packages/code-connect/components/Slider/Slider.figma.tsx
@@ -1,5 +1,10 @@
 import figma from '@figma/code-connect';
-import { Slider } from '@patternfly/react-core';
+import { Button, Slider } from '@patternfly/react-core';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+// TODO: FIGMA: Define left/right actions
+// Documentation for Slider can be found at https://www.patternfly.org/components/slider
 
 figma.connect(
   Slider,
@@ -7,31 +12,36 @@ figma.connect(
   {
     props: {
       // boolean
-      leftAction: figma.boolean('Left action'),
+      isInputVisible: figma.boolean('Value input'),
       minmaxValues: figma.boolean('Min/max values'),
-      rightAction: figma.boolean('Right action'),
       valueInput: figma.boolean('Value input'),
-
-      // enum
-      state: figma.enum('State', {
-        Default: undefined,
-        Active: 'active',
-        Disabled: 'disabled',
-        Hover: 'hover'
+      startActions: figma.boolean('Left action', {
+        true: <Button variant="plain" aria-label="Minus" onClick={onMinusClick} icon={<MinusIcon />} />,
+        false: undefined
       }),
+      endActions: figma.boolean('Right action', {
+        true: <Button variant="plain" aria-label="Plus" onClick={onPlusClick} icon={<PlusIcon />} />,
+        false: undefined
+      }),
+      // enum
+      isActive: figma.enum('State', { Active: true }),
+      isContinuous: figma.enum('Type', { Continuous: true }),
       isDisabled: figma.enum('State', { Disabled: true }),
-      type: figma.enum('Type', {
-        Continuous: 'continuous',
-        Discrete: 'discrete'
-      })
+      showTicks: figma.enum('Type', { Discrete: true })
     },
     example: (props) => (
-      // Documentation for Slider can be found at https://www.patternfly.org/components/slider
       <Slider
-        areCustomStepsContinuous={props.type}
+        areCustomStepsContinuous={props.isContinuous}
+        isActive={props.isActive}
+        isInputVisible={props.isInputVisible}
         isDisabled={props.isDisabled}
+        max={200}
+        step={50}
+        value={100}
         showBoundaries={props.minmaxValues}
-        showTicks={props.type}
+        showTicks={props.showTicks}
+        startActions={props.startActions}
+        endActions={props.endActions}
       />
     )
   }
diff --git a/packages/code-connect/components/Spinner/Spinner.figma.tsx b/packages/code-connect/components/Spinner/Spinner.figma.tsx
index 60f2bdb14e8..c0d78a13861 100644
--- a/packages/code-connect/components/Spinner/Spinner.figma.tsx
+++ b/packages/code-connect/components/Spinner/Spinner.figma.tsx
@@ -1,6 +1,8 @@
 import figma from '@figma/code-connect';
 import { Spinner } from '@patternfly/react-core';
 
+// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+
 figma.connect(
   Spinner,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-332&t=IzSunfrnw18ti37Y-11',
@@ -14,9 +16,6 @@ figma.connect(
         xl: 'xl'
       })
     },
-    example: (props) => (
-      // Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
-      <Spinner aria-label="Loading..." size={props.size} />
-    )
+    example: (props) => <Spinner aria-label="Loading..." size={props.size} />
   }
 );
diff --git a/packages/code-connect/components/Splitter/Splitter.figma.tsx b/packages/code-connect/components/Splitter/Splitter.figma.tsx
index 5837687e987..8b0655a0293 100644
--- a/packages/code-connect/components/Splitter/Splitter.figma.tsx
+++ b/packages/code-connect/components/Splitter/Splitter.figma.tsx
@@ -1,18 +1,14 @@
 import figma from '@figma/code-connect';
 
-figma.connect(
-  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8034-8230&m=dev',
-  {
-    props: {
-      // enum
-      type: figma.enum('Type', {
-        Overlay: 'overlay',
-        Vertical: 'vertical'
-      })
-    },
-    example: (props) => (
-      // Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
-      <>{props.type}</>
-    )
-  }
-);
+// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+
+figma.connect('https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8034-8230', {
+  props: {
+    // enum
+    type: figma.enum('Type', {
+      Overlay: 'overlay',
+      Vertical: 'vertical'
+    })
+  },
+  example: (props) => <>{props.type}</>
+});
diff --git a/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
index 8add074f8ca..9b1d58ab17e 100644
--- a/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
+++ b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx
@@ -1,9 +1,11 @@
 import figma from '@figma/code-connect';
 import { Tabs } from '@patternfly/react-core';
 
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
 figma.connect(
   Tabs,
-  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6583&m=dev',
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6583',
   {
     props: {
       children: figma.children('*'),
diff --git a/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx b/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx
index ed4bcff826a..833493d6b98 100644
--- a/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx
+++ b/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx
@@ -1,27 +1,63 @@
 import figma from '@figma/code-connect';
-import { Tab, TabTitleText, Timestamp } from '@patternfly/react-core';
+import { Tab, TabAction, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
+
+// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
 
 figma.connect(
-  Timestamp,
+  Tab,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6161',
   {
     props: {
       // string
       tabText: figma.string('Tab Text'),
+      // eventKey: figma.string('Event key'), // TODO: FIGMA: Add event key
+
+      // boolean
+      actions: figma.boolean('Help button', {
+        true: (ref: React.RefObject<HTMLDivElement>) => (
+          <>
+            <TabAction aria-label="Help action for tab" ref={ref}>
+              <HelpIcon />
+            </TabAction>
+            {helpPopover('Help popover for tab')}
+          </>
+        ),
+        false: undefined
+      }),
+      onClose: figma.boolean('Close button', {
+        true: () => {},
+        false: undefined
+      }),
+      hasIcon: figma.boolean('Has icon', {
+        true: (
+          <TabTitleIcon>
+            <UsersIcon />
+          </TabTitleIcon>
+        ),
+        false: undefined
+      }),
 
       // enum
-      isDisabled: figma.enum('State', {
-        Disabled: true
-      })
+      isDisabled: figma.enum('State', { Disabled: true })
     },
     example: (props) => (
       <Tab
-        isDisabled={props.isDisabled}
+        actions={props.actions}
+        aria-label="Tab context"
         eventKey={0}
-        title={<TabTitleText>{props.tabText}</TabTitleText>}
-        aria-label="Default content"
+        isDisabled={props.isDisabled}
+        onClose={props.onClose}
+        title={
+          <>
+            <TabTitleText>{props.tabText}</TabTitleText>
+            {props.hasIcon}
+          </>
+        }
       >
-        {props.tabText}
+        {props.tabText} Content
       </Tab>
     )
   }
diff --git a/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx
index 24cec4b0224..085a2910159 100644
--- a/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx
+++ b/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx
@@ -1,6 +1,8 @@
 import figma from '@figma/code-connect';
 import { Tabs } from '@patternfly/react-core';
 
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
 figma.connect(
   Tabs,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6503',
@@ -8,12 +10,11 @@ figma.connect(
     props: {
       children: figma.children('*'),
       isBox: figma.enum('Type', {
-        Boxed: false,
+        Boxed: true,
         'Boxed Light': true
       })
     },
     example: (props) => (
-      // Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
       <Tabs onSelect={() => {}} isBox={props.isBox} aria-label="Tabs example" role="region">
         {props.children}
       </Tabs>
diff --git a/packages/code-connect/components/Tabs/TabVertical.figma.tsx b/packages/code-connect/components/Tabs/TabVertical.figma.tsx
new file mode 100644
index 00000000000..d85da9a4ac8
--- /dev/null
+++ b/packages/code-connect/components/Tabs/TabVertical.figma.tsx
@@ -0,0 +1,62 @@
+import figma from '@figma/code-connect';
+import { Tab, TabAction, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
+
+// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+figma.connect(
+  Tab,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6407',
+  {
+    props: {
+      // string
+      tabText: figma.string('Text'),
+
+      // boolean
+      actions: figma.boolean('Help icon', {
+        true: (ref: React.RefObject<HTMLDivElement>) => (
+          <>
+            <TabAction aria-label="Help action for tab" ref={ref}>
+              <HelpIcon />
+            </TabAction>
+            {helpPopover(`Help popover for tab`)}
+          </>
+        ),
+        false: undefined
+      }),
+      onClose: figma.boolean('Close Icon', {
+        true: () => {},
+        false: undefined
+      }),
+      hasIcon: figma.boolean('Has icon', {
+        true: (
+          <TabTitleIcon>
+            <UsersIcon />
+          </TabTitleIcon>
+        ),
+        false: undefined
+      }),
+
+      // enum
+      isDisabled: figma.enum('State', { Disabled: true })
+      // eventKey: figma.string('Event key'), // TODO: FIGMA: Add event key
+    },
+    example: (props) => (
+      <Tab
+        eventKey={0}
+        isDisabled={props.isDisabled}
+        onClose={props.onClose}
+        title={
+          <>
+            <TabTitleText>{props.tabText}</TabTitleText>
+            {props.hasIcon}
+          </>
+        }
+      >
+        {props.tabText} Content
+      </Tab>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
index 722c764d8f7..93098d27b6b 100644
--- a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
+++ b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
@@ -1,16 +1,23 @@
 import figma from '@figma/code-connect';
 import { Tabs } from '@patternfly/react-core';
 
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
 figma.connect(
   Tabs,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6656',
   {
     props: {
       children: figma.children('*'),
+      isExpandable: figma.enum('Type', {
+        Expandable: {
+          default: 'expandable'
+        },
+        false: undefined
+      }),
       isBox: figma.enum('Type', {
         Boxed: true,
-        'Boxed Light': true,
-        'Inset Boxed': true
+        'Boxed Light': true
       }),
       inset: figma.enum('Type', {
         Inset: { default: 'insetMd' },
@@ -18,8 +25,7 @@ figma.connect(
       })
     },
     example: (props) => (
-      // Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
-      <Tabs isBox={props.isBox} isVertical={true} inset={props.inset} onSelect={() => {}} role="region">
+      <Tabs isBox={props.isBox} isVertical={true} onSelect={() => {}} role="region">
         {props.children}
       </Tabs>
     )
diff --git a/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx b/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx
index 1ee78a39ea6..194525b966a 100644
--- a/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx
+++ b/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx
@@ -1,5 +1,8 @@
 import figma from '@figma/code-connect';
-import { Timestamp } from '@patternfly/react-core';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+// TODO: FIGMA: Refine intent, enum/dropdown options confuse date and time formats. They shoudd be separated
+// Documentation for Timestamp can be found at https://www.patternfly.org/components/timestamp
 
 figma.connect(
   Timestamp,
@@ -7,28 +10,39 @@ figma.connect(
   {
     props: {
       // string
-      abbreviatedContent: figma.string('✏️ Abbreviated content'),
       defaultTimestampContent: figma.string('✏️ Default timestamp content'),
-      numericContent: figma.string('✏️ Numeric content'),
-      withoutDay: figma.string('✏️ Without day'),
-      withoutTime: figma.string('✏️ Without time'),
 
       // boolean
-      tooltipUnderline: figma.boolean('With tooltip underline'),
+      hasTooltip: figma.boolean('With tooltip underline', {
+        true: {
+          tooltip: { variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time (UTC)' }
+        },
+        false: undefined
+      }),
 
       // enum
-      content: figma.enum('Format', {
-        Default: figma.string('✏️ Default timestamp content'),
-        'Without time': figma.string('✏️ Without time'),
-        'Without day': figma.string('✏️ Without day'),
-        Abbreviated: figma.string('✏️ Abbreviated content'),
-        Numeric: figma.string('✏️ Numeric content')
+      dateFormat: figma.enum('Format', {
+        Default: 'full',
+        'Without time': 'medium',
+        'Without day': undefined,
+        Abbreviated: 'short',
+        Numeric: 'numeric'
+      }),
+      timeFormat: figma.enum('Format', {
+        'Without time': undefined,
+        Abbreviated: 'short',
+        Numeric: 'numeric'
       }),
       children: figma.children('*')
     },
     example: (props) => (
-      // Documentation for Timestamp can be found at https://www.patternfly.org/components/timestamp
-      <Timestamp date={props.content} tooltip={props.tooltipUnderline} />
+      <Timestamp
+        date={props.defaultTimestampContent}
+        timeFormat={props.timeFormat}
+        dateFormat={props.dateFormat}
+        dateContent={props.dateFormat}
+        tooltip={props.hasTooltip}
+      />
     )
   }
 );
diff --git a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
index 8493f8a66da..e84cf396360 100644
--- a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
+++ b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
@@ -1,6 +1,8 @@
 import figma from '@figma/code-connect';
 import { ToggleGroup } from '@patternfly/react-core';
 
+// Documentation for ToggleGroup can be found at https://www.patternfly.org/components/toggle-group
+
 figma.connect(
   ToggleGroup,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7644-56919',
diff --git a/packages/code-connect/components/Tooltip/Tooltip.figma.tsx b/packages/code-connect/components/Tooltip/Tooltip.figma.tsx
index 3429393c2cc..356ba4b75d9 100644
--- a/packages/code-connect/components/Tooltip/Tooltip.figma.tsx
+++ b/packages/code-connect/components/Tooltip/Tooltip.figma.tsx
@@ -1,5 +1,7 @@
 import figma from '@figma/code-connect';
-import { Tooltip } from '@patternfly/react-core';
+import { Button, Tooltip } from '@patternfly/react-core';
+
+// Documentation for Tooltip can be found at https://www.patternfly.org/components/tooltip
 
 figma.connect(
   Tooltip,
@@ -28,9 +30,8 @@ figma.connect(
       children: figma.children('*')
     },
     example: (props) => (
-      // Documentation for Tooltip can be found at https://www.patternfly.org/components/tooltip
       <Tooltip content={props.content} position={props.position}>
-        {props.children}
+        <Button>I have a tooltip!</Button>
       </Tooltip>
     )
   }