feat: Transparent Flex Nodes can have a Border

[camielvs]

Description

Flex Nodes with a transparent background will now allow customization of the border color instead. The border colour, in turn, can also be transparent, essentially allowing blank text to be added to the canvas.

Border colour is not applied to sticky notes with a coloured background and the option to edit the border colour is not available for these nodes.

However, if the flex node does not have any text content and both the background and border is transparent a warning will display and the node will get a dashed orange border. This is because otherwise the node would have no visual content and would be lost on the canvas.

Related Issue and Pull requests

Closes Shopify/oasis-frontend#118

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)

Invisible Flex Node (no background colour, border colour or text content)

Test Instructions

Confirm:

• Border colour editing appears when background is transparent
• Border colour is applied to the node
• Border colour can be transparent
• A warning is displayed if the node has no colour or text
• Everything else works as expected

Additional Comments

With this PR the first implementation of Sticky Notes is considered complete!

Demo:

Sticky Notes Part Demo.mov (uploaded via Graphite)

Sticky Notes Part Demo 2.mov (uploaded via Graphite)

[camielvs]

• feat: Edit FlexNode Titles via Double-Click #1837
• chore: Add FlexNode Update Hook #1836
• feat: Variable Font Size for Flex Nodes #1832
• feat: Lock Flex Nodes #1826
• feat: Transparent Flex Nodes can have a Border #1784 👈 (View in Graphite)
• 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.

[camielvs]

Merge activity

• Feb 19, 10:58 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Feb 19, 10:58 PM UTC: @camielvs merged this pull request with Graphite.