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

[Alert] Responsive layout on xs screens for actions-end and multiple alerts #7921

Closed
2 of 4 tasks
geospatialem opened this issue Oct 2, 2023 · 6 comments
Closed
2 of 4 tasks

[Alert] Responsive layout on xs screens for actions-end and multiple alerts #7921

geospatialem opened this issue Oct 2, 2023 · 6 comments
Assignees
@jcfranco
Labels
2 - in development Issues that are actively being worked on. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone ready for dev Issues ready for development implementation.
Milestone
2023 November Pri...

Comments

@geospatialem
Copy link
Member

geospatialem commented Oct 2, 2023 •
edited by jcfranco
Loading

Check existing issues

Actual Behavior

When alert is viewed with small dimensions (<475px) if slotted "actions-end" contain a lot of text (and are enabled with text-enabled) and/or contain multiple alerts, the content spans outside of the component.

Opened from verifying #6673.

image

image

Expected Behavior

Exact design specs tbd for "actions-end" with text and text-enabled.

Original content from #6673: Figma file

image

Reproduction Sample

https://codepen.io/geospatialem/pen/VwqGbMg

Reproduction Steps

  1. Open the sample
  2. [Optional] Click the "Add alert to queue" button at least one time
  3. Observe the alert

image

Reproduction Version

1.9.0-next.16

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

Seems moderate for prioritization. Applies to smaller screen sizes/dimensions, but advanced configurations will be impacted.

Calcite package

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

Esri team

Calcite (dev)
@geospatialem geospatialem added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 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 Oct 2, 2023
@github-actions github-actions bot added impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. labels Oct 2, 2023
This was referenced Oct 2, 2023
Closed
Closed
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed needs triage Planning workflow - pending design/dev review. 0 - new New issues that need assignment. labels Oct 4, 2023
@geospatialem geospatialem mentioned this issue Oct 18, 2023
Closed
5 tasks
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. 1 - assigned Issues that are assigned to a sprint and a team member. and removed 1 - assigned Issues that are assigned to a sprint and a team member. 2 - in development Issues that are actively being worked on. labels Oct 23, 2023
@jcfranco
Copy link
Member

This is assigned to me, but I think this needs a design pass to determine how to handle the overflowing text-enabled actions. cc @ashetland @SkyeSeitz

@geospatialem geospatialem assigned SkyeSeitz and unassigned jcfranco Oct 23, 2023
@SkyeSeitz
Copy link

Tagged @jcfranco & @ashetland in Figma file with truncation or wrapping considerations depending on slot limitations.

@geospatialem
Copy link
Member Author

Assigning development efforts to November

cc @jcfranco for the two options Skye mentioned above for consideration.

@geospatialem geospatialem added the ready for dev Issues ready for development implementation. label Oct 30, 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 Oct 30, 2023
@github-actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@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 Oct 30, 2023
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Oct 30, 2023
@geospatialem geospatialem added this to the 2023 November Priorities milestone Oct 30, 2023
@jcfranco jcfranco mentioned this issue Nov 15, 2023
Closed
@jcfranco jcfranco 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 Nov 15, 2023
@SkyeSeitz
Copy link

Note affecting proposed Alert responsiveness:
The implementation of queue stacking (issue slated for January) solves the Alert responsiveness concern at small breakpoints.

Currently, the queue Chip takes up a significant amount of horizontal real estate along side the text causing the responsive concern of an excessively tall Alert. But with the plans to move the queue to the outside of this container, even the large Alert at the xs breakpoint can house a reasonable amount of content without needing the layout change.

image

@jcfranco
Copy link
Member

Closing based on ☝️.

@jcfranco jcfranco mentioned this issue Nov 17, 2023
Merged
jcfranco added a commit that referenced this issue Nov 21, 2023
@jcfranco
revert: feat(alert): make component responsive (#8195)
2f4ff6c 
**Related Issue:** N/A

## Summary

Rolls back responsiveness (#7755) in favor of upcoming alert stack UX
(#2835).

See
#7921 (comment)
for more info.
benelan pushed a commit that referenced this issue Nov 24, 2023
@jcfranco @benelan
revert: feat(alert): make component responsive (#8195)
19cf05f 
**Related Issue:** N/A

Rolls back responsiveness (#7755) in favor of upcoming alert stack UX
(#2835).

See
#7921 (comment)
for more info.
benelan pushed a commit that referenced this issue Nov 24, 2023
@jcfranco @benelan
revert: feat(alert): make component responsive (#8195)
330eb44 
**Related Issue:** N/A

Rolls back responsiveness (#7755) in favor of upcoming alert stack UX
(#2835).

See
#7921 (comment)
for more info.
benelan pushed a commit that referenced this issue Nov 26, 2023
@jcfranco @benelan
revert: feat(alert): make component responsive (#8195)
bb017ed 
**Related Issue:** N/A

Rolls back responsiveness (#7755) in favor of upcoming alert stack UX
(#2835).

See
#7921 (comment)
for more info.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jcfranco jcfranco

Labels
2 - in development Issues that are actively being worked on. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2023 November Priorities
Development

No branches or pull requests
3 participants
@jcfranco @geospatialem @SkyeSeitz