Skip to content

Commit

Permalink
fix(input): fix clipping for type=file with Japanese locale (#11205)
Browse files Browse the repository at this point in the history
**Related Issue:** #8053

## Summary

Fixes text clipping in Windows 10 when using Japanese locale.
  • Loading branch information
jcfranco authored Jan 8, 2025
1 parent d33cb31 commit ced3eb3
Showing 1 changed file with 11 additions and 17 deletions.
28 changes: 11 additions & 17 deletions packages/calcite-components/src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*
* @prop --calcite-input-prefix-size: Specifies the component's prefix width, when present.
* @prop --calcite-input-suffix-size: Specifies the component's suffix width, when present.
*
*
* @prop --calcite-input-background-color: Specifies the component's background color.
* @prop --calcite-input-border-color: Specifies the component's border color.
* @prop --calcite-input-corner-radius: Specifies the component's corner radius.
Expand All @@ -21,10 +21,10 @@
* @prop --calcite-input-actions-icon-color: Specifies the icon color of the component's `clearable` and `number-button-type` elements.
* @prop --calcite-input-actions-icon-color-hover: Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
* @prop --calcite-input-actions-icon-color-press: Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
* @prop --calcite-input-loading-background-color: Specifies the background color of the `loading` element, when present.
* @prop --calcite-input-loading-fill-color: Specifies the fill color of the `loading` element, when present.
* @prop --calcite-input-prefix-background-color: Specifies the component's prefix background color, when present.
* @prop --calcite-input-prefix-text-color: Specifies the component's prefix text color, when present.
Expand All @@ -49,18 +49,15 @@
& .suffix {
@apply text-n2h h-6 px-2;
}
& input[type="file"],
& textarea {
@apply h-6;
min-block-size: theme("spacing.6");
}
& .number-button-wrapper,
& .action-wrapper calcite-button,
& .action-wrapper calcite-button button {
@apply h-6;
}
& input[type="file"] {
@apply h-6;
}
& .clear-button {
min-block-size: theme("spacing.6");
min-inline-size: theme("spacing.6");
Expand All @@ -79,17 +76,15 @@
& .suffix {
@apply text-n1h h-8 px-3;
}
& textarea {
& textarea,
& input[type="file"] {
min-block-size: theme("spacing.8");
}
& .number-button-wrapper,
& .action-wrapper calcite-button,
& .action-wrapper calcite-button button {
@apply h-8;
}
& input[type="file"] {
@apply h-8;
}
& .clear-button {
min-block-size: theme("spacing.8");
min-inline-size: theme("spacing.8");
Expand All @@ -108,17 +103,15 @@
& .suffix {
@apply text-0h h-11 px-4;
}
& textarea {
& textarea,
& input[type="file"] {
min-block-size: theme("spacing.11");
}
& .number-button-wrapper,
& .action-wrapper calcite-button,
& .action-wrapper calcite-button button {
@apply h-11;
}
& input[type="file"] {
@apply h-11;
}
& .clear-button {
min-block-size: theme("spacing.11");
min-inline-size: theme("spacing.11");
Expand Down Expand Up @@ -511,8 +504,8 @@ input[type="number"] {
@apply order-1
max-h-full
min-h-full
self-stretch
border
self-stretch
border
border-solid;

&[data-adjustment="down"],
Expand Down Expand Up @@ -599,6 +592,7 @@ input[type="date"]::-webkit-input-placeholder {
border-dashed
text-center;
border-color: var(--calcite-input-border-color, var(--calcite-color-border-input));
block-size: initial;
}

:host([type="file"][scale="s"]) input {
Expand Down

0 comments on commit ced3eb3

Please sign in to comment.