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 #6673

Closed
6 tasks
geospatialem opened this issue Mar 27, 2023 · 8 comments
Closed
6 tasks

[Alert] Responsive layout #6673

geospatialem opened this issue Mar 27, 2023 · 8 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation.
Milestone
2023 September Pr...

Comments

@geospatialem
Copy link
Member

Description

Mobile responsiveness across Calcite Design System, focused on web (traditionally desktop sized web browser), tablet, phone screen sizes, and large monitors.

Acceptance Criteria

  • 1. Consider breaking changes for folks. Consultation should occur on both the design and development teams.
  • 2. Components need to be designed for the following breakpoints:
    • Small (s), 476px
    • Medium (m), 768px
    • Large (l), 1152px
    • Extra larger (xl), 1440px

Relevant Info

Part of epic #6670

Which Component

alert

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

Calcite (design)
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. design Issues that need design consultation prior to development. p - high Issue should be addressed in the current milestone, impacts component or core functionality 0 - new New issues that need assignment. estimate - 8 Requires input from team, consider smaller steps. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Mar 27, 2023
@github-actions github-actions bot added the Calcite (design) Issues logged by Calcite designers. label Mar 27, 2023
@geospatialem geospatialem mentioned this issue Mar 27, 2023
Closed
27 tasks
@brittneytewks brittneytewks removed the impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive label Mar 31, 2023
@SkyeSeitz SkyeSeitz self-assigned this Apr 14, 2023
@SkyeSeitz
Copy link

Update from team discussion today:
@rmstinson presented Alert footer iterations for smaller screen sizes and mobile devices, which we will put on hold to first finalize the Alert stacking enhancement currently in progress.

image

@rmstinson
Copy link

It looks like I can't assign myself to this issue @SkyeSeitz but at least I can comment now!

@geospatialem
Copy link
Member Author

Just added 'ya @rmstinson 👍🏻

@SkyeSeitz SkyeSeitz mentioned this issue May 11, 2023
Closed
6 tasks
@ashetland ashetland added this to the Design Sprint Planning milestone May 30, 2023
@ashetland ashetland removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label May 30, 2023
@rmstinson
Copy link

Compact Alerts have been built - they're intended for use at a width of 767px and lower.

Building them also presented an opportunity to streamline the regular Alert component - currently we have a variant for autodismiss, and a variant for default. However, it's possible to build the component with a show/hide boolean for the Progress component, so that we can have a configuration option for autodismiss, and cut the number of variants in the component in half.

Take a look here: https://www.figma.com/file/eradSav1w0c4viNljdROKk/Alert---responsive-design-%5B6673%5D?type=design&node-id=517%3A12655&mode=design&t=eM0Y3CNz80p4B0wH-1

Screenshot 2023-06-28 at 4 01 30 PM

If we're happy with this approach I can change the rest of the Alerts as well. This might have ramifications for the Notice component as well @ashetland

@SkyeSeitz
Copy link

Thanks, @rmstinson. Prototype and specs marked as Ready for Dev.

@SkyeSeitz SkyeSeitz added the ready for dev Issues ready for development implementation. label Jun 29, 2023
@github-actions github-actions bot added needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed design Issues that need design consultation prior to development. labels Jun 29, 2023
@github-actions github-actions bot removed this from the Design Backlog milestone Jun 29, 2023
@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 Jul 26, 2023
@geospatialem geospatialem added this to the 2023 August Priorities milestone Jul 26, 2023
@geospatialem geospatialem removed this from the 2023 August Priorities milestone Aug 22, 2023
@jcfranco jcfranco self-assigned this Sep 1, 2023
@jcfranco jcfranco added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Sep 1, 2023
@jcfranco jcfranco mentioned this issue Sep 19, 2023
Merged
jcfranco added a commit that referenced this issue Sep 29, 2023
@jcfranco
feat(alert): make component responsive (#7755)
66222b5 
**Related Issue:** #6673

## Summary

Updates alert to be responsive per the design spec.

## Additional changes

* simplified class names (`alert` prefix is no longer necessary)
* simplified styles by fixing issues reported by
[`no-descending-specificity`](https://github.com/stylelint/stylelint/blob/main/lib/rules/no-descending-specificity/README.md)
stylelint rule
* `requestedIcon` is now computed at render time to simplify component 
* refactored class names (e.g., used BEM-like convention to
state/modifier classes) and applied them according to conventions
* clean up test story
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 29, 2023
@github-actions github-actions bot assigned geospatialem and unassigned jcfranco Sep 29, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem mentioned this issue Oct 2, 2023
Closed
4 tasks
@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 Oct 2, 2023
@geospatialem
Copy link
Member Author

geospatialem commented Oct 2, 2023 •
edited
Loading

Verified in 1.9.0-next.16 for all cases, with the exception of "actions-end" slots where textEnabled is true and text exceeds the component's width.

image

Opened #7921 to mitigate the latter.

@brittneytewks brittneytewks added the design Issues that need design consultation prior to development. label Dec 11, 2023
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. Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2023 September Priorities - Main release
Development

No branches or pull requests
6 participants
@jcfranco @geospatialem @rmstinson @SkyeSeitz @ashetland @brittneytewks