Skip to content

Commit e44e4f4

Browse files
authored
fix(textfield): add line-height to prevent missing diacritics (#2123)
This adds a line-height definition to the textfield's input and sets that value equal to the height of the input. This prevents diacritics from being cut off in certain languages.
1 parent 03a37f5 commit e44e4f4

File tree

1 file changed

+9
-2
lines changed

1 file changed

+9
-2
lines changed

components/textfield/index.css

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-Textfield {
14-
--spectrum-texfield-animation-duration: var(
14+
/* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
15+
/* disallow mod for max compatibility */
16+
--spectrum-textfield-input-line-height: var(--spectrum-textfield-height);
17+
18+
--spectrum-texfield-animation-duration: var(
1519
--spectrum-animation-duration-100
1620
);
1721

@@ -678,6 +682,8 @@ governing permissions and limitations under the License.
678682

679683
/********* Child Element - Input *********/
680684
.spectrum-Textfield-input {
685+
/* no mod defined to allow for maximum compatibility */
686+
line-height: var(--spectrum-textfield-input-line-height);
681687
box-sizing: border-box;
682688
inline-size: 100%;
683689
min-inline-size: var(
@@ -1251,7 +1257,8 @@ governing permissions and limitations under the License.
12511257

12521258
/*** Text Area ***/
12531259
.spectrum-Textfield--multiline {
1254-
.spectrum-Textfield-input {
1260+
--spectrum-textfield-input-line-height: normal;
1261+
.spectrum-Textfield-input {
12551262
min-inline-size: var(
12561263
--mod-text-area-min-inline-size,
12571264
var(--spectrum-text-area-min-inline-size)

0 commit comments

Comments
 (0)