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] Add icon property, update slot nomenclature #4932

Closed
macandcheese opened this issue Jul 14, 2022 · 7 comments
Closed

[Block] Add icon property, update slot nomenclature #4932

macandcheese opened this issue Jul 14, 2022 · 7 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. design Issues that need design consultation prior to development. docs Issues relating to documentation updates only. 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. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Milestone
2024-06-25 - Jun ...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Jul 14, 2022 •
edited
Loading

Description

The current Block slot documentation / naming is overly limiting, in practice an action or other element may be applicable :

https://developers.arcgis.com/calcite-design-system/components/block/#component-api-slots-control

Which Component

Block

Proposing that we rename the current slots to ones more consistent with the system:

Control -> Actions End
Icon -> Content Start

Additionally:

Icons are extremely common to see in Blocks. The vast majority of the time, they are simply using Calcite UI Icons that could be provided via prop. Sometimes they need to be custom image or other graphic, and for those cases, the "content-start" slot should be sufficient.

Add: Add an icon property that can be used in lieu of icon slot. Of course, folks can still slot a custom icon here, but providing an icon slot will ensure more consistently implemented designs in more cases while still preserving the location for custom icon or image. This will display alongside "content-slot", and if populated, that slot should not replace this icon provided via property.
@macandcheese macandcheese added docs Issues relating to documentation updates only. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jul 14, 2022
@geospatialem geospatialem added the breaking change Issues and pull requests with code changes that are not backwards compatible. label Jun 28, 2023
@macandcheese
Copy link
Contributor Author

Probably a good candidate for the internal Stack component here - even "icon" could probably just be "content-start".

@macandcheese macandcheese changed the title [Block] Clarify control slot documentation [Block] Add icon property, update slot nomenclature Jun 28, 2023
@macandcheese macandcheese added design Issues that need design consultation prior to development. p - medium Issue is non core or affecting less that 60% of people using the library labels Jun 28, 2023
@ashetland ashetland added this to the Design Sprint Next milestone Jun 29, 2023
@ashetland ashetland removed the needs triage Planning workflow - pending design/dev review. label Jun 29, 2023
@ashetland ashetland mentioned this issue Jun 29, 2023
Closed
@ashetland ashetland self-assigned this Jun 30, 2023
@ashetland ashetland added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jun 30, 2023
@jcfranco
Copy link
Member

Similar to #6918, existing slots should be deprecated to allow developers time to migrate to the new ones before we remove them in a future breaking change release.

@geospatialem geospatialem added future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. and removed breaking change Issues and pull requests with code changes that are not backwards compatible. labels Jul 26, 2023
@brittneytewks brittneytewks added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Sep 12, 2023
@macandcheese macandcheese mentioned this issue Oct 25, 2023
Merged
@ashetland ashetland added the estimate - design - sm Small design effort; 1-4 days of design work label Oct 31, 2023
@macandcheese macandcheese mentioned this issue Nov 6, 2023
Closed
5 tasks
@brittneytewks brittneytewks removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Dec 12, 2023
@ashetland
Copy link

ashetland commented Dec 15, 2023 •
edited
Loading

Figma file documenting the changes for the above and deprecating the status prop to align with #8110. Designs for both issues are included in the same file. Recommend implementing them together.

@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. 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 removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jan 10, 2024
This was referenced Feb 21, 2024
Merged
Merged
jcfranco added a commit that referenced this issue Mar 5, 2024
@jcfranco
feat(block): add component tokens (#8790)
2a6cbc1 
**Related Issue:** #7180

## Summary

Adds the following component tokens (CSS props):

* `--calcite-block-background-color` 
* `--calcite-block-border-color` 
* `--calcite-block-content-space` 
* `--calcite-block-description-text-color`
* `--calcite-block-header-background-color-hover`
* `--calcite-block-header-background-color` 
* `--calcite-block-heading-text-color-open` 
* `--calcite-block-heading-text-color` 
* `--calcite-block-text-color`
* `--calcite-block-toggle-icon-color`

Deprecates the following:

* `--calcite-block-padding`

**Note**: added internal icon color token for [upcoming `icon`
prop](#4932).
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jun 4, 2024
@Elijbet
Copy link
Contributor

Elijbet commented Jun 5, 2024 •
edited
Loading

We reworked it a bit with @ashetland to keep the current behavior and deprecate it. Currently, there is a conditional for three items loading | status | icon slot. We don't want to directly swap icon slot with contentStart. So we'll be doing this instead:
Screenshot 2024-06-05 at 2 34 48 PM
The current situation with conditional loading | status | icon slot remains and we're adding icon-start and contentStart to the left of it.

Eventually loading triple conditional will go away, and we'll add a progress bar on top to make up for it. #7492 will improve on this at that time.

@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jun 5, 2024
@Elijbet Elijbet mentioned this issue Jun 6, 2024
Merged
Elijbet added a commit that referenced this issue Jun 17, 2024
@Elijbet
feat(block): add icon start/end properties (deprecate icon slot a…
7117c6b 
…nd `status`), add `actions-end` slot (deprecate `control`), add `content-start` (#9535)

**Related Issue:** #4932

## Summary

- Add `icon-start` and `icon-end` properties. 
- Deprecate `status`.
- Deprecate `icon` in favor of `icon-start`.
- Add `actions-end` slot and deprecate `control` slot.
- Add `content-start`.
@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 Jun 17, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Jun 17, 2024

🍡 Verified locally on dev

@DitwanP DitwanP closed this as completed Jun 17, 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 Jun 17, 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. design Issues that need design consultation prior to development. docs Issues relating to documentation updates only. 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. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2024-06-25 - Jun Release
Development

No branches or pull requests
8 participants
@jcfranco @alisonailea @macandcheese @geospatialem @Elijbet @DitwanP @ashetland @brittneytewks