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

calcite-input type="file" button overflows border style in JA locale #8053

Closed
2 of 5 tasks
zoekmoore opened this issue Oct 25, 2023 · 6 comments
Closed
2 of 5 tasks

calcite-input type="file" button overflows border style in JA locale #8053

zoekmoore opened this issue Oct 25, 2023 · 6 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Mission Issues logged by ArcGIS Mission team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 5 A few days of work, definitely requires updates to tests. i18n-l10n issues dealing with internationalization/localization impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive spike complete Issues that have a research spike completed and dev work can proceed
Milestone
2025-01-30 - 3.0....

Comments

@zoekmoore
Copy link

Check existing issues

Actual Behavior

With the locale set to Japanese (JA), the file upload button within the calcite-input type="file" component expands in height and the bottom of the button is partially obscured by the dashed border surrounding the input field.
image

Expected Behavior

We expect to see symmetrical padding or margins on the top and bottom of the input button, as is the case with English.

Reproduction Sample

https://codepen.io/zoe11498/pen/vYbORgV or https://developers.arcgis.com/calcite-design-system/components/input/

Reproduction Steps

  1. Use a machine with Windows 10 OS
  2. Set the language of either a Chrome or Edge browser to Japanese (JA)
  3. Open either the codepen or the documentation sample provided above, changing type to file
  4. Observe. The bottom of the button intersects with the dashed border around the input component

Reproduction Version

1.9.0

Relevant Info

Tested on Windows 10.

Reproducible with both Chrome and Edge browsers.

Not reproducible in Firefox.

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

We noticed this while testing ArcGIS Mission Manager, but this is a low priority i18n UI bug. There is no impact to usability.

Calcite package

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

Esri team

ArcGIS Mission
@zoekmoore zoekmoore added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Oct 25, 2023
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive ArcGIS Mission Issues logged by ArcGIS Mission team members. labels Oct 25, 2023
@macandcheese
Copy link
Contributor

macandcheese commented Oct 25, 2023 •
edited
Loading

Related: #6545

@annierm18 annierm18 added the i18n-l10n issues dealing with internationalization/localization label Nov 22, 2023
@geospatialem geospatialem added the spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. label Nov 27, 2023
@geospatialem geospatialem added this to the 2023 December Priorities milestone Nov 27, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Nov 27, 2023
@geospatialem
Copy link
Member

Spike to confirm behavior/design on the native input element. Refer to the linked above issue, if we can proceed with an effort targeted with the related issue in the future. #8053 (comment)

@jcfranco jcfranco self-assigned this Nov 28, 2023
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Nov 28, 2023
@jcfranco
Copy link
Member

Managed to reproduce with the native input[type=file] and narrowed down the CSS that causes this (highlighted in codepen): https://codepen.io/jcfranco/pen/BaMOoMg

Some options::

  1. Have file type use min-height vs height
  2. Use the default box-sizing: content-box (sidebar: is this needed if the internal input is void/self-closing?)
  3. Tweak the padding applied to input for this type – might be tricky to find the right values for other languages

@jcfranco jcfranco added the spike complete Issues that have a research spike completed and dev work can proceed label Nov 28, 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 spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. 2 - in development Issues that are actively being worked on. labels Nov 28, 2023
@github-actions GitHub Actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@github-actions github-actions bot removed this from the 2023 December Priorities milestone Nov 28, 2023
@jcfranco jcfranco mentioned this issue Nov 29, 2023
Merged
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jan 29, 2024
@geospatialem geospatialem added the estimate - 5 A few days of work, definitely requires updates to tests. label Oct 25, 2024
@jcfranco jcfranco self-assigned this Jan 4, 2025
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Jan 4, 2025
@jcfranco jcfranco mentioned this issue Jan 4, 2025
Merged
jcfranco added a commit that referenced this issue Jan 8, 2025
@jcfranco
fix(input): fix clipping for type=file with Japanese locale (#11205)
ced3eb3 
**Related Issue:** #8053

## Summary

Fixes text clipping in Windows 10 when using Japanese locale.
@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 Jan 8, 2025
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco Jan 8, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

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 Jan 9, 2025
@geospatialem
Copy link
Member

Verified on the dev branch when changing the Chrome browser language to Japanese.

Capture

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. ArcGIS Mission Issues logged by ArcGIS Mission team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 5 A few days of work, definitely requires updates to tests. i18n-l10n issues dealing with internationalization/localization impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive spike complete Issues that have a research spike completed and dev work can proceed
Projects
None yet
Milestone
2025-01-30 - 3.0.0 Jan Breaking Chang...
Development

No branches or pull requests
6 participants
@jcfranco @macandcheese @geospatialem @annierm18 @zoekmoore @DitwanP