feat: use custom states for button and anchor button variants by chrisdholt · Pull Request #31718 · microsoft/fluentui

chrisdholt · 2024-06-14T18:10:17Z

Previous Behavior

All styling hooked off attribute selectors.

New Behavior

All variants now get set using custom states via ElementInternals. In the case that states are not supported, an attribute with will be added to manage those scenario. So, for primary buttons, if states are not supported, state--primary will be added.

This gives long term benefits of being able to quickly remove the attribute fallback as custom state support grows in our matrix. It also has performance parity overall when including the attributes, making way for performance wins once that can be removed.

Related Issue(s)

Fixes #

fabricteam · 2024-06-14T18:17:18Z

📊 Bundle size report

✅ No changes found

change/@fluentui-web-components-8fa1a0aa-7dd4-4129-89c3-fe350ad0fa58.json

packages/web-components/src/anchor-button/anchor-button.ts

chrisdholt · 2024-06-14T20:19:24Z

/azp run

azure-pipelines · 2024-06-14T20:19:41Z

Azure Pipelines successfully started running 4 pipeline(s).

packages/web-components/src/anchor-button/anchor-button.ts

packages/web-components/src/button/button.options.ts

davatron5000

LGTM, few questions but nothing blocking. Would probably like @radium-v's POV since he worked on buttons last and has done more element internals work than me.

packages/web-components/src/button/button.options.ts

packages/web-components/src/button/button.styles.ts

packages/web-components/src/button/button.ts

packages/web-components/src/styles/states/index.ts

packages/web-components/src/anchor-button/anchor-button.ts

packages/web-components/src/button/button.styles.ts

packages/web-components/src/styles/states/index.ts

radium-v · 2024-06-14T22:05:47Z

Ideally, hovering or focusing on the element should display the anchor link in the browser:

chrisdholt · 2024-06-14T22:17:59Z

Ideally, hovering or focusing on the element should display the anchor link in the browser:

Yeah, I'm not sure how we get around this without help from the browser. I don't assume they'd enable elements with a role of link to participate here, because they can't guarantee the security of the custom element and that there are no side effects. Best we can do is manage the hover scenario, but focus likely won't work.

chrisdholt · 2024-06-14T22:42:50Z

/azp run

azure-pipelines · 2024-06-14T22:43:08Z

Azure Pipelines successfully started running 4 pipeline(s).

…oft#31718)

chore(motion): add bundle size fixtures (microsoft#31730) fix(react-calendar-compat): fixed focus indicator cut off (microsoft#31596) feat: use custom states for button and anchor button variants (microsoft#31718) docs: add min-width styles to Table and DataGrid stories, add best practices (microsoft#31721) fix:react-nav-preview: High contrast issues (microsoft#31704) Pretty & lint & yarn change Somehow missed change files Fix one of the tests Fix React-text test Use hashed name for each semantic and control token

…oft#31718)

Change most tokens in useButtonStyles file Give all the react-components a try chore(motion): add bundle size fixtures (#31730) fix(react-calendar-compat): fixed focus indicator cut off (#31596) feat: use custom states for button and anchor button variants (#31718) feat: update badge to use custom states (#31733) fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734) fix:react-nav-preview: High contrast issues (#31704) Pretty & lint & yarn change Somehow missed change files Fix one of the tests Fix React-text test

Change most tokens in useButtonStyles file Give all the react-components a try fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734) fix:react-nav-preview: High contrast issues (#31704) chore(motion): add bundle size fixtures (#31730) fix(react-calendar-compat): fixed focus indicator cut off (#31596) feat: use custom states for button and anchor button variants (#31718) docs: add min-width styles to Table and DataGrid stories, add best practices (#31721) fix:react-nav-preview: High contrast issues (#31704) Pretty & lint & yarn change Somehow missed change files Fix one of the tests Fix React-text test Use hashed name for each semantic and control token Build missed one Fix small mistake Fix small mistake Fix small mistake

Change most tokens in useButtonStyles file Give all the react-components a try fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734) fix:react-nav-preview: High contrast issues (#31704) chore(motion): add bundle size fixtures (#31730) fix(react-calendar-compat): fixed focus indicator cut off (#31596) feat: use custom states for button and anchor button variants (#31718) docs: add min-width styles to Table and DataGrid stories, add best practices (#31721) fix:react-nav-preview: High contrast issues (#31704) Pretty & lint & yarn change Somehow missed change files Fix one of the tests Fix React-text test Use hashed name for each semantic and control token Build missed one Fix small mistake Fix small mistake Fix small mistake Fix Random YML File

Change most tokens in useButtonStyles file Give all the react-components a try fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734) fix:react-nav-preview: High contrast issues (#31704) chore(motion): add bundle size fixtures (#31730) fix(react-calendar-compat): fixed focus indicator cut off (#31596) feat: use custom states for button and anchor button variants (#31718) docs: add min-width styles to Table and DataGrid stories, add best practices (#31721) fix:react-nav-preview: High contrast issues (#31704) Pretty & lint & yarn change Somehow missed change files Fix one of the tests Fix React-text test Use hashed name for each semantic and control token Build missed one Fix small mistake Fix small mistake Fix small mistake Fix Random YML File Fix rebase mistake

Change most tokens in useButtonStyles file Give all the react-components a try fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734) fix:react-nav-preview: High contrast issues (#31704) chore(motion): add bundle size fixtures (#31730) fix(react-calendar-compat): fixed focus indicator cut off (#31596) feat: use custom states for button and anchor button variants (#31718) docs: add min-width styles to Table and DataGrid stories, add best practices (#31721) fix:react-nav-preview: High contrast issues (#31704) Pretty & lint & yarn change Somehow missed change files Fix one of the tests Fix React-text test Use hashed name for each semantic and control token Build missed one Fix small mistake Fix small mistake Fix small mistake Fix Random YML File Fix rebase mistake Fix mistake on number of quotes Fix any possible merge conflicts

chrisdholt requested a review from a team as a code owner June 14, 2024 18:10

fabricteam reviewed Jun 14, 2024

View reviewed changes

change/@fluentui-web-components-8fa1a0aa-7dd4-4129-89c3-fe350ad0fa58.json Show resolved Hide resolved

chrisdholt commented Jun 14, 2024

View reviewed changes

packages/web-components/src/anchor-button/anchor-button.ts Show resolved Hide resolved

chrisdholt force-pushed the users/chhol/update-button-and-anchor-button-custom-states branch from 3e187c3 to d8d0612 Compare June 14, 2024 20:16

janechu approved these changes Jun 14, 2024

View reviewed changes

packages/web-components/src/anchor-button/anchor-button.ts Outdated Show resolved Hide resolved

packages/web-components/src/button/button.options.ts Show resolved Hide resolved

davatron5000 approved these changes Jun 14, 2024

View reviewed changes

chrisdholt force-pushed the users/chhol/update-button-and-anchor-button-custom-states branch from 69746a2 to 58f4a6a Compare June 14, 2024 20:50

radium-v reviewed Jun 14, 2024

View reviewed changes

packages/web-components/src/anchor-button/anchor-button.ts Outdated Show resolved Hide resolved

packages/web-components/src/button/button.styles.ts Show resolved Hide resolved

mlijanto reviewed Jun 14, 2024

View reviewed changes

packages/web-components/src/styles/states/index.ts Show resolved Hide resolved

mlijanto approved these changes Jun 14, 2024

View reviewed changes

chrisdholt force-pushed the users/chhol/update-button-and-anchor-button-custom-states branch 5 times, most recently from 45609f3 to 5be3b98 Compare June 17, 2024 17:38

chrisdholt added 8 commits June 17, 2024 10:47

update button and anchor button to use custom states

9fd7f34

fixup stories

9ef4439

change files

d014177

update compound button and toggle button states

2c0fcaa

update toggle button tests

8172298

template literal the previous appearance

feb507d

update iconOnly state to icon

0f8927f

fix to ensure both next and previous are removed and null is not a value

a96a60e

fix url display on link hover

26c0466

chrisdholt force-pushed the users/chhol/update-button-and-anchor-button-custom-states branch from 5be3b98 to 43cf404 Compare June 17, 2024 17:47

fix anchor meta and ctrl key navigation

863c207

chrisdholt force-pushed the users/chhol/update-button-and-anchor-button-custom-states branch from 43cf404 to 863c207 Compare June 17, 2024 17:57

chrisdholt added the web-components label Jun 17, 2024

radium-v approved these changes Jun 17, 2024

View reviewed changes

chrisdholt merged commit 1fb910e into microsoft:master Jun 17, 2024

chrisdholt deleted the users/chhol/update-button-and-anchor-button-custom-states branch June 17, 2024 18:49

EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Jun 17, 2024

feat: use custom states for button and anchor button variants (micros…

6d6e8b0

…oft#31718)

EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Aug 16, 2024

feat: use custom states for button and anchor button variants (micros…

e84c98b

…oft#31718)

Conversation

chrisdholt commented Jun 14, 2024

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Jun 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

Uh oh!

chrisdholt commented Jun 14, 2024

Uh oh!

azure-pipelines bot commented Jun 14, 2024

Uh oh!

Uh oh!

Uh oh!

davatron5000 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

radium-v commented Jun 14, 2024

Uh oh!

chrisdholt commented Jun 14, 2024

Uh oh!

chrisdholt commented Jun 14, 2024

Uh oh!

azure-pipelines bot commented Jun 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

fabricteam commented Jun 14, 2024 •

edited

Loading