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

Enhancement: [calcite-tree] Support actions/menu in tree items #3127

Closed
ellenupp opened this issue Sep 28, 2021 · 6 comments
Closed

Enhancement: [calcite-tree] Support actions/menu in tree items #3127

ellenupp opened this issue Sep 28, 2021 · 6 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests.
Milestone
2023 January Prio...

Comments

@ellenupp
Copy link

ellenupp commented Sep 28, 2021 •
edited
Loading

Description

We would like to include a menu of actions in each tree item, ex:
image

Including a calcite-dropdown within a calcite-tree-item does not render in a usable way as the dropdown is constrained to the current tree level. It would be great to have a slot in the tree item to accommodate such a menu.
https://codepen.io/ellupp/pen/PojWvmR?editors=1100
image

Acceptance Criteria

Tree items can include a menu of actions/dropdown. When opened, the menu should render on top of all tree items such that it is entirely visible.

Relevant Info

Supporting a menu is the key enhancement needed but we also need to support multiple actions in some tree items. Slotting a calcite-button into the tree item works for this at the moment. Also, in our use case we only want the actions to be visible on hover or when focus is on/within the tree item.
image

Which Component

calcite-tree/calcite-tree-item

Example Use Case

Please contact me for link to a custom tree implementation in dashboards that has the desired functionality.

cc @vijayendranj @julio8a
@ellenupp ellenupp added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Sep 28, 2021
@ellenupp ellenupp changed the title Enhancement: [calcite-tree] Support for actions/menu in tree items Enhancement: [calcite-tree] Support actions/menu in tree items Sep 28, 2021
@macandcheese
Copy link
Contributor

Seems like this could adopt the action / content start / end slot paradigm to allow for these customizations, similar to a list item.

@caripizza caripizza mentioned this issue Oct 13, 2021
Closed
@benelan benelan removed the needs triage Planning workflow - pending design/dev review. label Oct 13, 2021
@benelan benelan added this to the Freezer milestone Oct 13, 2021
@benelan benelan mentioned this issue Oct 13, 2021
Closed
13 tasks
@moosetraveller moosetraveller mentioned this issue Dec 7, 2021
Open
@geospatialem geospatialem added the design Issues that need design consultation prior to development. label Jun 29, 2022
@Elijbet Elijbet added the estimate - 5 A few days of work, definitely requires updates to tests. label Dec 2, 2022
@Elijbet Elijbet self-assigned this Dec 2, 2022
@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Dec 8, 2022
@Elijbet
Copy link
Contributor

Elijbet commented Dec 10, 2022

@ellenupp
Just noticed that all tree-items from the example I had from you earlier today have an icon-start. Is it needed for your use case, I could plan to add that as well if it is.

@ellenupp
Copy link
Author

Yeah that would be great, thanks.

@Elijbet Elijbet mentioned this issue Dec 13, 2022
Merged
Elijbet added a commit that referenced this issue Jan 24, 2023
@Elijbet
feat(tree-item): support actions-end and icon-start (#6005)
ea36657 
**Related Issue:** #3127

## Summary

This PR aims to enhance the `calcite-tree-item` with an `actions-end`
feature to accommodate a dropdown menu.

- `calcite-tree-item` now supports `actions-end` slot for adding actions
to the end of the component, with a recommendation to use two or fewer
actions.
- Including a `calcite-dropdown` within a `calcite-tree-item` renders as
expected.
- Includes `icon-start` per the use case described in the issue. 
- Adds a story to demo the use case.
- Screenshots to cover various scenarios.

Thanks @macandcheese for help with styling.
@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 Jan 28, 2023
@github-actions github-actions bot assigned geospatialem and unassigned Elijbet Jan 28, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem 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 Jan 29, 2023
@geospatialem
Copy link
Member

Verified in 1.0.3 with the following Codepen with the iconStart prop and actions-end slot.

Screenshot 2023-01-28 at 9 59 41 PM

@Elijbet Elijbet mentioned this issue Feb 1, 2023
Merged
Elijbet added a commit that referenced this issue Feb 9, 2023
@Elijbet
fix(tree-item): preserves consistent height with or w/t actions-end (#…
728f42b 
…6403)

**Related Issue:** #6361, #3127


## Summary
Moved the `actions-end` slot outside of the `node-container` layout and
placed it next to it instead, similar to `notice`. This way the padding
on the `node-container` does not add to the action-ends.

Expected consistent height on the `tree-item` when bringing in
`actions-end` can be preserved like this (here to show designers how
this can be demo-ed to end-users).

s (24) tree-item: s slotted component + s action
m (32) tree-item: m slotted component + m action
l (48) tree-item: l slotted component + l action


https://user-images.githubusercontent.com/19231036/216716464-8413540a-85f5-4183-a2b1-b67652ae1384.mov


We need to follow up on clipping the action:

- We’re not normally clipping actions to accommodate component heights,
it’s inconsistent with how we normally handle slots. So here I’m
clipping the actions for the time being and marking this internally as a
known issue (Figma and implementation side)
- Large clips outline: clips top and bottom, will be added to the note
above.
@ellenupp
Copy link
Author

Getting around to trying this out- it looks great, thanks!

@ashetland ashetland mentioned this issue Jun 6, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests.
Projects
None yet
Milestone
2023 January Priorities
Development

No branches or pull requests
6 participants
@jcfranco @macandcheese @geospatialem @benelan @ellenupp @Elijbet