Skip to content

Commit 52edd1f

Browse files
sophschneidersophschneider
authored
[TextField] updates (#9361)
### WHY are these changes introduced? Updates to the `TextField` component ### How to 🎩 [Storybook link with all design states](https://5d559397bae39100201eedc1-sbdegplfrw.chromatic.com/?path=/story/all-components-textfield--all&globals=polarisSummerEditions2023:true) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) | Android Chrome | iPhone Safari | |-|-| | <img width="100" alt="Screenshot 2023-06-02 at 3 45 54 PM" src="https://github.com/Shopify/polaris/assets/20652326/94a35314-47e4-4ad4-96ed-da556d6ccd66"> | <img width="100" alt="Screenshot 2023-06-02 at 3 46 55 PM" src="https://github.com/Shopify/polaris/assets/20652326/3b9861f6-55d1-42fb-8a71-3380e3a9594f"> | - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) | Browser | Screenshot | |-|-| | Chrome | <img width="100" alt="Screenshot 2023-06-02 at 3 48 57 PM" src="https://github.com/Shopify/polaris/assets/20652326/6bc85124-e09a-4996-a28a-4247083e8caa"> | | Safari | <img width="100" alt="Screenshot 2023-06-02 at 3 49 15 PM" src="https://github.com/Shopify/polaris/assets/20652326/67ad33cc-55a2-4412-9a68-ec9f8d44a6ba"> | | Firefox | <img width="100" alt="Screenshot 2023-06-02 at 3 50 04 PM" src="https://github.com/Shopify/polaris/assets/20652326/26cf6698-d5a6-4be4-812c-632d39522875"> | | Edge | <img width="100" alt="Screenshot 2023-06-02 at 3 51 09 PM" src="https://github.com/Shopify/polaris/assets/20652326/d4fcae30-5c46-4e00-a896-46489fe5d1ca"> | - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
1 parent 29fdc93 commit 52edd1f

File tree

9 files changed

+385
-4
lines changed

9 files changed

+385
-4
lines changed

‎.changeset/silly-swans-warn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Added `disabled` variant prop to Labelled

‎polaris-react/src/components/Connected/Connected.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../styles/common';
2+
13
.Connected {
24
// stylelint-disable -- Polaris component custom properties
35
--pc-connected-item: 10;
@@ -6,6 +8,10 @@
68
// stylelint-enable
79
position: relative;
810
display: flex;
11+
12+
#{$se23} & {
13+
align-items: center;
14+
}
915
}
1016

1117
.Item {

‎polaris-react/src/components/InlineError/InlineError.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../styles/common';
2+
13
.InlineError {
24
display: flex;
35
color: var(--p-color-text-critical);
@@ -8,4 +10,15 @@
810
fill: currentColor;
911
margin-left: calc(-1 * var(--p-space-05));
1012
margin-right: calc(var(--p-space-05) + var(--p-space-1));
13+
14+
#{$se23} & {
15+
fill: var(--p-color-icon-critical);
16+
17+
// stylelint-disable-next-line -- se23
18+
svg {
19+
padding: var(--p-space-05);
20+
margin-left: var(--p-space-05);
21+
margin-right: var(--p-space-05);
22+
}
23+
}
1124
}

‎polaris-react/src/components/InlineError/InlineError.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
2-
import {DiamondAlertMinor} from '@shopify/polaris-icons';
2+
import {DiamondAlertMinor, CircleAlertMajor} from '@shopify/polaris-icons';
33

44
import {Icon} from '../Icon';
55
import type {Error} from '../../types';
6+
import {useFeatures} from '../../utilities/features';
67

78
import styles from './InlineError.scss';
89

@@ -14,14 +15,20 @@ export interface InlineErrorProps {
1415
}
1516

1617
export function InlineError({message, fieldID}: InlineErrorProps) {
18+
const {polarisSummerEditions2023} = useFeatures();
19+
1720
if (!message) {
1821
return null;
1922
}
2023

2124
return (
2225
<div id={errorTextID(fieldID)} className={styles.InlineError}>
2326
<div className={styles.Icon}>
24-
<Icon source={DiamondAlertMinor} />
27+
<Icon
28+
source={
29+
polarisSummerEditions2023 ? CircleAlertMajor : DiamondAlertMinor
30+
}
31+
/>
2532
</div>
2633
{message}
2734
</div>

‎polaris-react/src/components/Labelled/Labelled.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,19 @@
55
@include visually-hidden;
66
}
77

8+
.disabled > .LabelWrapper {
9+
#{$se23} & {
10+
color: var(--p-color-text-disabled);
11+
}
12+
}
13+
14+
// stylelint-disable-next-line -- se23 use Text component instead after se23
15+
.disabled > .HelpText > span {
16+
#{$se23} & {
17+
color: var(--p-color-text-disabled);
18+
}
19+
}
20+
821
.LabelWrapper {
922
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
1023
@include text-breakword;

‎polaris-react/src/components/Labelled/Labelled.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export interface LabelledProps {
2929
labelHidden?: boolean;
3030
/** Visual required indicator for the label */
3131
requiredIndicator?: boolean;
32+
/** Labels signify a disabled control */
33+
disabled?: boolean;
3234
}
3335

3436
export function Labelled({
@@ -40,9 +42,13 @@ export function Labelled({
4042
children,
4143
labelHidden,
4244
requiredIndicator,
45+
disabled,
4346
...rest
4447
}: LabelledProps) {
45-
const className = classNames(labelHidden && styles.hidden);
48+
const className = classNames(
49+
labelHidden && styles.hidden,
50+
disabled && styles.disabled,
51+
);
4652

4753
const actionMarkup = action ? (
4854
<div className={styles.Action}>{buttonFrom(action, {plain: true})}</div>

‎polaris-react/src/components/TextField/TextField.scss‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ $spinner-icon-size: 12px;
1818

1919
svg {
2020
fill: var(--p-color-icon);
21+
22+
#{$se23} & {
23+
fill: var(--p-color-icon-subdued);
24+
}
2125
}
2226

2327
// only show the clear button when focused within the textfield
@@ -34,6 +38,17 @@ $spinner-icon-size: 12px;
3438
opacity: 0;
3539
}
3640
}
41+
42+
&:not(.disabled) {
43+
#{$se23} & {
44+
&:hover {
45+
// stylelint-disable-next-line -- se23
46+
.Backdrop {
47+
border-color: var(--p-color-border-input-hover);
48+
}
49+
}
50+
}
51+
}
3752
}
3853

3954
.multiline {
@@ -61,6 +76,15 @@ $spinner-icon-size: 12px;
6176
~ .Backdrop {
6277
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
6378
@include focus-ring($style: 'focused');
79+
80+
#{$se23} & {
81+
border-color: var(--p-color-border-input-active-experimental);
82+
// stylelint-disable-next-line -- se23
83+
@include no-focus-ring;
84+
outline: var(--p-border-width-2) solid
85+
var(--p-color-border-interactive-focus);
86+
outline-offset: var(--p-space-025);
87+
}
6488
}
6589
}
6690

@@ -120,9 +144,25 @@ $spinner-icon-size: 12px;
120144
caret-color: var(--p-color-text);
121145
color: var(--p-color-text);
122146

147+
#{$se23} & {
148+
min-height: 32px;
149+
// Safari: date field alignment
150+
display: flex;
151+
align-items: center;
152+
line-height: var(--p-font-line-height-3);
153+
padding-top: var(--p-space-1_5-experimental);
154+
padding-bottom: var(--p-space-1_5-experimental);
155+
border: 0;
156+
}
157+
123158
@media #{$p-breakpoints-md-up} {
124159
font-size: var(--p-font-size-100);
125160
line-height: var(--p-font-line-height-2);
161+
162+
#{$se23} & {
163+
font-size: var(--p-font-size-80-experimental);
164+
line-height: var(--p-font-line-height-2);
165+
}
126166
}
127167

128168
.Prefix + & {
@@ -219,6 +259,10 @@ $spinner-icon-size: 12px;
219259
border-top-color: #898f94;
220260
border-radius: var(--p-border-radius-1);
221261
pointer-events: none;
262+
263+
#{$se23} & {
264+
border-radius: var(--p-border-radius-2);
265+
}
222266
}
223267

224268
.Prefix,
@@ -229,6 +273,15 @@ $spinner-icon-size: 12px;
229273
flex: 0 0 auto;
230274
color: var(--p-color-text-subdued);
231275
user-select: none;
276+
277+
#{$se23} & {
278+
line-height: var(--p-font-line-height-3);
279+
280+
@media #{$p-breakpoints-md-up} {
281+
font-size: var(--p-font-size-80-experimental);
282+
line-height: var(--p-font-line-height-2);
283+
}
284+
}
232285
}
233286

234287
.Prefix {
@@ -269,6 +322,15 @@ $spinner-icon-size: 12px;
269322
margin: 0 var(--p-space-3) 0 var(--p-space-1);
270323
pointer-events: none;
271324
text-align: right;
325+
326+
#{$se23} & {
327+
line-height: var(--p-font-line-height-3);
328+
329+
@media #{$p-breakpoints-md-up} {
330+
font-size: var(--p-font-size-80-experimental);
331+
line-height: var(--p-font-line-height-2);
332+
}
333+
}
272334
}
273335

274336
.AlignFieldBottom {
@@ -315,6 +377,11 @@ $spinner-icon-size: 12px;
315377
width: 22px;
316378
cursor: pointer;
317379

380+
#{$se23} & {
381+
justify-content: center;
382+
margin: var(--p-space-1);
383+
}
384+
318385
.focus &,
319386
.TextField:hover & {
320387
visibility: visible;
@@ -324,6 +391,20 @@ $spinner-icon-size: 12px;
324391
.SpinnerIcon {
325392
height: $spinner-icon-size;
326393
width: $spinner-icon-size;
394+
395+
#{$se23} & {
396+
height: auto;
397+
width: auto;
398+
// stylelint-disable-next-line -- se23
399+
position: absolute;
400+
// Safari: prevent highlighting icon
401+
user-select: none;
402+
403+
// stylelint-disable-next-line -- se23
404+
svg {
405+
fill: var(--p-color-icon);
406+
}
407+
}
327408
}
328409

329410
.Resizer {
@@ -363,6 +444,18 @@ $spinner-icon-size: 12px;
363444
appearance: none;
364445
border: none;
365446

447+
#{$se23} & {
448+
border-radius: var(--p-border-radius-1);
449+
450+
&:hover {
451+
background: var(--p-color-bg-strong-hover);
452+
}
453+
454+
&:active {
455+
background: var(--p-color-bg-strong-active);
456+
}
457+
}
458+
366459
&:focus {
367460
outline: none;
368461
}
@@ -375,11 +468,22 @@ $spinner-icon-size: 12px;
375468
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
376469
border-top-right-radius: var(--pc-text-field-spinner-border-radius);
377470
margin-bottom: var(--p-space-05);
471+
472+
#{$se23} & {
473+
margin-bottom: 0;
474+
border-bottom-left-radius: 0;
475+
border-bottom-right-radius: 0;
476+
}
378477
}
379478

380479
&:last-child {
381480
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
382481
border-bottom-right-radius: var(--pc-text-field-spinner-border-radius);
482+
483+
#{$se23} & {
484+
border-top-left-radius: 0;
485+
border-top-right-radius: 0;
486+
}
383487
}
384488

385489
&:not(:first-child) {

0 commit comments

Comments
 (0)