Focus indicator bug in bar charts by yush-singla · Pull Request #28414 · microsoft/fluentui

yush-singla · 2023-07-03T03:50:11Z

Work Item -> https://uifabric.visualstudio.com/iss/_workitems/edit/8180

Previous Behavior

The horizontal bar chart and the multi stacked bar chart's focus indicator had a bug where all the 4 sides were not visible.

New Behavior

The Bug has been patched, and the focus indicator is visible on all 4 sides properly now

Related Issue(s)

Fixes # https://uifabric.visualstudio.com/iss/_workitems/edit/8180

…ocus-bug

…nto focus-bug

…ocus-indicator-bug

fabricteam · 2023-07-03T03:59:14Z

📊 Bundle size report

_{🤖 This report was generated against 44789c103b2c4a05c026c72f4a594a291fdb0141}

size-auditor · 2023-07-03T03:59:18Z

Asset size changes

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

Baseline commit: 44789c103b2c4a05c026c72f4a594a291fdb0141 (build)

codesandbox-ci · 2023-07-03T04:03:09Z

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 b638967:

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

AtishayMsft · 2023-07-05T08:38:21Z

/azp run Fluent UI React - PR and CI

azure-pipelines · 2023-07-05T08:38:34Z

Azure Pipelines successfully started running 1 pipeline(s).

packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx

…fluentui into final-focus-indicator

…inal-focus-indicator

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json

AtishayMsft

The issue is reproing for stacked bar chart as well.

…ocus-indicator-bug

…fluentui into focus-indicator-bug

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json

…ocus-indicator-bug

…fluentui into focus-indicator-bug

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json

packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx

…ocus-indicator-bug

…fluentui into focus-indicator-bug

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json

* master: (23 commits) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) applying package updates ...

* master: (24 commits) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) ...

singlayush and others added 12 commits June 28, 2023 13:57

focus indicator bug fix in bar chart

e645d0e

added bars spacing adjustment factor

543b005

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

ab9e8fa

…ocus-bug

resolving eslint issues

b31bd7c

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

a612f24

…ocus-bug

updated snapshots, for horizontal bar chart and multistacked bar chart

9fbe4f3

pixel design issue fixed

afb9f64

Merge branch 'master' into focus-bug

050e36f

snapshot updated

ef4a855

Merge branch 'focus-bug' of https://github.com/yush-singla/fluentui i…

376a20e

…nto focus-bug

added change, and fixed stroke thickness in horizontal bar chart

7763568

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

0a829fc

…ocus-indicator-bug

msft-fluent-ui-bot added the Package: charting label Jul 3, 2023

msft-fluent-ui-bot assigned tomi-msft Jul 3, 2023

singlayush and others added 2 commits July 3, 2023 11:54

focus bug fixed

b3c4c41

Merge branch 'master' into focus-indicator-bug

c4b7b45

yush-singla marked this pull request as ready for review July 4, 2023 04:11

yush-singla requested a review from a team as a code owner July 4, 2023 04:11

Merge branch 'master' into focus-indicator-bug

26446c7

AtishayMsft reviewed Jul 5, 2023

View reviewed changes

packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx Outdated Show resolved Hide resolved

AtishayMsft reviewed Jul 5, 2023

View reviewed changes

packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx Outdated Show resolved Hide resolved

AtishayMsft reviewed Jul 5, 2023

View reviewed changes

packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx Outdated Show resolved Hide resolved

singlayush added 3 commits July 12, 2023 14:58

Merge branch 'focus-indicator-bug' of https://github.com/yush-singla/…

bcbb342

…fluentui into final-focus-indicator

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

bcfcf20

…inal-focus-indicator

added support for dark mode, fixed few PR comments

ed3601f

fabricteam reviewed Aug 17, 2023

View reviewed changes

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json Show resolved Hide resolved

Merge branch 'master' into focus-indicator-bug

115fa30

AtishayMsft reviewed Aug 18, 2023

View reviewed changes

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json Show resolved Hide resolved

AtishayMsft requested changes Aug 18, 2023

View reviewed changes

singlayush added 3 commits August 18, 2023 19:35

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

0f5704a

…ocus-indicator-bug

Merge branch 'focus-indicator-bug' of https://github.com/yush-singla/…

d0dff41

…fluentui into focus-indicator-bug

stacked bar chart focus indicator bug resolved

747730e

fabricteam reviewed Aug 18, 2023

View reviewed changes

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json Show resolved Hide resolved

Merge branch 'master' into focus-indicator-bug

661bfab

yush-singla requested a review from AtishayMsft August 19, 2023 08:04

singlayush and others added 4 commits August 19, 2023 13:44

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

5c1ef75

…ocus-indicator-bug

stacked bar chart bug fix

87e1676

Merge branch 'focus-indicator-bug' of https://github.com/yush-singla/…

8027679

…fluentui into focus-indicator-bug

Merge branch 'master' into focus-indicator-bug

a36afa7

fabricteam reviewed Aug 21, 2023

View reviewed changes

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json Show resolved Hide resolved

Merge branch 'master' into focus-indicator-bug

eb43aca

AtishayMsft reviewed Aug 22, 2023

View reviewed changes

packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx Outdated Show resolved Hide resolved

AtishayMsft reviewed Aug 22, 2023

View reviewed changes

packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx Show resolved Hide resolved

singlayush added 4 commits August 23, 2023 13:11

merged

a90a3c8

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

cae22df

…ocus-indicator-bug

fixed the outline bug in dark mode

f6c95fc

Merge branch 'focus-indicator-bug' of https://github.com/yush-singla/…

6d35a89

…fluentui into focus-indicator-bug

fabricteam reviewed Aug 24, 2023

View reviewed changes

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json Show resolved Hide resolved

multistaked bar chart variable initialisation

b638967

fabricteam reviewed Aug 24, 2023

View reviewed changes

change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json Show resolved Hide resolved

AtishayMsft approved these changes Aug 24, 2023

View reviewed changes

AtishayMsft merged commit 78808a4 into microsoft:master Aug 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Focus indicator bug in bar charts#28414

Focus indicator bug in bar charts#28414
AtishayMsft merged 54 commits intomicrosoft:masterfrom
yush-singla:focus-indicator-bug

yush-singla commented Jul 3, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jul 3, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Jul 3, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Jul 3, 2023 •

edited

Loading

Uh oh!

AtishayMsft commented Jul 5, 2023

Uh oh!

azure-pipelines bot commented Jul 5, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AtishayMsft left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

yush-singla commented Jul 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Jul 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Jul 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

codesandbox-ci bot commented Jul 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AtishayMsft commented Jul 5, 2023

Uh oh!

azure-pipelines bot commented Jul 5, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AtishayMsft left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

yush-singla commented Jul 3, 2023 •

edited

Loading

fabricteam commented Jul 3, 2023 •

edited

Loading

size-auditor bot commented Jul 3, 2023 •

edited

Loading

codesandbox-ci bot commented Jul 3, 2023 •

edited

Loading