Skip to content

Commit f2528e5

Browse files
jenndiazjenndiaz
authored
refactor(textfield): invalid and valid padding inline end (#2220)
* chore(textfield): padding right standard inputs * chore(textfield): quiet padding inline end * chore(textfield): valid icon size tokens * chore(textfield): address build fail * chore(textfield): add mods * chore(textfield): adds mods * chore(textfeild): return default * chore(textfield): address old TODOS * chore(textfield): address build fail * chore(textfield): update mods
1 parent 32149e5 commit f2528e5

File tree

2 files changed

+55
-40
lines changed

2 files changed

+55
-40
lines changed

‎components/textfield/index.css

Lines changed: 54 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ governing permissions and limitations under the License.
1414
/* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
1515
/* disallow mod for max compatibility */
1616
--spectrum-textfield-input-line-height: var(--spectrum-textfield-height);
17-
1817
--spectrum-texfield-animation-duration: var(
1918
--spectrum-animation-duration-100
2019
);
@@ -65,8 +64,11 @@ governing permissions and limitations under the License.
6564
--spectrum-textfield-icon-size-invalid: var(
6665
--spectrum-workflow-icon-size-100
6766
);
67+
--spectrum-textfield-icon-size-valid: var(
68+
--spectrum-checkmark-icon-size-100
69+
);
6870

69-
/* default icon spacing */
71+
/* default icon spacing - invalid */
7072
--spectrum-textfield-icon-spacing-inline-start-invalid: var(
7173
--spectrum-field-text-to-alert-icon-medium
7274
);
@@ -80,6 +82,7 @@ governing permissions and limitations under the License.
8082
--spectrum-field-top-to-alert-icon-medium
8183
);
8284

85+
/* default icon spacing - valid */
8386
--spectrum-textfield-icon-spacing-inline-start-valid: var(
8487
--spectrum-field-text-to-validation-icon-medium
8588
);
@@ -93,15 +96,6 @@ governing permissions and limitations under the License.
9396
--spectrum-field-top-to-validation-icon-medium
9497
);
9598

96-
/* icon end spacing override for combobox */
97-
--spectrum-textfield-icon-spacing-inline-end-override: 32px; /* TODO - placeholder - reevaluate after combobox migration */
98-
99-
/* TODO - icon spacing override for search - reevaluate after search is migrated */
100-
/* @deprecation --spectrum-Textfield-workflow-icon-width and --spectrum-Textfield-workflow-icon-gap will be removed during the S2 migration;
101-
please update your code to --spectrum-textfield-workflow-icon-width and --spectrum-textfield-workflow-icon-gap */
102-
--spectrum-textfield-workflow-icon-width: var(--spectrum-Textfield-workflow-icon-width, 18px);
103-
--spectrum-textfield-workflow-icon-gap: var(--spectrum-Textfield-workflow-icon-gap, 6px);
104-
10599
/* font styles */
106100
--spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack);
107101
--spectrum-textfield-font-weight: var(--spectrum-regular-font-weight);
@@ -227,6 +221,9 @@ governing permissions and limitations under the License.
227221
--spectrum-component-edge-to-text-75
228222
);
229223
--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75);
224+
--spectrum-textfield-icon-size-valid: var(
225+
--spectrum-checkmark-icon-size-75
226+
);
230227
--spectrum-textfield-icon-spacing-inline-end-invalid: var(
231228
--spectrum-field-edge-to-alert-icon-small
232229
);
@@ -277,6 +274,9 @@ governing permissions and limitations under the License.
277274
--spectrum-textfield-icon-size-invalid: var(
278275
--spectrum-workflow-icon-size-100
279276
);
277+
--spectrum-textfield-icon-size-valid: var(
278+
--spectrum-checkmark-icon-size-100
279+
);
280280
--spectrum-textfield-icon-spacing-inline-end-invalid: var(
281281
--spectrum-field-edge-to-alert-icon-medium
282282
);
@@ -327,6 +327,9 @@ governing permissions and limitations under the License.
327327
--spectrum-textfield-icon-size-invalid: var(
328328
--spectrum-workflow-icon-size-200
329329
);
330+
--spectrum-textfield-icon-size-valid: var(
331+
--spectrum-checkmark-icon-size-200
332+
);
330333
--spectrum-textfield-icon-spacing-inline-end-invalid: var(
331334
--spectrum-field-edge-to-alert-icon-large
332335
);
@@ -377,6 +380,9 @@ governing permissions and limitations under the License.
377380
--spectrum-textfield-icon-size-invalid: var(
378381
--spectrum-workflow-icon-size-300
379382
);
383+
--spectrum-textfield-icon-size-valid: var(
384+
--spectrum-checkmark-icon-size-300
385+
);
380386
--spectrum-textfield-icon-spacing-inline-end-invalid: var(
381387
--spectrum-field-edge-to-alert-icon-extra-large
382388
);
@@ -482,6 +488,26 @@ governing permissions and limitations under the License.
482488
);
483489
}
484490
}
491+
492+
/*** Quiet Input Invalid ⚠️ ***/
493+
&.is-invalid{
494+
.spectrum-Textfield-input{
495+
padding-inline-end: calc(
496+
var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) +
497+
var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid))
498+
);
499+
}
500+
}
501+
502+
/*** Quiet Input Valid ✅ ***/
503+
&.is-valid{
504+
.spectrum-Textfield-input{
505+
padding-inline-end: calc(
506+
var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) +
507+
var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid))
508+
);
509+
}
510+
}
485511
}
486512

487513
/********* Child Element - Validation Icons - ⚠️ ✅ *********/
@@ -582,13 +608,6 @@ governing permissions and limitations under the License.
582608
var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)
583609
);
584610
}
585-
586-
/* TODO - reevaluate InputGroup override after combobox is migrated - this ensures icon is not hidden under picker button */
587-
.spectrum-InputGroup & {
588-
margin-inline-end: var(
589-
--spectrum-textfield-icon-spacing-inline-end-override
590-
);
591-
}
592611
}
593612

594613
/********* Child Component - Label *********/
@@ -705,13 +724,12 @@ governing permissions and limitations under the License.
705724
) -
706725
var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))
707726
);
727+
708728
padding-inline: calc(
709-
var(
710-
--mod-textfield-spacing-inline,
711-
var(--spectrum-textfield-spacing-inline)
712-
) -
713-
var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))
729+
var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) -
730+
var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))
714731
);
732+
715733
/* Use padding instead of text-indent because text-indent does not left align the text in Edge browser */
716734
text-indent: 0;
717735
vertical-align: top; /* used to align them correctly in forms. */
@@ -784,20 +802,6 @@ governing permissions and limitations under the License.
784802
grid-row: 2;
785803
grid-column: 1 / span 2;
786804

787-
/* TODO - quiet search field left padding - reevaluate when search is migrated */
788-
.spectrum-Textfield--quiet .spectrum-Textfield-icon ~ & {
789-
padding-inline-start: calc(
790-
var(
791-
--mod-textfield-workflow-icon-gap,
792-
var(--spectrum-textfield-workflow-icon-gap)
793-
) +
794-
var(
795-
--mod-textfield-workflow-icon-width,
796-
var(--spectrum-textfield-workflow-icon-width)
797-
)
798-
);
799-
}
800-
801805
/* Remove the native clear button in IE */
802806
/* http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
803807
&::-ms-clear {
@@ -1009,6 +1013,12 @@ governing permissions and limitations under the License.
10091013

10101014
/*** Input Valid ✅ ***/
10111015
.is-valid & {
1016+
padding-inline-end: calc(
1017+
var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) +
1018+
var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) +
1019+
var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) -
1020+
var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))
1021+
);
10121022
color: var(
10131023
--highcontrast-textfield-text-color-valid,
10141024
var(
@@ -1020,6 +1030,12 @@ governing permissions and limitations under the License.
10201030

10211031
/*** Input Invalid ⚠️ ***/
10221032
.is-invalid & {
1033+
padding-inline-end: calc(
1034+
var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) +
1035+
var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) +
1036+
var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) -
1037+
var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))
1038+
);
10231039
color: var(
10241040
--highcontrast-textfield-text-color-invalid,
10251041
var(
@@ -1145,7 +1161,6 @@ governing permissions and limitations under the License.
11451161
--mod-textfield-spacing-inline-quiet,
11461162
var(--spectrum-textfield-spacing-inline-quiet)
11471163
);
1148-
11491164
background-color: transparent;
11501165
border-radius: 0;
11511166

@@ -1283,6 +1298,7 @@ governing permissions and limitations under the License.
12831298

12841299
&.spectrum-Textfield--quiet {
12851300
.spectrum-Textfield-input {
1301+
12861302
min-block-size: var(
12871303
--mod-text-area-min-block-size-quiet,
12881304
var(--spectrum-text-area-min-block-size-quiet)

‎components/textfield/metadata/mods.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
| `--mod-textfield-icon-color-invalid` |
3838
| `--mod-textfield-icon-color-valid` |
3939
| `--mod-textfield-icon-size-invalid` |
40+
| `--mod-textfield-icon-size-valid` |
4041
| `--mod-textfield-icon-spacing-block-invalid` |
4142
| `--mod-textfield-icon-spacing-block-valid` |
4243
| `--mod-textfield-icon-spacing-inline-end-invalid` |
@@ -65,5 +66,3 @@
6566
| `--mod-textfield-text-color-readonly` |
6667
| `--mod-textfield-text-color-valid` |
6768
| `--mod-textfield-width` |
68-
| `--mod-textfield-workflow-icon-gap` |
69-
| `--mod-textfield-workflow-icon-width` |

0 commit comments

Comments
 (0)