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

[Input] Responsive layout #6677

Closed
12 tasks done
geospatialem opened this issue Mar 27, 2023 · 17 comments
Closed
12 tasks done

[Input] Responsive layout #6677

geospatialem opened this issue Mar 27, 2023 · 17 comments
Assignees
@geospatialem @SkyeSeitz @ashetland @brittneytewks
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 - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive 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

@geospatialem
Copy link
Member

geospatialem commented Mar 27, 2023 •
edited by jcfranco
Loading

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

  • 3. Add truncation to placeholder and value props for all Calcite Input components:

    • Input
    • Input Text
    • Input Number
    • Input Date Picker
    • Input Time Picker

Current behavior
https://github.com/Esri/calcite-design-system/assets/29716057/07d7b4d4-fd1a-4efe-a8cf-3a2b82c42899
image

Expected behavior
https://github.com/Esri/calcite-design-system/assets/29716057/8a25f049-96a9-4dbd-8eb2-4c923c1c6373
image

Relevant Info

Part of epic #6670

Which Component

input

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. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Mar 27, 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 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:
We determined that Input does not need enhancements under the responsive layout initiative as it can be used on small screens and mobile devices as is with some simple documentation guidance to avoid overcrowding with limited horizontal real estate.

@geospatialem Can we close this issue out for the reason above? Thanks!

@geospatialem
Copy link
Member Author

Closing per Skye's note above.

@github-actions github-actions bot added the impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive label Aug 8, 2023
@SkyeSeitz
Copy link

Hi @geospatialem Can we reopen this issue based on the need for truncation as listed in the updated description? Since this is a need across all Calcite Input components let me know if you suggest re-opening all 5 specific issues or if we can track the 5 inputs in this single issue. Thank you!

@geospatialem geospatialem reopened this Aug 8, 2023
@geospatialem
Copy link
Member Author

Hi @geospatialem Can we reopen this issue based on the need for truncation as listed in the updated description? Since this is a need across all Calcite Input components let me know if you suggest re-opening all 5 specific issues or if we can track the 5 inputs in this single issue. Thank you!

@SkyeSeitz Looks like we've got a list above of all 5 inputs, so we could leverage this one issue. LMK if that works, otherwise we can organize additional issues later this week.

@geospatialem geospatialem added this to the Design Sprint milestone Aug 8, 2023
@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. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Aug 8, 2023
@brittneytewks brittneytewks added the figma changes Issues that require additions or updates to the Figma UI Kit label Sep 12, 2023
@SkyeSeitz SkyeSeitz removed their assignment Oct 4, 2023
@SkyeSeitz SkyeSeitz added the ready for dev Issues ready for development implementation. label Oct 4, 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 4, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Oct 4, 2023

cc @geospatialem, @brittneytewks

@github-actions github-actions bot removed this from the Design Now milestone Oct 4, 2023
@anveshmekala
Copy link
Contributor

Can we add calcite-text-area to the list ?

@jcfranco jcfranco self-assigned this Nov 10, 2023
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. estimate - 3 A day or two of work, likely requires updates to tests. and removed 0 - new New issues that need assignment. estimate - 8 Requires input from team, consider smaller steps. labels Nov 10, 2023
@jcfranco
Copy link
Member

jcfranco commented Nov 10, 2023 •
edited
Loading

@geospatialem @brittneytewks Lowered the estimate for this one. I think we can use the :placeholder-shown pseudo class for this (at least for the inputs).

@jcfranco jcfranco mentioned this issue Nov 10, 2023
Merged
@jcfranco
Copy link
Member

I've submitted a PR that updates all inputs from the list above. While I did update input-date-picker and input-time-picker I noticed that these will only truncate when a user is typing an unrealistic value and blurs the input. The breakpoint stories will need to be updated when they support interactions to mimic the scenario I mentioned to properly show truncation. cc @SkyeSeitz @ashetland

@jcfranco
Copy link
Member

Forgot to mention that I added calcite-text-area to the list as @anveshmekala suggested, but LMK if we need to move to a separate issue.

@anveshmekala Do you have bandwidth to pick up text area's truncation?

@anveshmekala
Copy link
Contributor

@anveshmekala Do you have bandwidth to pick up text area's truncation?

Yep.

@ashetland
Copy link

ashetland commented Nov 13, 2023 •
edited
Loading

@jcfranco Hmmm, yeah not sure how much sense this makes on Input Date/Time Picker. I think I'd expect invalid text to be removed from these onBlur? For the placeholder at least, I does look like we need to add a gap before the dropdown chevron. Both Input Pickers look like this in this edge-case width:
CleanShot 2023-11-13 at 09 25 08@2x

@anveshmekala
Copy link
Contributor

calcite-text-area might need to be excluded from the list . The text-overflow wont work in calcite-text-area due to word-wrap default.

@ashetland
Copy link

ashetland commented Nov 14, 2023 •
edited
Loading

Also not sure it would make sense for Text Area from the design perspective. I'd expect entered text to be clipped and scrollable like it is now.

jcfranco added a commit that referenced this issue Nov 15, 2023
@jcfranco
feat(input, input-date-picker, input-number, input-text, input-time-p…
533eff3 
…icker): truncate value and placeholder when input is narrow (#8160)

**Related Issue:** #6677 

## Summary

Text will be truncated and display an ellipsis when the placeholder or
value overflows the input.

**Note**: this also tidies up some CSS by removing unnecessary `:host`
usage and organizing some Tailwind utils.
@jcfranco jcfranco 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 15, 2023
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@jcfranco
Copy link
Member

Removed text-area from the list per @anveshmekala and @ashetland's recommendation. 🤜💥🤛

benelan pushed a commit that referenced this issue Nov 15, 2023
@jcfranco @benelan
feat(input, input-date-picker, input-number, input-text, input-time-p…
988e32b 
…icker): truncate value and placeholder when input is narrow (#8160)

**Related Issue:** #6677 

## Summary

Text will be truncated and display an ellipsis when the placeholder or
value overflows the input.

**Note**: this also tidies up some CSS by removing unnecessary `:host`
usage and organizing some Tailwind utils.
@geospatialem
Copy link
Member Author

Verified in 1.11.0-next.3, where the list below of components are supported down to 300px:

  • Input
  • Input Text
  • Input Number
  • Input Date Picker
  • Input Time Picker

image

@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 17, 2023
@ashetland ashetland removed the figma changes Issues that require additions or updates to the Figma UI Kit label Dec 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@SkyeSeitz SkyeSeitz

@ashetland ashetland

@brittneytewks brittneytewks

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 - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive 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
6 participants
@jcfranco @geospatialem @SkyeSeitz @anveshmekala @ashetland @brittneytewks