Skip to content

Conversation

@behowell
Copy link
Contributor

@behowell behowell commented Mar 8, 2023

Previous Behavior

  • It wasn't straightforward to combine a Label with InfoButton. It required special considerations for layout and accessibility.
  • There was no simple way to include an InfoButton in a Field.

New Behavior

Add a new InfoLabel component, which is a Label combined with an InfoButton. It properly sets aria-labelledby on the InfoButton, and styles the button to be properly aligned with the label.

Preview documentation for InfoLabel: https://fluentuipr.z22.web.core.windows.net/pull/27118/public-docsite-v9/storybook/index.html?path=/docs/preview-components-infolabel--default

@behowell behowell self-assigned this Mar 8, 2023
@github-actions github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 8, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 8, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-infobutton
InfoLabel
0 B
0 B
133.754 kB
40.454 kB
🆕 New entry
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
67.15 kB
18.121 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
206.317 kB
57.147 kB
react-components
react-components: FluentProvider & webLightTheme
37.981 kB
12.053 kB
react-infobutton
InfoButton
130.438 kB
39.407 kB
react-portal-compat
PortalCompatProvider
6.324 kB
2.129 kB
🤖 This report was generated against 71b00883c2c3080f13232cbcea92105cf4d70d54

@size-auditor
Copy link

size-auditor bot commented Mar 8, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 71b00883c2c3080f13232cbcea92105cf4d70d54 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 8, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit dbe07dd:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 14, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1323 1297 5000
Button mount 949 928 5000
Field mount 2054 2022 5000
FluentProvider mount 1662 1629 5000
FluentProviderWithTheme mount 638 634 10
FluentProviderWithTheme virtual-rerender 580 605 10
FluentProviderWithTheme virtual-rerender-with-unmount 631 629 10
InfoButton mount 569 556 5000
MakeStyles mount 1900 1923 50000
Persona mount 3064 3000 5000
SpinButton mount 2424 2450 5000

@behowell behowell marked this pull request as ready for review March 14, 2023 21:00
@behowell behowell requested a review from a team as a code owner March 14, 2023 21:00
@behowell behowell requested review from a team and sopranopillow as code owners March 14, 2023 21:00
Copy link
Contributor

@sopranopillow sopranopillow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than the comment about the prop, lgtm!

@behowell behowell merged commit b106479 into microsoft:master Mar 15, 2023
@behowell behowell deleted the infolabel/implement branch March 15, 2023 19:52
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 15, 2023
* master: (141 commits)
  chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965)
  feat: Add InfoLabel component (microsoft#27118)
  fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152)
  applying package updates
  fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213)
  feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034)
  chore: Prepare release 0.66.4 (microsoft#27163)
  fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204)
  fix: Smooth out animation of indeterminate progress bar (microsoft#27201)
  Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147)
  Added documentation about custom style hooks (microsoft#27087)
  Custom style react-text (microsoft#27078)
  Custom style react-image (microsoft#27066)
  Add JSDoc for tabster focus indicator selector (microsoft#27041)
  Theme designer: Move colors to local files (microsoft#27191)
  docs(react-card): move card out of preview (microsoft#27185)
  Include values in typography table (microsoft#27189)
  feat: accept a className in `mountNode` in `Portal` (microsoft#27008)
  RFC: Extend `mountNode` prop in `Portal` (microsoft#27009)
  applying package updates
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 15, 2023
* master: (141 commits)
  chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965)
  feat: Add InfoLabel component (microsoft#27118)
  fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152)
  applying package updates
  fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213)
  feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034)
  chore: Prepare release 0.66.4 (microsoft#27163)
  fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204)
  fix: Smooth out animation of indeterminate progress bar (microsoft#27201)
  Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147)
  Added documentation about custom style hooks (microsoft#27087)
  Custom style react-text (microsoft#27078)
  Custom style react-image (microsoft#27066)
  Add JSDoc for tabster focus indicator selector (microsoft#27041)
  Theme designer: Move colors to local files (microsoft#27191)
  docs(react-card): move card out of preview (microsoft#27185)
  Include values in typography table (microsoft#27189)
  feat: accept a className in `mountNode` in `Portal` (microsoft#27008)
  RFC: Extend `mountNode` prop in `Portal` (microsoft#27009)
  applying package updates
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants