feat(ButtonLink): added ButtonLinkNeutral by AlexandraGallipoliRodrigues · Pull Request #1672 · Telefonica/mistica-web

AlexandraGallipoliRodrigues · 2026-07-28T10:39:34Z

github-actions · 2026-07-28T10:42:47Z

Size stats

	master	this branch	diff
Total JS	15.7 MB	15.7 MB	+1.12 kB
JS without icons	1.93 MB	1.94 MB	+1.12 kB
Lib overhead	96.9 kB	96.9 kB	0 B
Lib overhead (gzip)	21.3 kB	21.3 kB	0 B

github-actions · 2026-07-28T10:46:07Z

Deploy preview for mistica-web ready!

Project:	`mistica-web`
Status:	✅ Deploy successful!
Preview URL:	https://mistica-jn32oh4oo-flows-projects-65bb050e.vercel.app
Latest Commit:	`4f2e738`

Deployed with vercel-action

github-actions · 2026-07-28T10:53:42Z

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

Copilot

Pull request overview

Adds a new neutral typology for ButtonLink across the component API, styles, stories, and skins, aligning with the design-system need described in issue #1582.

Changes:

Introduces ButtonLinkNeutral as a first-class export and adds linkNeutral to the internal ButtonType.
Adds neutral link styling variants for default/brand/negative/media theme variants in button.css.ts.
Updates Storybook stories, screenshot coverage, playroom snippets, and multiple skins to provide the required neutral tokens.

Reviewed changes

Copilot reviewed 14 out of 97 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/skins/vivo.tsx	Updates neutral link background/text tokens to new neutral spec values.
src/skins/vivo-evolution.tsx	Updates neutral link background/text tokens to new neutral spec values.
src/skins/telefonica.tsx	Updates neutral link background/text tokens to new neutral spec values.
src/skins/o2.tsx	Updates neutral link background/text tokens to new neutral spec values.
src/skins/movistar.tsx	Updates neutral link background/text tokens to new neutral spec values.
src/skins/esimflag.tsx	Updates neutral link background/text tokens to new neutral spec values (both sections in file).
src/skins/blau.tsx	Updates neutral link background/text tokens to new neutral spec values.
src/index.tsx	Exports `ButtonLinkNeutral` from the public entrypoint.
src/button.tsx	Adds `linkNeutral` type + `ButtonLinkNeutral` component and tracking mapping.
src/button.css.ts	Adds `linkNeutral` style variants across default/brand/negative/media.
src/stories/button-story.tsx	Adds Storybook story + controls for `ButtonLinkNeutral`.
src/screenshot_tests/button-screenshot-test.tsx	Includes neutral link in screenshot test matrix.
src/private_stories/skin-components-story.tsx	Adds `ButtonLinkNeutral` usage in skin components story.
playroom/snippets.tsx	Adds playroom snippet for `ButtonLinkNeutral`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Marcosld · 2026-07-29T15:23:46Z

I suppose we didn't unify because it would be a breaking change? Perhaps we can do it and mark with @deprecated the ButtonLinkDanger?

brtbrt · 2026-07-30T10:58:48Z

I suppose we didn't unify because it would be a breaking change? Perhaps we can do it and mark with @deprecated the ButtonLinkDanger?

that should have been specified in the issue description, actually. if you wanna deprecate things, please add the removal into the next major release #1645

AnaMontes11 · 2026-07-30T11:31:34Z

I suppose we didn't unify because it would be a breaking change? Perhaps we can do it and mark with @deprecated the ButtonLinkDanger?

For some context, @Marcosld @brtbrt : from the Design side, we think the button ecosystem needs a proper review. However, this isn't the right time to tackle it, and we don't want to block the PR because of it.

What we're proposing is to take advantage of the introduction of the neutral style and add it as a new type (ideally, danger should follow the same approach). The goal is to converge towards an API like type: default | neutral | danger, aligned with IconButton.

We believe this is the right time to introduce it this way, rather than creating a separate component that we'd end up deprecating later.

From our perspective, we're happy to mark ButtonLinkDanger as deprecated and introduce both danger and neutral as new type values.

Even the ButtonLink naming itself is something that could be revisited in the future.

If you want we can have a quick call to discuss it.

Marcosld · 2026-07-30T11:34:42Z

I suppose we didn't unify because it would be a breaking change? Perhaps we can do it and mark with @deprecated the ButtonLinkDanger?

that should have been specified in the issue description, actually. if you wanna deprecate things, please add the removal into the next major release #1645

Well, it is specified in the issue:

Additionally, it is proposed to unify the component under a single type, which would include: ButtonLinkBrand (current default variant), ButtonLinkNeutral (new variant) and ButtonLinkDanger (currently independent variant).

I'm up to making the change you propose @AnaMontes11 ! That's why I flagged it just in case we forgot

AnaMontes11 · 2026-07-30T12:05:39Z

Supongo que no nos unificamos porque sería un cambio radical. Tal vez podamos hacerlo y marcarlo con@deprecated¿El enlace del botón es peligroso?

Eso debería haberse especificado en la descripción del problema. Si quieres descontinuar funciones, por favor, agrega la eliminación en la próxima versión principal #1645.

Bueno, está especificado en el problema:

Además, se propone unificar el componente bajo un único tipo, que incluiría: ButtonLinkBrand (variante predeterminada actual), ButtonLinkNeutral (nueva variante) y ButtonLinkDanger (variante actualmente independiente).

Estoy dispuesto a hacer el cambio que propones.@AnaMontes11¡Por eso lo marqué, por si acaso lo olvidábamos!

Great @Marcosld thanks for adding it!

…added-ButtonLinkNeutral

aweell · 2026-08-04T10:40:18Z

What's the reason behind this commit? d504949

This is manually changing the definition in mistica-design?

https://github.com/Telefonica/mistica-design/blob/production/tokens/blau.json#L2374

Add ButtonLink type=neutral for the new neutral style.

AlexandraGallipoliRodrigues · 2026-08-04T12:15:48Z

What's the reason behind this commit? d504949

This is manually changing the definition in mistica-design?

https://github.com/Telefonica/mistica-design/blob/production/tokens/blau.json#L2374

The reason for that commit was that, with the current generated token values, ButtonLink type="neutral" over media/dark contexts didn’t match the Figma spec: it rendered like a regular/default link instead of the neutral button link shown in design, with light background and dark text:

That said, you’re right: changing those values directly in mistica-web is not ideal if the source of truth is mistica-design. I’ll revert this token override here and, should I follow up by updating the token definition from mistica-design instead? Or should someone from desing do it instead?

Marcosld · 2026-08-04T15:39:32Z

 > & {
    bleedLeft?: boolean;
    bleedRight?: boolean;
    bleedY?: boolean;


Why not just add new "type" prop here?

Marcosld · 2026-08-04T15:51:43Z

+LinkButtonDanger.parameters = {
+    docs: {
+        description: {
+            story: 'Deprecated. Use ButtonLink with type="danger" instead.',


I think we have docs disabled... or at least I cannot find this comment. I think we should remove danger and neutral stories from storybook, it should be enough with the ButtonLink story + type control

Marcosld · 2026-08-04T15:54:07Z

 DangerButton.storyName = 'ButtonDanger';
 LinkButton.storyName = 'ButtonLink';
 LinkButtonDanger.storyName = 'ButtonLinkDanger';
+LinkButtonNeutral.storyName = 'ButtonLink type neutral';


I'd remove this story or follow the convention for storyName (ButtonLinkNeutral)

…ButtonLink args

AlexandraGallipoliRodrigues added 3 commits July 28, 2026 12:19

added ButtonLinkNeutral

69930bb

modified skins for dark mode

d504949

updated snapshots

affa67e

AlexandraGallipoliRodrigues marked this pull request as ready for review July 28, 2026 10:56

AlexandraGallipoliRodrigues requested a review from a team as a code owner July 28, 2026 10:56

Copilot AI review requested due to automatic review settings July 28, 2026 10:56

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues July 28, 2026 10:56 View session

Copilot AI reviewed Jul 28, 2026

View reviewed changes

AlexandraGallipoliRodrigues requested review from Marcosld, aweell, brtbrt and yceballost July 28, 2026 11:09

ieduardogf assigned AlexandraGallipoliRodrigues Jul 28, 2026

AlexandraGallipoliRodrigues linked an issue Jul 28, 2026 that may be closed by this pull request

[Mística] new neutral button link #1582

Open

brtbrt approved these changes Jul 28, 2026

View reviewed changes

AnaMontes11 self-requested a review July 29, 2026 06:50

Merge branch 'master' of github.com:Telefonica/mistica-web into alex/…

f6024ee

…added-ButtonLinkNeutral

Deprecate ButtonLinkDanger in favor of ButtonLink type=danger.

29fd28e

Add ButtonLink type=neutral for the new neutral style.

restore design tokens and update screenshots

e5d117e

Marcosld approved these changes Aug 4, 2026

View reviewed changes

PR changes: replaced buttonLink stories with controls and simplified …

4f2e738

…ButtonLink args

Uh oh!

Conversation

AlexandraGallipoliRodrigues commented Jul 28, 2026

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Marcosld commented Jul 29, 2026

Uh oh!

brtbrt commented Jul 30, 2026

Uh oh!

AnaMontes11 commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Marcosld commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AnaMontes11 commented Jul 30, 2026

Uh oh!

aweell commented Aug 4, 2026

Uh oh!

AlexandraGallipoliRodrigues commented Aug 4, 2026

Uh oh!

Marcosld Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Marcosld Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Marcosld Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

github-actions Bot commented Jul 28, 2026 •

edited

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading

AnaMontes11 commented Jul 30, 2026 •

edited

Loading

Marcosld commented Jul 30, 2026 •

edited

Loading