Skip to content

Conversation

@marcosmoura
Copy link
Contributor

CardHeader was ignoring the content line-height by setting grid-auto-rows. By removing it, it automatically uses the content size to determine the height of each row.

@marcosmoura marcosmoura requested a review from a team as a code owner August 23, 2023 18:53
@marcosmoura marcosmoura self-assigned this Aug 23, 2023
@marcosmoura marcosmoura changed the title fix: CardHeader grid layout ignoring line-height of content fix(react-card): CardHeader grid layout ignoring line-height of content Aug 23, 2023
@marcosmoura marcosmoura enabled auto-merge (squash) August 23, 2023 18:59
@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 c191d35:

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 607 602 5000
Button mount 320 307 5000
Field mount 1108 1115 5000
FluentProvider mount 684 680 5000
FluentProviderWithTheme mount 81 92 10
FluentProviderWithTheme virtual-rerender 68 68 10
FluentProviderWithTheme virtual-rerender-with-unmount 70 71 10
InfoButton mount 13 15 5000
MakeStyles mount 880 863 50000
Persona mount 1746 1659 5000
SpinButton mount 1394 1335 5000

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-card
Card - All
88.335 kB
25.271 kB
88.334 kB
25.252 kB
-1 B
-19 B
react-card
CardHeader
11.59 kB
4.716 kB
11.589 kB
4.707 kB
-1 B
-9 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.781 kB
57.916 kB
203.786 kB
57.921 kB
5 B
5 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-card
Card
83.177 kB
23.742 kB
react-card
CardFooter
9.338 kB
3.932 kB
react-card
CardPreview
10.297 kB
4.317 kB
react-components
react-components: Button, FluentProvider & webLightTheme
66.614 kB
18.512 kB
react-components
react-components: FluentProvider & webLightTheme
37.787 kB
12.387 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
🤖 This report was generated against afcfb2ebe322e2a8e204ac192e68f48f1164107f

@size-auditor
Copy link

size-auditor bot commented Aug 23, 2023

Asset size changes

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

Baseline commit: 8919d6c7e807cbfdb9c46f292fbb76cd908dc708 (build)

@marcosmoura marcosmoura merged commit 727a5df into microsoft:master Aug 25, 2023
@marcosmoura marcosmoura deleted the fix/react-card-header-grid-not-following-line-height branch August 25, 2023 13:44
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* 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
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* 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)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* 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)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (26 commits)
  chore: Make triage bot add needs triage label to new issues (microsoft#28994)
  fix(react-tags-preview): use regular icon for dismiss (microsoft#28958)
  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)
  ...
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.

[Bug]: Card layout, icon and text misaligned

3 participants