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

Create generic item layout component #6743

Closed
driskull opened this issue Apr 6, 2023 · 8 comments
Closed

Create generic item layout component #6743

driskull opened this issue Apr 6, 2023 · 8 comments
Assignees
@driskull
Labels
4 - verified Issues that have been released and confirmed resolved. estimate - 8 Requires input from team, consider smaller steps. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone new component Issues tied to a new component. p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2023 May Priorities

Comments

@driskull
Copy link
Member

driskull commented Apr 6, 2023 •
edited
Loading

Description

Create generic item layout component

This component would have the following slots to allow users to layout content better...

  • actions-start
  • content-start
  • DEFAULT content slot
  • content-end
  • actions-end

User Stories

This will help users be able to layout content that is slotted within a panel footer for example. It will also allow a use to disable specific parts within the component if necessary since some parent components don't allow disabling partial UI.

Acceptance Criteria

Name of component can be decided later.

Relevant Info

  • actions-start
  • content-start
    -(default slot) for cotent
  • content-end
  • actions-end

related to #5664

Helpful Details

This would be able to emulate the layout of a calcite-panel header or a calcite-list-item

<calcite-layout-item>
<calcite-action text="select" icon="checkmark" slot="actions-start" />
<calcite-avatar slot="content-start" / >
My Content
<calcite-action text="delete" icon="trash" slot="actions-end" />
</calcite-layout-item>

Priority impact

p2 - want for current milestone

Esri team

N/A
@driskull driskull added new component Issues tied to a new component. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Apr 6, 2023
@github-actions github-actions bot added the impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone label Apr 6, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Apr 6, 2023

cc @ashetland, @yelenakreyndel, @SkyeSeitz

@driskull
Copy link
Member Author

driskull commented Apr 6, 2023

cc @geospatialem @jcfranco can we get this triaged?

@macandcheese
Copy link
Contributor

Does it complicate this unnecessarily to have a layout-group or parent by another name to wrap these layout-item component? That could control spacing / margin around the children, any potential alignment or orientation options, etc.

@driskull
Copy link
Member Author

driskull commented Apr 6, 2023

I'm not sure it needs a parent since this layout component since wherever its slotted should handle that.

This was referenced Apr 12, 2023
Closed
Open
@geospatialem
Copy link
Member

cc @geospatialem @jcfranco can we get this triaged?

@driskull You thinking for the May release?

@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 8 Requires input from team, consider smaller steps. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Apr 13, 2023
@driskull
Copy link
Member Author

yeah that sounds good

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Apr 13, 2023
@geospatialem geospatialem added this to the 2023 May Priorities milestone Apr 13, 2023
@driskull driskull self-assigned this Apr 27, 2023
driskull added a commit that referenced this issue May 2, 2023
@driskull
feat(layout-item): Adds new layout-item component to arrange content …
89e0a92 
…and actions. #6743
@driskull driskull mentioned this issue May 2, 2023
Merged
@geospatialem geospatialem added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label May 4, 2023
driskull added a commit that referenced this issue May 15, 2023
@driskull
feat(stack): Adds new component to arrange content and actions. #6743 #…
7b0b567 
…5664
driskull added a commit that referenced this issue May 22, 2023
@driskull
feat(stack): Adds new Stack component to arrange content and actions (
bbced3a 
#6903)

**Related Issue:** #6743 #5664

## Summary

- Adds new component `Stack` to render a row of actions and content.
- Can be used to slot into places where no layout options are present.
- Can be used to disable specific parts of slotted content.

## Background

This will help users be able to layout content that is slotted within a
panel footer for example.

- The panel footer slot doesn't offer a way to slot things at the start
or end and this would allow them the ability to do that without having
to dig into CSS or apply padding.

It will also allow a use to disable specific parts within the component
if necessary since some parent components don't allow disabling partial
UI.

- Instead of disabling the component, the user would use this component
and slot it into the component. The user can disable only a portion of
slotted content inside this component.

## Questions

- Name of this component
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 0 - new New issues that need assignment. labels May 22, 2023
@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 May 22, 2023
@geospatialem
Copy link
Member

Verified on master with the demo pages, including use of the two CSS props:

  • --calcite-stack-padding-inline and
  • --calcite-stack-padding-block

Example use:

<calcite-panel>
  <div slot="header-content">Panel</div>
  <p>Content</p>
  <calcite-stack slot="footer">
    <calcite-action text="select" icon="check" slot="actions-start"></calcite-action>
    <calcite-input disabled></calcite-input>
    <calcite-avatar slot="content-start" thumbnail="http://placekitten.com/105/105" scale="s"> </calcite-avatar>
    <calcite-chip slot="content-end" value="chip" scale="s" appearance="outline">A chip</calcite-chip>
    <calcite-action text="delete" icon="trash" slot="actions-end"></calcite-action>
  </calcite-stack>
</calcite-panel>

@geospatialem
Copy link
Member

cc @SkyeSeitz @ashetland for Figma changes.

@SkyeSeitz SkyeSeitz removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Oct 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@driskull driskull

Labels
4 - verified Issues that have been released and confirmed resolved. estimate - 8 Requires input from team, consider smaller steps. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone new component Issues tied to a new component. p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2023 May Priorities
Development

No branches or pull requests
4 participants
@driskull @macandcheese @geospatialem @SkyeSeitz