FCT 36292 stabilize button and link #2616

sergiocarracedo · 2025-09-17T16:08:41Z

Description

rename actions folder to lowercase
Button
- Rename to F0Button
- Use Actions component to render the button
- Accept href and target to use anchor instead of button for navigation (with the same visuals)
- Make pressed and className private properties
- Add compact private property to reduce the paddings (useful for some icons only buttons, like pulseAvatar states, etc
- Improve the storybook docs
Link
- Rename to F0Link
- Improve storybook
ButtonToggle
- Rename to F0ButtonToggle
  - Allow to pass 2 icons in the icon prop to render in each state
  - Animate icon change
  - Move to stable
DropdownButton
- rename to F0ButtonDropdown
- move to stable
- Add storybook doc and improve the stories
CopyButton
- Rename to ButtonCopy
- Move to ui/ as internal component
- Use Action component
Remove ui/button component as Action does the same
- Replace all the ui/button usages by ButtonInternal or Action depending on the case

Needs this PR in the monorepo https://github.com/factorialco/factorial/pull/77211

Screenshots (if applicable)

[Link to Figma Design](Figma URL here)

Implementation details

feat: rename buttons chore: rename Button chore: fix imports feet: use internal Action component feet: use internal Action component feet: use internal Action component

…lize-button-and-link

github-actions · 2025-09-17T16:11:16Z

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	16.75%	16175 / 96567
🔵	Statements	16.75%	16175 / 96567
🔵	Functions	43.69%	818 / 1872
🔵	Branches	71.01%	2286 / 3219

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/docs/components/BareColor.tsx	0%	0%	0%	0%	1-43
packages/react/docs/components/ColorToken.tsx	0%	0%	0%	0%	1-41
packages/react/src/components/exports.ts	0%	0%	0%	0%	1-15
packages/react/src/components/F0Button/index.ts	100%	100%	100%	100%
packages/react/src/components/F0Button/internal-types.ts	100%	100%	100%	100%
packages/react/src/components/F0Button/internal.tsx	95.57%	95.45%	100%	95.57%	122-126
packages/react/src/components/F0Button/types.ts	100%	100%	100%	100%
packages/react/src/components/F0ButtonDropdown/index.ts	100%	100%	100%	100%
packages/react/src/components/F0ButtonDropdown/types.ts	100%	100%	100%	100%
packages/react/src/components/F0ButtonToggle/F0ButtonToggle.tsx	100%	100%	100%	100%
packages/react/src/components/F0ButtonToggle/index.tsx	0%	0%	0%	0%	1-2
packages/react/src/components/F0ButtonToggle/types.ts	0%	100%	100%	0%	3
packages/react/src/components/F0ButtonToggle/__stories__/F0ButtonToggle.stories.tsx	0%	0%	0%	0%	1-114
packages/react/src/components/F0Card/CardInternal.tsx	99.45%	92.85%	100%	99.45%	156
packages/react/src/components/F0Card/components/CardActions.tsx	80.64%	76.47%	100%	80.64%	54-64, 97
packages/react/src/components/F0Card/components/CardOptions.tsx	98.14%	90.9%	100%	98.14%	63
packages/react/src/components/F0Link/F0Link.tsx	86.11%	83.33%	50%	86.11%	27-31
packages/react/src/components/F0Link/index.tsx	100%	100%	100%	100%
packages/react/src/components/F0Link/types.ts	100%	100%	100%	100%
packages/react/src/components/OneFilterPicker/components/FiltersChipsList.tsx	93.54%	80%	33.33%	93.54%	50-51, 68-69
packages/react/src/components/OneFilterPicker/components/FiltersControls.tsx	100%	85.71%	100%	100%
packages/react/src/components/OneFilterPicker/filterTypes/DateFilter/DateFilter.tsx	8.1%	100%	0%	8.1%	30-66
packages/react/src/components/OneFilterPicker/filterTypes/InFilter/InFilter.tsx	80%	94.44%	40%	80%	105-122, 137-148, 151-152
packages/react/src/components/UpsellingKit/ProductBlankslate/index.stories.tsx	0%	100%	100%	0%	2-116
packages/react/src/components/UpsellingKit/ProductCard/index.tsx	5.88%	100%	0%	5.88%	19-109
packages/react/src/components/UpsellingKit/ProductModal/index.tsx	0%	0%	0%	0%	1-161
packages/react/src/components/UpsellingKit/ProductModal/components/CustomModal.tsx	0%	0%	0%	0%	1-67
packages/react/src/components/UpsellingKit/ProductWidget/index.tsx	0%	0%	0%	0%	1-154
packages/react/src/components/UpsellingKit/UpsellRequestResponseDialog/index.tsx	10.29%	100%	0%	10.29%	50-67, 71-83, 87-133, 140-203
packages/react/src/components/UpsellingKit/UpsellingBanner/index.tsx	0%	0%	0%	0%	1-91
packages/react/src/components/UpsellingKit/UpsellingButton/index.stories.tsx	0%	100%	100%	0%	2-129
packages/react/src/components/UpsellingKit/UpsellingButton/index.tsx	7.35%	100%	0%	7.35%	66-134
packages/react/src/components/UpsellingKit/UpsellingPopover/index.tsx	0%	0%	0%	0%	1-146
packages/react/src/components/Utilities/Await/__stories__/Await.stories.tsx	0%	100%	100%	0%	3-89
packages/react/src/components/avatars/F0AvatarPulse/F0AvatarPulse.tsx	0%	0%	0%	0%	1-208
packages/react/src/experimental/exports.ts	0%	0%	0%	0%	1-33
packages/react/src/experimental/Actions/exports.ts	0%	0%	0%	0%	1
packages/react/src/experimental/AiChat/HILActionConfirmation.tsx	0%	0%	0%	0%	1-41
packages/react/src/experimental/AiChat/markdownRenderers.tsx	0%	0%	0%	0%	1-195
packages/react/src/experimental/AiChat/components/AssistantMessage.tsx	0%	0%	0%	0%	1-148
packages/react/src/experimental/AiChat/components/ChatHeader.tsx	0%	0%	0%	0%	1-35
packages/react/src/experimental/AiChat/components/ChatTextarea.tsx	0%	0%	0%	0%	1-145
packages/react/src/experimental/AiChat/components/MessagesContainer.tsx	17.78%	93.33%	50%	17.78%	19-261, 264-345, 349-350
packages/react/src/experimental/Banners/BaseBanner/index.tsx	0%	0%	0%	0%	1-167
packages/react/src/experimental/Banners/F0AiBanner/AiBannerInternal.tsx	0%	0%	0%	0%	1-110
packages/react/src/experimental/Banners/F0Callout/CalloutInternal.tsx	0%	0%	0%	0%	1-151
packages/react/src/experimental/Forms/EntitySelect/Content/MainContent/Footer.tsx	0%	0%	0%	0%	1-151
packages/react/src/experimental/Forms/EntitySelect/CreateItem/index.tsx	0%	0%	0%	0%	1-52
packages/react/src/experimental/Forms/EntitySelect/ListItem/index.tsx	0%	0%	0%	0%	1-310
packages/react/src/experimental/Forms/Fields/Select/SelectBottomActions.tsx	18.75%	50%	100%	18.75%	18-31
packages/react/src/experimental/Forms/Form/index.stories.tsx	0%	0%	0%	0%	1-632
packages/react/src/experimental/Forms/Form/index.tsx	0%	0%	0%	0%	1-51
packages/react/src/experimental/Information/utils.tsx	100%	100%	100%	100%
packages/react/src/experimental/Information/Communities/HighlightBanner/index.tsx	0%	0%	0%	0%	1-31
packages/react/src/experimental/Information/Communities/Post/CommunityPost/index.tsx	0%	0%	0%	0%	1-299
packages/react/src/experimental/Information/Headers/BaseHeader/index.tsx	0%	0%	0%	0%	1-282
packages/react/src/experimental/Information/Headers/Metadata/index.tsx	0%	0%	0%	0%	1-282
packages/react/src/experimental/Information/Headers/SectionHeader/index.tsx	0%	0%	0%	0%	1-84
packages/react/src/experimental/Information/Reactions/index.tsx	0%	0%	0%	0%	1-47
packages/react/src/experimental/Information/Reactions/reaction.tsx	0%	0%	0%	0%	1-84
packages/react/src/experimental/Information/Reactions/Picker/index.tsx	0%	100%	100%	0%	2-84
packages/react/src/experimental/Lists/OnePersonListItem/index.tsx	0%	100%	100%	0%	2-145
packages/react/src/experimental/Modals/OneModal/OneModal.stories.tsx	0%	0%	0%	0%	1-291
packages/react/src/experimental/Modals/OneModal/OneModalHeader/OneModalHeader.tsx	0%	0%	0%	0%	1-155
packages/react/src/experimental/Navigation/Carousel/index.tsx	6.73%	100%	0%	6.73%	34-45, 48-144
packages/react/src/experimental/Navigation/Carousel/DynamicCarousel/index.tsx	5.51%	100%	0%	5.51%	10-151
packages/react/src/experimental/Navigation/DaytimePage/index.tsx	0%	0%	0%	0%	1-138
packages/react/src/experimental/Navigation/Dropdown/index.tsx	25.55%	100%	50%	25.55%	34-35, 51-125
packages/react/src/experimental/Navigation/Dropdown/internal.tsx	77.01%	71.42%	100%	77.01%	60-69, 100-109, 115
packages/react/src/experimental/Navigation/F0TableOfContent/Item/ItemDropDown.tsx	0%	0%	0%	0%	1-43
packages/react/src/experimental/Navigation/F0TableOfContent/Item/PrimitiveItem.tsx	0%	0%	0%	0%	1-204
packages/react/src/experimental/Navigation/Header/Breadcrumbs/index.stories.tsx	0%	0%	0%	0%	1-359
packages/react/src/experimental/Navigation/Header/PageHeader/index.tsx	7.26%	100%	0%	7.26%	74-100, 103-328
packages/react/src/experimental/Navigation/Header/ProductUpdates/index.tsx	6.97%	100%	0%	6.97%	80-199, 202-262, 265-297, 300-321, 325-355, 359-375, 379-390, 394-415, 419-422, 426-503
packages/react/src/experimental/Navigation/Sidebar/Footer/index.tsx	0%	0%	0%	0%	1-77
packages/react/src/experimental/Navigation/Sidebar/Icon/index.tsx	0%	0%	0%	0%	1-96
packages/react/src/experimental/OneActionBar/index.stories.tsx	0%	0%	0%	0%	1-213
packages/react/src/experimental/OneActionBar/index.tsx	6.71%	100%	0%	6.71%	57-63, 66-211
packages/react/src/experimental/OneAlert/index.tsx	0%	0%	0%	0%	1-103
packages/react/src/experimental/OneCalendar/OneCalendar.tsx	58.22%	53.33%	11.76%	58.22%	29-41, 44-51, 105-108, 115-121, 137-138, 142-150, 155-169, 185-200, 214-221, 225-242
packages/react/src/experimental/OneDataCollection/visualizations.tsx	0%	0%	0%	0%	1-312
packages/react/src/experimental/OneDataCollection/Settings/Settings.tsx	82.16%	65.38%	16.66%	82.16%	93, 104-106, 109-112, 161-164, 198-208, 219-224
packages/react/src/experimental/OneDataCollection/Settings/components/GroupingSelector.tsx	51.25%	11.11%	33.33%	51.25%	36, 41-49, 53-57, 60-61, 75-89, 94-105
packages/react/src/experimental/OneDataCollection/Settings/components/SortingSelector.tsx	9.33%	100%	0%	9.33%	15-94
packages/react/src/experimental/OneDataCollection/__stories__/mockData.tsx	0%	100%	100%	0%	2-1299
packages/react/src/experimental/OneDataCollection/components/CollectionActions/CollectionActions.tsx	10%	100%	0%	10%	18-80
packages/react/src/experimental/OneDataCollection/components/itemActions/ItemActionsDropdown/ItemActionsDropdown.tsx	100%	100%	100%	100%
packages/react/src/experimental/OneDataCollection/components/itemActions/ItemActionsRow/ItemActionsRow.tsx	100%	100%	100%	100%
packages/react/src/experimental/OneDataCollection/visualizations/collection/List/components/Row.tsx	9.48%	100%	0%	9.48%	59-188
packages/react/src/experimental/OneDateNavigator/components/DateNavigatorTrigger.tsx	7.59%	100%	100%	7.59%	41-214
packages/react/src/experimental/OneEmptyState/OneEmptyState.tsx	9.43%	100%	0%	9.43%	8-60
packages/react/src/experimental/OneTable/index.stories.tsx	0%	0%	0%	0%	1-825
packages/react/src/experimental/Overlays/Dialog/index.stories.tsx	0%	0%	0%	0%	1-127
packages/react/src/experimental/Overlays/Dialog/index.tsx	0%	0%	0%	0%	1-101
packages/react/src/experimental/Overlays/Tooltip/index.stories.tsx	0%	0%	0%	0%	1-34
packages/react/src/experimental/RichText/CoreEditor/Extensions/AIBlock/index.tsx	0%	0%	0%	0%	1-497
packages/react/src/experimental/RichText/CoreEditor/Extensions/LiveCompanion/index.tsx	0%	0%	0%	0%	1-243
packages/react/src/experimental/RichText/CoreEditor/Extensions/MoodTracker/index.tsx	0%	0%	0%	0%	1-244
packages/react/src/experimental/RichText/CoreEditor/Extensions/Transcript/index.tsx	0%	0%	0%	0%	1-264
packages/react/src/experimental/RichText/CoreEditor/Toolbar/index.tsx	0%	0%	0%	0%	1-340
packages/react/src/experimental/RichText/CoreEditor/Toolbar/LinkPopup/index.tsx	0%	0%	0%	0%	1-211
packages/react/src/experimental/RichText/CoreEditor/Toolbar/ToolbarButton/index.tsx	0%	0%	0%	0%	1-88
packages/react/src/experimental/RichText/CoreEditor/Toolbar/ToolbarDropdown/index.tsx	0%	0%	0%	0%	1-97
packages/react/src/experimental/RichText/NotesTextEditor/index.stories.tsx	0%	100%	100%	0%	2-277
packages/react/src/experimental/RichText/NotesTextEditor/index.tsx	0%	0%	0%	0%	1-389
packages/react/src/experimental/RichText/NotesTextEditor/Header/index.tsx	0%	0%	0%	0%	1-60
packages/react/src/experimental/RichText/RichTextEditor/Enhance/index.tsx	0%	0%	0%	0%	1-125
packages/react/src/experimental/RichText/RichTextEditor/Enhance/AcceptChanges/index.tsx	0%	0%	0%	0%	1-77
packages/react/src/experimental/RichText/RichTextEditor/Error/index.tsx	0%	0%	0%	0%	1-51
packages/react/src/experimental/RichText/RichTextEditor/Footer/index.tsx	0%	0%	0%	0%	1-189
packages/react/src/experimental/RichText/RichTextEditor/Footer/ActionsMenu/index.tsx	0%	0%	0%	0%	1-310
packages/react/src/experimental/RichText/RichTextEditor/Head/index.tsx	0%	0%	0%	0%	1-41
packages/react/src/experimental/Utilities/PrivateBox/index.stories.tsx	0%	100%	100%	0%	2-38
packages/react/src/experimental/Utilities/ScrollArea/index.stories.tsx	0%	0%	0%	0%	1-93
packages/react/src/experimental/Widgets/ChartWidgetEmptyState/index.tsx	0%	0%	0%	0%	1-92
packages/react/src/experimental/Widgets/Content/ClockIn/ClockInControls/index.tsx	70%	43.75%	33.33%	70%	103-108, 114-122, 125-128, 133-134, 144-146, 208-226, 274-294, 298-300, 304
packages/react/src/experimental/Widgets/Widget/index.tsx	38.65%	50%	40%	38.65%	58, 73-76, 91-92, 106-171, 175-196, 210-212, 242-278
packages/react/src/lib/emojis.tsx	28.39%	100%	0%	28.39%	34-59, 62-68, 71-72, 75-105
packages/react/src/lib/text.ts	65.51%	45.45%	100%	65.51%	22-23, 26-29, 32-33, 36-37
packages/react/src/testing/test-utils.tsx	100%	100%	60%	100%
packages/react/src/ui/carousel.tsx	8.43%	100%	0%	8.43%	37-45, 52-151, 159-189, 196-211, 218-245, 250-277, 285-416
packages/react/src/ui/Action/Action.tsx	94.07%	88.88%	100%	94.07%	90, 154-161
packages/react/src/ui/Action/index.tsx	100%	100%	100%	100%
packages/react/src/ui/Action/internal-types.ts	100%	100%	100%	100%
packages/react/src/ui/Action/types.ts	100%	100%	100%	100%
packages/react/src/ui/Action/utils.ts	100%	100%	100%	100%
packages/react/src/ui/Action/variants.ts	100%	100%	100%	100%
packages/react/src/ui/Action/__stories__/Action.stories.tsx	0%	0%	0%	0%	1-188
packages/react/src/ui/ButtonCopy/index.ts	0%	0%	0%	0%	1
packages/react/src/ui/ButtonCopy/types.ts	0%	0%	0%	0%	1-3
packages/react/src/ui/ButtonCopy/__stories__/ButtonCopy.stories.tsx	0%	0%	0%	0%	1-297
packages/react/src/ui/DatePickerPopup/OneDatePickerPopup.tsx	68.84%	80%	42.85%	68.84%	88-92, 108, 121-125, 133-134, 156-174, 181-189, 198-199, 205-208, 255-271
packages/react/src/ui/Kanban/components/KanbanCard.tsx	54.23%	45.45%	25%	54.23%	19-21, 57-64, 66-72, 74-80, 92-105, 124-134, 137-141

Generated in workflow #8313 for commit 2732056 by the Vitest Coverage Report Action

github-actions · 2025-09-17T16:11:25Z

🔍 Visual review for your branch is published 🔍

Here are the links to:

github-actions · 2025-09-17T16:13:28Z

size-limit report 📦

Path	Size
JS: Stable	580.94 KB (+0.02% 🔺)
JS: Experimental	965.52 KB (-0.1% 🔽)
CSS	71.77 KB (-0.22% 🔽)

…lize-button-and-link

nlopin · 2025-10-01T06:52:33Z

@sergiocarracedo what's missing here? Could you add a list of todos to the description?

sergiocarracedo · 2025-10-01T07:07:42Z

I'm checking the changes in the monorepo, and i found some missing aria tags (or the possibility of add them to the new button implementation)

sergiocarracedo added 6 commits September 11, 2025 13:11

feat: stabilize Button and Link components

e971475

feat: rename buttons chore: rename Button chore: fix imports feet: use internal Action component feet: use internal Action component feet: use internal Action component

refactor: appendOutside

23cf597

feat: buttonToggle animation

884d733

feat: buttonToggle docs

775b440

chore: fix unused props

a17a807

Merge branch 'main' of github.com:factorialco/f0 into FCT-36292-stabi…

42bb8f9

…lize-button-and-link

sergiocarracedo requested a review from a team as a code owner September 17, 2025 16:08

sergiocarracedo marked this pull request as draft September 17, 2025 16:10

nlopin approved these changes Sep 17, 2025

View reviewed changes

sergiocarracedo added 14 commits September 18, 2025 11:51

refactor: use action instad legacy ui/button

b788425

chore: fix tests

28de409

chore: lint

d437f21

Merge branch 'main' of github.com:factorialco/f0 into FCT-36292-stabi…

08e41bb

…lize-button-and-link

chore: fix

000a02b

chore: fix imports

83c1cfa

chore: button aria label

a165fc4

chore: button aria label

dc8304d

chore: fix tests

47b6a05

Merge branch 'main' of github.com:factorialco/f0 into FCT-36292-stabi…

c8dd6b6

…lize-button-and-link

chore: merge main

1d37996

chore: fix storybook test

7ad3012

chore: fix navigation link

8b8cf49

chore: fix navigation link

da521c4

sergiocarracedo marked this pull request as ready for review September 18, 2025 16:48

sergiocarracedo added 3 commits September 18, 2025 18:50

chore: datacollection settings file

6318fed

chore: fix storybook play

0c675ba

chore: fix button title

e4ccc05

sergiocarracedo added 15 commits September 19, 2025 09:54

chore: fix test

0627f66

chore: merge main

84ed89d

chore: merge main

e1fc561

chore: remove acation exports

6a65c58

chore: remove acation exports

b4ffd83

Merge branch 'main' of github.com:factorialco/f0 into FCT-36292-stabi…

bc91964

…lize-button-and-link

Merge branch 'main' of github.com:factorialco/f0 into FCT-36292-stabi…

a00f8fd

…lize-button-and-link

Merge branch 'main' of github.com:factorialco/f0 into FCT-36292-stabi…

92aa26b

…lize-button-and-link

chore: merge main

77377fc

chore: merge main

b56934f

chore: merge main

8f7f511

chore: button allow ariaLabel prop

7c02afc

chore: merge main

86f1c53

chore: fix types

50de3cb

chore: a11y

42d26f8

sergiocarracedo added 5 commits October 1, 2025 17:12

refactor: use Action componnet for f0link

bc44246

chore: fix onclick type inference

7ef236e

chore: merge main

b43334b

chore: fix dropdown button

f76d016

chore: fix types

2732056

sergiocarracedo marked this pull request as draft October 2, 2025 09:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

FCT 36292 stabilize button and link #2616

FCT 36292 stabilize button and link #2616

Uh oh!

sergiocarracedo commented Sep 17, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 17, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 17, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 17, 2025 •

edited

Loading

Uh oh!

nlopin commented Oct 1, 2025

Uh oh!

sergiocarracedo commented Oct 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

FCT 36292 stabilize button and link #2616

Are you sure you want to change the base?

FCT 36292 stabilize button and link #2616

Uh oh!

Conversation

sergiocarracedo commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots (if applicable)

Implementation details

Uh oh!

github-actions bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for packages/react

Uh oh!

github-actions bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 Visual review for your branch is published 🔍

Uh oh!

github-actions bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

nlopin commented Oct 1, 2025

Uh oh!

sergiocarracedo commented Oct 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sergiocarracedo commented Sep 17, 2025 •

edited

Loading

github-actions bot commented Sep 17, 2025 •

edited

Loading

github-actions bot commented Sep 17, 2025 •

edited

Loading

github-actions bot commented Sep 17, 2025 •

edited

Loading