Environment Information
Latest Commit
1249d2e
Describe the issue:
I think there might be a problem with CardHeader - or I might just be understading it wrong. I'm trying to pass in a larger font into the CardHeader. The textContainer style will only be used if a content slot is passed in.
fluentui/useCardHeaderStyles.ts at master · microsoft/fluentui · GitHub
I'm thinking I wouldn't want to pass in a content slot - that one is a background styling wrapper only for styling the header & description text.
[2/25/2022 1:35 PM] Ben Howell
Hi Erin, I haven't worked on Card myself so I'm not as familiar with it. The best person to ask is André Dias (andredias), although he's in Prague so it's after working hours there.
I think what you describe is most likely a bug. I think I remember someone else mentioning to Andre that it's weird/incorrect that Card has an optional slot that wraps other slots. You might want to log a bug on GitHub, and ideally include a codesandbox (https://codesandbox.io) or codepen that repros the issue; or sample code and a screenshot is ok too.
As a temporary workaround, does it work to add content=" "? (Or try content={{}})
Also, it seems odd to be using and as children of the header and description slots:
Usually font sizes for things like that are chosen by design, so they should be left as the default.
Otherwise, customizing the font size would better be done by setting a className on the slot instead of adding a wrapper element. E.g. create a class called myHeaderClass with the appropriate font styles, and then use: header={{ className: myHeaderClass, children: hdrText }}
[7:34 AM] André Dias (he/him)
Hey Erin! That is indeed a bug that I'll need to look into. As Ben mentioned, CardHeader is supposed to fit exactly with Fluent design and so font size should not be changed.However, changing it shouldn't result in overlapping of text as that is not an expected behavior.What I would suggest is if your Card's header varies a lot from the Fluent standard, to just avoid using CardHeader altogether as there might be breaking changes to it in the future, making your life harder.If possible, do create an issue with this on GitHub so I can track it in the future.And thanks for reaching out!
like 1
Actual behavior:
Tried passing in Content to make the styles work - doesn't work. Tried passing in header as Title3, doesn't work
<Card>
<CardHeader
image={sparkleIcon}
header={<Title3>{hdrText}</Title3>}
description={<Body>{descText}</Body>}
action={tabActions}
/>
Expected behavior:
If applicable, please provide a codepen repro:
Priorities and help requested (not applicable if asking question):
Are you willing to submit a PR to fix? (Yes, No)
Requested priority: (Blocking, High, Normal, Low)
Normal
Products/sites affected: (if applicable)
Environment Information
Latest Commit
1249d2e
Describe the issue:
I think there might be a problem with CardHeader - or I might just be understading it wrong. I'm trying to pass in a larger font into the CardHeader. The textContainer style will only be used if a content slot is passed in.
fluentui/useCardHeaderStyles.ts at master · microsoft/fluentui · GitHub
I'm thinking I wouldn't want to pass in a content slot - that one is a background styling wrapper only for styling the header & description text.
[2/25/2022 1:35 PM] Ben Howell
Hi Erin, I haven't worked on Card myself so I'm not as familiar with it. The best person to ask is André Dias (andredias), although he's in Prague so it's after working hours there.
I think what you describe is most likely a bug. I think I remember someone else mentioning to Andre that it's weird/incorrect that Card has an optional slot that wraps other slots. You might want to log a bug on GitHub, and ideally include a codesandbox (https://codesandbox.io) or codepen that repros the issue; or sample code and a screenshot is ok too.
As a temporary workaround, does it work to add content=" "? (Or try content={{}})
Also, it seems odd to be using and as children of the header and description slots:
Usually font sizes for things like that are chosen by design, so they should be left as the default.
Otherwise, customizing the font size would better be done by setting a className on the slot instead of adding a wrapper element. E.g. create a class called myHeaderClass with the appropriate font styles, and then use: header={{ className: myHeaderClass, children: hdrText }}
[7:34 AM] André Dias (he/him)
Hey Erin! That is indeed a bug that I'll need to look into. As Ben mentioned, CardHeader is supposed to fit exactly with Fluent design and so font size should not be changed.However, changing it shouldn't result in overlapping of text as that is not an expected behavior.What I would suggest is if your Card's header varies a lot from the Fluent standard, to just avoid using CardHeader altogether as there might be breaking changes to it in the future, making your life harder.If possible, do create an issue with this on GitHub so I can track it in the future.And thanks for reaching out!
like 1
Actual behavior:
Tried passing in Content to make the styles work - doesn't work. Tried passing in header as Title3, doesn't work
Expected behavior:
If applicable, please provide a codepen repro:
Priorities and help requested (not applicable if asking question):
Are you willing to submit a PR to fix? (Yes, No)
Requested priority: (Blocking, High, Normal, Low)
Normal
Products/sites affected: (if applicable)