@instructure/ui-text-input 10.7.0 → 10.7.1-snapshot-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/es/TextInput/index.js +6 -24
- package/es/TextInput/styles.js +14 -28
- package/lib/TextInput/index.js +6 -24
- package/lib/TextInput/styles.js +14 -28
- package/package.json +16 -16
- package/src/TextInput/README.md +7 -6
- package/src/TextInput/index.tsx +15 -40
- package/src/TextInput/props.ts +2 -5
- package/src/TextInput/styles.ts +12 -30
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/TextInput/index.d.ts +1 -2
- package/types/TextInput/index.d.ts.map +1 -1
- package/types/TextInput/props.d.ts +2 -3
- package/types/TextInput/props.d.ts.map +1 -1
- package/types/TextInput/styles.d.ts.map +1 -1
package/src/TextInput/styles.ts
CHANGED
|
@@ -49,8 +49,8 @@ const generateStyle = (
|
|
|
49
49
|
disabled,
|
|
50
50
|
invalid,
|
|
51
51
|
focused,
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
afterElementHasWidth,
|
|
53
|
+
beforeElementExists
|
|
54
54
|
} = state
|
|
55
55
|
|
|
56
56
|
const sizeVariants = {
|
|
@@ -103,15 +103,14 @@ const generateStyle = (
|
|
|
103
103
|
|
|
104
104
|
const inputStyle = {
|
|
105
105
|
all: 'initial',
|
|
106
|
-
|
|
107
106
|
'&::-ms-clear': {
|
|
108
107
|
display: 'none'
|
|
109
108
|
},
|
|
109
|
+
width: '100%',
|
|
110
110
|
WebkitFontSmoothing: 'antialiased',
|
|
111
111
|
MozOsxFontSmoothing: 'grayscale',
|
|
112
112
|
appearance: 'none',
|
|
113
113
|
margin: 0,
|
|
114
|
-
width: '100%',
|
|
115
114
|
display: 'block',
|
|
116
115
|
boxSizing: 'border-box',
|
|
117
116
|
outline: 'none',
|
|
@@ -151,11 +150,6 @@ const generateStyle = (
|
|
|
151
150
|
flexDirection: 'row'
|
|
152
151
|
}
|
|
153
152
|
|
|
154
|
-
const flexItemBase = {
|
|
155
|
-
...viewBase,
|
|
156
|
-
flexShrink: 0
|
|
157
|
-
}
|
|
158
|
-
|
|
159
153
|
return {
|
|
160
154
|
requiredInvalid: {
|
|
161
155
|
color: componentTheme.requiredInvalidColor
|
|
@@ -198,30 +192,17 @@ const generateStyle = (
|
|
|
198
192
|
},
|
|
199
193
|
layout: {
|
|
200
194
|
label: 'textInput__layout',
|
|
201
|
-
...
|
|
202
|
-
|
|
203
|
-
},
|
|
204
|
-
beforeElement: {
|
|
205
|
-
display: 'inline-flex',
|
|
195
|
+
...viewBase,
|
|
196
|
+
display: 'flex',
|
|
206
197
|
alignItems: 'center',
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
// it needs the padding on render
|
|
212
|
-
...(beforeElementHasWidth === false && {
|
|
213
|
-
paddingInlineStart: 0
|
|
214
|
-
})
|
|
215
|
-
},
|
|
216
|
-
innerWrapper: {
|
|
217
|
-
label: 'textInput__innerWrapper',
|
|
218
|
-
...flexItemBase,
|
|
219
|
-
minWidth: '0.0625rem',
|
|
220
|
-
flexShrink: 1,
|
|
221
|
-
flexGrow: 1
|
|
198
|
+
justifyContent: 'flex-start',
|
|
199
|
+
flexDirection: 'row',
|
|
200
|
+
...(!shouldNotWrap && { flexWrap: 'wrap' }),
|
|
201
|
+
...(beforeElementExists && { paddingInlineStart: componentTheme.padding })
|
|
222
202
|
},
|
|
223
203
|
inputLayout: {
|
|
224
204
|
label: 'textInput__inputLayout',
|
|
205
|
+
flexGrow: 1,
|
|
225
206
|
...flexBase
|
|
226
207
|
},
|
|
227
208
|
afterElement: {
|
|
@@ -231,7 +212,8 @@ const generateStyle = (
|
|
|
231
212
|
marginTop: '-1px',
|
|
232
213
|
marginBottom: '-1px',
|
|
233
214
|
label: 'textInput__afterElement',
|
|
234
|
-
...
|
|
215
|
+
...viewBase,
|
|
216
|
+
flexShrink: 0,
|
|
235
217
|
paddingInlineEnd: componentTheme.padding,
|
|
236
218
|
// we only override the padding once the width is calculated,
|
|
237
219
|
// it needs the padding on render
|