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

[Stepper] Responsive layout #6694

Closed
4 tasks done
brittneytewks opened this issue Mar 28, 2023 · 4 comments
Closed
4 tasks done

[Stepper] Responsive layout #6694

brittneytewks opened this issue Mar 28, 2023 · 4 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. c-stepper Issues that pertain to the calcite-stepper component 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 - 13 Requires planning and 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 November Pri...

Comments

@brittneytewks
Copy link

brittneytewks commented Mar 28, 2023 •
edited by SkyeSeitz
Loading

Description

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

stepper

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

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

Update from team discussion today:
I presented iterations for a Stepper on smaller screen sizes and mobile devices. Below is the solution we landed on, which I will refine before our final design proposal with additional variants and vertical orientation.
image

@SkyeSeitz SkyeSeitz self-assigned this Mar 31, 2023
@SkyeSeitz
Copy link

Added all variants for us to review in Tuesday's meeting with a few follow up questions.
image

@SkyeSeitz SkyeSeitz added the ready for dev Issues ready for development implementation. label Apr 14, 2023
@geospatialem geospatialem removed the design Issues that need design consultation prior to development. label Apr 17, 2023
@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
@anveshmekala anveshmekala self-assigned this Sep 5, 2023
@brittneytewks brittneytewks 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 5, 2023
@anveshmekala anveshmekala added the c-stepper Issues that pertain to the calcite-stepper component label Sep 7, 2023
@anveshmekala anveshmekala mentioned this issue Sep 14, 2023
Merged
@anveshmekala anveshmekala 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 Sep 18, 2023
@anveshmekala anveshmekala mentioned this issue Oct 2, 2023
Merged
anveshmekala added a commit that referenced this issue Oct 2, 2023
@anveshmekala
chore(stepper): add message bundles for responsive layout (#7918)
8ba7827 
**Related Issue:** #6694 

## Summary
Adds messages to support built-in translations for responsive layout.
anveshmekala added a commit that referenced this issue Nov 21, 2023
@anveshmekala
feat(stepper): enable responsive layout (#7744)
687ca2b 
**Related Issue:** #6694 

## Summary

Enables responsive layout for stepper component.


#### Additional Enhancements:

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
@anveshmekala anveshmekala 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 Nov 21, 2023
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned anveshmekala Nov 21, 2023
@github-actions 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 Nov 21, 2023
@geospatialem
Copy link
Member

Verified on 2.0.0-next.1 with default, numbered, icon, and numbered w/ icon

image

benelan pushed a commit that referenced this issue Nov 24, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
d932710 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this issue Nov 24, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
80792e4 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this issue Nov 26, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
c74ee15 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this issue Nov 29, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
64daee5 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this issue Dec 1, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
bcd4a7e 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this issue Dec 1, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
6709703 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this issue Dec 2, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
556b8bc 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
@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

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. c-stepper Issues that pertain to the calcite-stepper component 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 - 13 Requires planning and 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 November Priorities
Development

No branches or pull requests
5 participants
@geospatialem @SkyeSeitz @DitwanP @anveshmekala @brittneytewks