feat: Variable Font Size for Flex Nodes by camielvs · Pull Request #1832 · TangleML/tangle-ui

camielvs · 2026-02-20T20:27:16Z

Description

Allows both the title and body text of a Flex Node to be customizable via a slider in the context panel.

Related Issue and Pull requests

Type of Change

New feature

Checklist

I have tested this does not break current pipelines / runs functionality
I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

Edit a sticky note via the context panel. Confirm you can change the font size via a new popover above the edit box. Sticky Note should update in real time.

Additional Comments

camielvs · 2026-02-20T20:27:38Z

feat: Edit FlexNode Titles via Double-Click #1837
chore: Add FlexNode Update Hook #1836
feat: Variable Font Size for Flex Nodes #1832 👈 (View in Graphite)
feat: Lock Flex Nodes #1826
feat: Transparent Flex Nodes can have a Border #1784
feat: Double-Click to Edit Flex Nodes in-place #1783
feat: (Un)Pack Flex Nodes into Subgraphs #1769
feat: Duplicate Flex Nodes #1768
feat: zIndex Management for Flex Nodes #1755
feat: Resizable Flex Nodes #1743 : 1 other dependent PR (#1744 )
feat: Add Color Picker #1738
feat: Edit Sticky Note Content #1737
feat: Context Panel for Flex Nodes #1735 : 1 other dependent PR (#1736 )
feat: Delete Flex Nodes #1746 : 1 other dependent PR (#1747 )
feat: Add Sticky Notes to Canvas #1729 : 1 other dependent PR (#1745 )
feat: Add Basic FlexNode #1728
feat: Add StackingControls for Managing zIndex #1756 : 1 other dependent PR (#1758 )
chore: Node Definition Cleanup #1731
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx

maxy-shpfy · 2026-02-25T23:31:54Z

package.json

    "@radix-ui/react-scroll-area": "^1.2.10",
    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",


Thinking outloud - if we need to add one more package for this, or can we just use a drop-down with predefined sizes?

I did originally just offer our standard Text component sizes (xs, sm, md etc). But then we're limited by our Text component. I can very easily see a world where more granularity is desired and hence I went for a slider

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx

src/components/shared/ReactFlow/FlowCanvas/FlexNode/TextSizeSelector.tsx

maxy-shpfy · 2026-02-25T23:40:28Z

src/components/shared/ReactFlow/FlowCanvas/FlexNode/TextSizeSelector.tsx

+          <Slider
+            value={[value]}
+            onValueChange={([newValue]) => onChange(newValue)}
+            min={TEXT_SIZE_MIN}
+            max={TEXT_SIZE_MAX}
+            step={1}
+          />


IMO: using simple dropdown + free input as in Figma works better for me.

Ultimately it comes down to how much granularity & control we want to give users over the font size. I agree a nice, small, compact dropdown is preferred. I guess, arguably we could include an input box to allow any value, rather than a slider. Maybe something to explore as a follow-up

Issue to track: https://github.com/Shopify/oasis-frontend/issues/493

maxy-shpfy · 2026-02-25T23:41:21Z

src/components/shared/ReactFlow/FlowCanvas/FlexNode/TextSizeSelector.tsx

+        <div
+          className={cn(
+            "cursor-pointer border border-muted rounded-sm p-1 bg-background h-fit aspect-square hover:bg-secondary flex items-center justify-center",
+            className,
+          )}
+        >
+          <Icon name="Type" />
+        </div>


It should be a \<Button variant="ghost" > I believe?

We can't use Button here - I already tried. PopoverTrigger is already a button component and we get warnings and issues if we try to render a button inside a button

(we could update our shadcn Popover code though)

maxy-shpfy

Approving this - considering we can think about comments I left.

camielvs · 2026-02-26T03:59:44Z

I think you have a fair suggestion with the dropdown - provided we include an input box for custom sizing. I have marked it for follow up. Issue to track is here: https://github.com/Shopify/oasis-frontend/issues/493

camielvs · 2026-02-26T04:37:19Z

Merge activity

Feb 26, 4:37 AM UTC: A user started a stack merge that includes this pull request via Graphite.
Feb 26, 4:37 AM UTC: @camielvs merged this pull request with Graphite.

This was referenced Feb 20, 2026

feat: Lock Flex Nodes #1826

Merged

feat: zIndex Management for Flex Nodes #1755

Merged

feat: Duplicate Flex Nodes #1768

Merged

This was referenced Feb 20, 2026

feat: (Un)Pack Flex Nodes into Subgraphs #1769

Merged

feat: Double-Click to Edit Flex Nodes in-place #1783

Merged

feat: Transparent Flex Nodes can have a Border #1784

Merged

camielvs force-pushed the 02-20-feat_variable_font_size_for_flex_nodes branch from d320bde to fabafff Compare February 21, 2026 00:15

camielvs force-pushed the 02-18-feat_lock_flex_nodes branch from 1a7771b to 8e50ac2 Compare February 21, 2026 00:15

camielvs mentioned this pull request Feb 21, 2026

chore: Add FlexNode Update Hook #1836

Merged

3 tasks

camielvs force-pushed the 02-20-feat_variable_font_size_for_flex_nodes branch from fabafff to 21c4bc8 Compare February 21, 2026 00:40

camielvs mentioned this pull request Feb 21, 2026

feat: Edit FlexNode Titles via Double-Click #1837

Merged

3 tasks

camielvs marked this pull request as ready for review February 21, 2026 00:43

camielvs requested a review from a team as a code owner February 21, 2026 00:43

camielvs commented Feb 21, 2026

View reviewed changes

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx Show resolved Hide resolved

maxy-shpfy reviewed Feb 25, 2026

View reviewed changes

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx Outdated Show resolved Hide resolved

maxy-shpfy reviewed Feb 25, 2026

View reviewed changes

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx Outdated Show resolved Hide resolved

maxy-shpfy reviewed Feb 25, 2026

View reviewed changes

src/components/shared/ReactFlow/FlowCanvas/FlexNode/TextSizeSelector.tsx Outdated Show resolved Hide resolved

maxy-shpfy reviewed Feb 25, 2026

View reviewed changes

maxy-shpfy approved these changes Feb 26, 2026

View reviewed changes

camielvs force-pushed the 02-20-feat_variable_font_size_for_flex_nodes branch from 21c4bc8 to e600c32 Compare February 26, 2026 04:04

camielvs force-pushed the 02-18-feat_lock_flex_nodes branch from 8e50ac2 to 1c44d77 Compare February 26, 2026 04:04

camielvs force-pushed the 02-20-feat_variable_font_size_for_flex_nodes branch from e600c32 to e1855fb Compare February 26, 2026 04:23

camielvs force-pushed the 02-18-feat_lock_flex_nodes branch from 1c44d77 to 3e4049f Compare February 26, 2026 04:23

camielvs force-pushed the 02-20-feat_variable_font_size_for_flex_nodes branch from e1855fb to b1ddeb7 Compare February 26, 2026 04:24

camielvs force-pushed the 02-18-feat_lock_flex_nodes branch from 3e4049f to 31283cc Compare February 26, 2026 04:24

camielvs changed the base branch from 02-18-feat_lock_flex_nodes to graphite-base/1832 February 26, 2026 04:28

camielvs force-pushed the 02-20-feat_variable_font_size_for_flex_nodes branch from b1ddeb7 to a5fa3d7 Compare February 26, 2026 04:29

camielvs force-pushed the graphite-base/1832 branch from 31283cc to da9c615 Compare February 26, 2026 04:29

graphite-app bot changed the base branch from graphite-base/1832 to master February 26, 2026 04:29

camielvs force-pushed the 02-20-feat_variable_font_size_for_flex_nodes branch from a5fa3d7 to 7c9fade Compare February 26, 2026 04:30

feat: Variable Font Size for Flex Nodes

4b867ec

camielvs force-pushed the 02-20-feat_variable_font_size_for_flex_nodes branch from 7c9fade to 4b867ec Compare February 26, 2026 04:33

camielvs merged commit c16cda2 into master Feb 26, 2026
14 checks passed

camielvs deleted the 02-20-feat_variable_font_size_for_flex_nodes branch February 26, 2026 04:37

Conversation

camielvs commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue and Pull requests

Type of Change

Checklist

Screenshots (if applicable)

Test Instructions

Additional Comments

Uh oh!

camielvs commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy left a comment

Choose a reason for hiding this comment

Uh oh!

camielvs commented Feb 26, 2026

Uh oh!

camielvs commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

camielvs commented Feb 20, 2026 •

edited

Loading

camielvs commented Feb 20, 2026 •

edited

Loading

camielvs commented Feb 26, 2026 •

edited

Loading