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

[Card] Slotted footer content can inherit defined styles #8855

Closed
6 tasks
macandcheese opened this issue Feb 29, 2024 · 2 comments
Closed
6 tasks

[Card] Slotted footer content can inherit defined styles #8855

macandcheese opened this issue Feb 29, 2024 · 2 comments
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs triage Planning workflow - pending design/dev review. p - medium Issue is non core or affecting less that 60% of people using the library

Comments

@macandcheese
Copy link
Contributor

Check existing issues

Actual Behavior

Card's footer content can inherit the style set on all slotted content. Elsewhere, like heading and description slots, this is expected as by default this will be text content. For the Footer slots, this is less often the case and we should avoid setting this. As always users can override any style on content they slot themselves.

Expected Behavior

These styles should not be applied by default.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/vYMYdEy?editors=1000

Reproduction Steps

  1. Open Codepen
  2. View Issue

Reproduction Version

2.6

Relevant Info

No response

Regression?

2.5.1

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

@macandcheese macandcheese added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Feb 29, 2024
@macandcheese macandcheese self-assigned this Feb 29, 2024
@macandcheese macandcheese added this to the 2024-03-26 - Mar Release milestone Feb 29, 2024
@github-actions github-actions bot added the Calcite (design) Issues logged by Calcite designers. label Feb 29, 2024
@macandcheese macandcheese added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. Calcite (design) Issues logged by Calcite designers. labels Feb 29, 2024
@github-actions github-actions bot added the impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive label Feb 29, 2024
@macandcheese macandcheese added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. labels Feb 29, 2024
macandcheese added a commit that referenced this issue Feb 29, 2024
**Related Issue:** #8855 

## Summary
This removes the styles set on footer elements, as it could
unintentionally style components slotted directly that themselves do not
ensure a text color is set. The workaround is to add a wrapping div that
itself is slotted in `footer-end` or `footer-start`.

<img width="439" alt="Screenshot 2024-02-27 at 12 01 36 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/eec057d9-b6ab-45b7-bc50-b283e1f4f9d8">


The `heading` and `description` (and deprecated `title` and `subtitle`)
should keep their default text styles as these are most often text
slotted directly. In the future it might be good to make these string
properties to incentivize consistency, keeping the option to slot in
rich content like links, icons, etc., when needed.
@macandcheese macandcheese added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 29, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned macandcheese Feb 29, 2024
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Feb 29, 2024

🍠 Verified on main

@DitwanP DitwanP closed this as completed Feb 29, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs triage Planning workflow - pending design/dev review. p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Development

No branches or pull requests

3 participants