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.

Sign up for GitHub

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

Jump to bottom

[Block Section] Deprecate status property, add icon property #8110

Closed
2 of 5 tasks
macandcheese opened this issue Nov 2, 2023 · 8 comments
Closed
2 of 5 tasks

[Block Section] Deprecate status property, add icon property #8110

macandcheese opened this issue Nov 2, 2023 · 8 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - design - sm Small design effort; 1-4 days of design work future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Milestone
2024-05-28 - May ...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Nov 2, 2023 •
edited

Check existing issues

Description

Currently, Block Section has a status property. There are a few issues here:

1 - When used with toggle-display="switch" - there is a visual overlap.

2 - I don't think the component itself should convey status. I think using the component in such a way, to convey the status of content inside, is a fine use case, but I think associating validity with a "Block Section" component is weird.

Screenshot 2023-11-02 at 2 43 22 PM
(see overlap)

Propose we remove the status property, and instead add an icon property. This would:

1 - Allow the existing use case to continue (via setting an icon and using a css variable to style the color as needed).
2 - Allow for other use cases of iconography in Block Section besides the couple tied to a status

Acceptance Criteria

Block Section's status property is deprecated. Block Section has icon property added. Ensure the new property works and displays correctly without overlap in both toggle-display modes.

Relevant Info

Perhaps a content-start/end slot could be added as we have elsewhere, but I'd do that later and only if requested.

cc @SkyeSeitz @ashetland

Which Component

Block Section

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

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

Esri team

Calcite (design)
@macandcheese macandcheese added enhancement Issues tied to a new feature or request. design Issues that need design consultation prior to development. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Nov 2, 2023
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Nov 2, 2023
@ashetland
Copy link

This brings into question the placement of the icon. Is there a reason the current status icons are at the end instead of the start? Either position could be valid, but in general, when there is only one icon it is placed at the beginning (like icon-start).

@ashetland
Copy link

Should this also apply to Block? It has a status prop that overrides the icon slot (note this is a slot instead of a prop on this one).

@macandcheese
Copy link
Contributor Author

Yeah, probably, as that use case could be solved with more general slots / props. This one is related #4932

@brittneytewks brittneytewks added the future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. label Nov 6, 2023
@asangma
Copy link
Contributor

asangma commented Nov 6, 2023

To my knowledge, this shouldn't cause any major issues.
The intention was to offer something parallel to validation indicators in Stepper.
image

There are cases where a closed block-section might hide an invalid input.
That being said, I'm not against removing this property and adding a slot to accommodate the indicator use-case. I think we overestimated how much status would be used. :)

@ashetland ashetland added the estimate - design - sm Small design effort; 1-4 days of design work label Nov 8, 2023
@brittneytewks brittneytewks added the p - medium Issue is non core or affecting less that 60% of people using the library label Nov 16, 2023
@brittneytewks brittneytewks removed the needs triage Planning workflow - pending design/dev review. label Nov 16, 2023
@brittneytewks brittneytewks added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Dec 12, 2023
@ashetland ashetland mentioned this issue Dec 15, 2023
Open
@ashetland
Copy link

Figma file documenting the changes for the above and related designs for #4932. Recommend implementing them together.

@ashetland ashetland changed the title [Block Section] Remove status property, add icon property [Block Section] Deprecate status property, add icon property Dec 15, 2023
@ashetland ashetland added the ready for dev Issues ready for development implementation. label Dec 15, 2023
@github-actions github-actions bot added 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Dec 15, 2023
@github-actions github-actions bot removed this from the 2023 December Priorities milestone Dec 15, 2023
@github-actions GitHub Actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@geospatialem geospatialem added this to the 2024-04-24 - Apr Release milestone Jan 10, 2024
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jan 10, 2024
This was referenced Feb 20, 2024
Merged
Merged
jcfranco added a commit that referenced this issue Mar 5, 2024
@jcfranco
feat(block-section): add component tokens (#8795)
13c4432 
**Related Issue:** #7180

## Summary

Adds the following component tokens:

* `--calcite-block-section-background-color`
* `--calcite-block-section-border-color`
* `--calcite-block-section-heading-text-color`
* `--calcite-block-section-heading-text-color-hover`

**Note**: added internal icon color token for [upcoming `icon`
prop](#8110).
@Elijbet Elijbet self-assigned this Apr 24, 2024
@Elijbet Elijbet added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Apr 24, 2024
@Elijbet Elijbet mentioned this issue Apr 25, 2024
Merged
@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Apr 26, 2024
Elijbet added a commit that referenced this issue May 11, 2024
@Elijbet
feat(block-section): add icon property (deprecates status) (#9194)
c31bf36 
**Related Issue:** #8110

## Summary
Remove the `status` property and instead add an `icon` property.

Provide a demo and screenshot coverage.
@Elijbet Elijbet 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 May 13, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned Elijbet May 13, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented May 21, 2024

🍍 Verified locally on main

@DitwanP DitwanP closed this as completed May 21, 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 May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - design - sm Small design effort; 1-4 days of design work future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Projects
None yet
Milestone
2024-05-28 - May Main Release
Development

No branches or pull requests
7 participants
@macandcheese @geospatialem @asangma @Elijbet @DitwanP @ashetland @brittneytewks