Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Cell actions should have correct background when row focused within #25790

Merged
merged 2 commits into from
Dec 1, 2022

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Nov 25, 2022

The table cell actions should appear when any focus is within the row and not just within the cell actions container. Also apply the hover background colour when the row has focus within.

Now when the cell actions overlap the cell content, it will 'cover' the content just like in hover scenarios.

Also fixes useFocusWithin so that the constant is no longer the same as useFocusVisible

Before

image

After

image

Fixes #25789

The table cell actions should appear when any focus is within the row
and not just within the cell actions container. Also apply the hover
background colour when the row has focus within.

Now when the cell actions overlap the cell content, it will 'cover' the
content just like in hover scenarios.
@size-auditor
Copy link

size-auditor bot commented Nov 25, 2022

Asset size changes

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

Baseline commit: f7d7f82f6b3117ce163c6fee84b03c8774bed95f (build)

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-radio
Radio
36.446 kB
12.123 kB
36.42 kB
12.126 kB
-26 B
3 B
react-slider
Slider
32.118 kB
10.192 kB
32.091 kB
10.183 kB
-27 B
-9 B
react-switch
Switch
33.453 kB
10.581 kB
33.427 kB
10.581 kB
-26 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
79.294 kB
24.443 kB
react-alert
Alert
86.891 kB
21.708 kB
react-avatar
Avatar
51.076 kB
14.285 kB
react-avatar
AvatarGroup
15.006 kB
6.009 kB
react-avatar
AvatarGroupItem
65.654 kB
18.382 kB
react-button
Button
36.86 kB
9.913 kB
react-button
CompoundButton
43.885 kB
11.131 kB
react-button
MenuButton
41.537 kB
11.187 kB
react-button
SplitButton
48.983 kB
12.588 kB
react-button
ToggleButton
52.685 kB
11.415 kB
react-card
Card - All
71.873 kB
20.936 kB
react-card
Card
67.651 kB
19.892 kB
react-card
CardFooter
8.617 kB
3.62 kB
react-card
CardHeader
9.792 kB
3.995 kB
react-card
CardPreview
8.718 kB
3.674 kB
react-combobox
Combobox (including child components)
78.244 kB
25.015 kB
react-combobox
Dropdown (including child components)
77.531 kB
24.927 kB
react-components
react-components: Button, FluentProvider & webLightTheme
62.975 kB
17.687 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
190.411 kB
53.077 kB
react-components
react-components: FluentProvider & webLightTheme
33.48 kB
11.037 kB
react-dialog
Dialog (including children components)
83.036 kB
24.754 kB
react-infobutton
InfoButton
117.922 kB
35.391 kB
react-link
Link
11.862 kB
4.885 kB
react-menu
Menu (including children components)
117.61 kB
36.287 kB
react-menu
Menu (including selectable components)
120.679 kB
36.82 kB
react-persona
Persona
57.131 kB
15.951 kB
react-popover
Popover
103.666 kB
31.858 kB
react-portal
Portal
10.495 kB
3.851 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
react-provider
FluentProvider
15.817 kB
5.905 kB
react-radio
RadioGroup
14.304 kB
5.72 kB
react-tooltip
Tooltip
42.032 kB
14.739 kB
🤖 This report was generated against 56a61fc731fa4ca6440eb78629c1e38b26154ffa

@codesandbox-ci
Copy link

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

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

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1330 1311 5000
Button mount 941 949 5000
FluentProvider mount 1603 1594 5000
FluentProviderWithTheme mount 631 640 10
FluentProviderWithTheme virtual-rerender 584 592 10
FluentProviderWithTheme virtual-rerender-with-unmount 631 640 10
MakeStyles mount 1897 1913 50000
SpinButton mount 2571 2534 5000

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 2 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1749 screenshots unchanged, 0 screenshots with different dimensions and 2 screenshots with visible difference.

unknown 2 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.size+active+badge.normal.chromium.png 4 Changed
Avatar Converged.size+active+ring-shadow.normal.chromium.png 7 Changed

@ling1726 ling1726 marked this pull request as ready for review November 28, 2022 08:30
@ling1726 ling1726 requested a review from a team as a code owner November 28, 2022 08:30
@ling1726 ling1726 merged commit 6f450a1 into microsoft:master Dec 1, 2022
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Dec 1, 2022
* master:
  BREAKING: `useTable` renamed to `useTableFeatures` (microsoft#25797)
  chore: add retries for navigation in ssr-tests-v9 (microsoft#25844)
  fix: Cell actions should have correct background when row focused within (microsoft#25790)
  applying package updates
  Disable 3 Avatar Converged active stories (microsoft#25765)
  chore: introduce TS path aliases for improved DX in v8 (microsoft#25778)
  chore: prepare release react-northstar 0.65.0 (microsoft#25446)
  refactor(scripts): encapsulate v0 and v8 tooling within its domain boundaries (microsoft#25738)
  Support single point in area chart (microsoft#25842)
  chore: enable isolateModules in all v8 packages (microsoft#25774)
  chore: refactor styles for Button (microsoft#25216)
  feat: Improve docs for `DataGrid`, export as unstable (microsoft#25805)
  applying package updates
  fix: Allow data-selection-disabled to be respected by DetailsRow (microsoft#25836)
  docs(rfcs): Update recipes rfc with chosen option and add more details (microsoft#25823)
  chore(react-textarea): migrate to new package structure (microsoft#25820)
  chore(react-switch): migrate to new package structure (microsoft#25819)
  fix(react-avatar): AvatarGroup's pie layout places inline items correctly in rtl (microsoft#25822)
  chore: add few improvements to toolbar stories (microsoft#25635)
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
…hin (microsoft#25790)

* fix: Cell actions should have correct background when row focused within

The table cell actions should appear when any focus is within the row
and not just within the cell actions container. Also apply the hover
background colour when the row has focus within.

Now when the cell actions overlap the cell content, it will 'cover' the
content just like in hover scenarios.

* changefiles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Table: Cell actions overlap text without background colour
4 participants