Skip to content

Commit f711831

Browse files
jnm2377kodiakhq[bot]
andauthoredFeb 23, 2022
fix(styles): add readonly text-input styles (#10778)
* fix: add readonly styles * fix: styles * fix: add readonly story Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 8c5e1dc commit f711831

File tree

2 files changed

+28
-3
lines changed

2 files changed

+28
-3
lines changed
 

‎packages/react/src/components/TextInput/next/TextInput.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,17 @@ export const TogglePasswordVisibility = () => {
4848
);
4949
};
5050

51+
export const ReadOnly = () => {
52+
return (
53+
<TextInput
54+
labelText="Text input label"
55+
helperText="Optional help text"
56+
value="This is read only, you can't type more."
57+
readOnly
58+
/>
59+
);
60+
};
61+
5162
export const WithLayer = () => {
5263
return (
5364
<>

‎packages/styles/scss/components/text-input/_text-input.scss

+17-3
Original file line numberDiff line numberDiff line change
@@ -96,15 +96,19 @@
9696
width: 100%;
9797
}
9898

99-
.#{$prefix}--text-input__invalid-icon {
99+
.#{$prefix}--text-input__invalid-icon,
100+
.#{$prefix}--text-input__readonly-icon {
100101
position: absolute;
101102
// top/transform used to center invalid icon in IE11
102103
top: 50%;
103104
right: $spacing-05;
104-
fill: $support-error;
105105
transform: translateY(-50%);
106106
}
107107

108+
.#{$prefix}--text-input__invalid-icon {
109+
fill: $support-error;
110+
}
111+
108112
.#{$prefix}--text-input__invalid-icon--warning {
109113
fill: $support-warning;
110114
}
@@ -175,7 +179,8 @@
175179
}
176180

177181
.#{$prefix}--text-input--invalid,
178-
.#{$prefix}--text-input--warning {
182+
.#{$prefix}--text-input--warning,
183+
.#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
179184
padding-right: $spacing-08;
180185
}
181186

@@ -381,6 +386,15 @@
381386
flex-direction: column;
382387
}
383388

389+
//-----------------------------
390+
// Readonly
391+
//-----------------------------
392+
393+
.#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
394+
.#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
395+
background: transparent;
396+
}
397+
384398
// Windows HCM fix
385399
.#{$prefix}--text-input--password__visibility,
386400
// TODO: remove selector above

0 commit comments

Comments
 (0)
Please sign in to comment.