Skip to content

Commit ad4547f

Browse files
lukasmasuchlukasmasuch
authored
Fix widgets overwrites from short to long-hand props (#4935)
* Change short-hand props to long-hand * Remove text input snapshots * Add snapshots
1 parent 3809637 commit ad4547f

File tree

9 files changed

+96
-18
lines changed

9 files changed

+96
-18
lines changed

‎frontend/src/components/shared/Dropdown/Selectbox.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,11 @@ class Selectbox extends React.PureComponent<Props, State> {
185185

186186
ControlContainer: {
187187
style: () => ({
188-
borderWidth: "1px",
188+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
189+
borderLeftWidth: "1px",
190+
borderRightWidth: "1px",
191+
borderTopWidth: "1px",
192+
borderBottomWidth: "1px",
189193
}),
190194
},
191195

@@ -197,7 +201,11 @@ class Selectbox extends React.PureComponent<Props, State> {
197201

198202
ValueContainer: {
199203
style: () => ({
200-
padding: ".5rem",
204+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
205+
paddingRight: ".5rem",
206+
paddingLeft: ".5rem",
207+
paddingBottom: ".5rem",
208+
paddingTop: ".5rem",
201209
}),
202210
},
203211

‎frontend/src/components/widgets/DateInput/DateInput.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -278,19 +278,21 @@ class DateInput extends React.PureComponent<Props, State> {
278278
overrides: {
279279
Root: {
280280
style: {
281-
borderWidth: "1px",
281+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
282+
borderLeftWidth: "1px",
283+
borderRightWidth: "1px",
284+
borderTopWidth: "1px",
285+
borderBottomWidth: "1px",
282286
},
283287
},
284288

285-
InputContainer: {
286-
style: {
287-
borderWidth: "1px",
288-
},
289-
},
290289
Input: {
291290
style: {
292-
padding: ".5rem",
293-
borderWidth: "1px",
291+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
292+
paddingRight: ".5rem",
293+
paddingLeft: ".5rem",
294+
paddingBottom: ".5rem",
295+
paddingTop: ".5rem",
294296
},
295297
},
296298
},

‎frontend/src/components/widgets/Multiselect/Multiselect.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,11 @@ class Multiselect extends React.PureComponent<Props, State> {
230230

231231
ControlContainer: {
232232
style: () => ({
233-
borderWidth: "1px",
233+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
234+
borderLeftWidth: "1px",
235+
borderRightWidth: "1px",
236+
borderTopWidth: "1px",
237+
borderBottomWidth: "1px",
234238
}),
235239
},
236240

‎frontend/src/components/widgets/NumberInput/NumberInput.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -341,8 +341,12 @@ class NumberInput extends React.PureComponent<Props, State> {
341341
max: this.getMax(),
342342
},
343343
style: {
344-
padding: ".5rem",
345344
lineHeight: "1.5",
345+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
346+
paddingRight: ".5rem",
347+
paddingLeft: ".5rem",
348+
paddingBottom: ".5rem",
349+
paddingTop: ".5rem",
346350
},
347351
},
348352
InputContainer: {
@@ -355,7 +359,11 @@ class NumberInput extends React.PureComponent<Props, State> {
355359
style: () => ({
356360
borderTopRightRadius: 0,
357361
borderBottomRightRadius: 0,
358-
borderWidth: 0,
362+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
363+
borderLeftWidth: 0,
364+
borderRightWidth: 0,
365+
borderTopWidth: 0,
366+
borderBottomWidth: 0,
359367
}),
360368
},
361369
}}

‎frontend/src/components/widgets/TextArea/TextArea.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,14 +208,18 @@ class TextArea extends React.PureComponent<Props, State> {
208208
overrides={{
209209
Input: {
210210
style: {
211-
padding: "1rem",
212211
lineHeight: "1.4",
213212
height: height ? `${height}px` : "",
214213
minHeight: "95px",
215214
resize: "vertical",
216215
"::placeholder": {
217216
opacity: "0.7",
218217
},
218+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
219+
paddingRight: "1rem",
220+
paddingLeft: "1rem",
221+
paddingBottom: "1rem",
222+
paddingTop: "1rem",
219223
},
220224
},
221225
}}

‎frontend/src/components/widgets/TextArea/styled-components.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,26 @@
1+
/**
2+
* @license
3+
* Copyright 2018-2022 Streamlit Inc.
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
118
import styled from "@emotion/styled"
219

320
export const StyledTextAreaContainer = styled.div({
421
div: {
22+
// TODO: move this to the TextArea overwrites once Root is supported:
23+
// https://github.com/uber/baseweb/issues/4264
524
borderWidth: "1px",
625
},
726
})

‎frontend/src/components/widgets/TextInput/TextInput.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,13 +205,21 @@ class TextInput extends React.PureComponent<Props, State> {
205205
"::placeholder": {
206206
opacity: "0.7",
207207
},
208-
padding: ".5rem",
209208
lineHeight: "1.4",
209+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
210+
paddingRight: ".5rem",
211+
paddingLeft: ".5rem",
212+
paddingBottom: ".5rem",
213+
paddingTop: ".5rem",
210214
},
211215
},
212216
Root: {
213217
style: {
214-
borderWidth: "1px",
218+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
219+
borderLeftWidth: "1px",
220+
borderRightWidth: "1px",
221+
borderTopWidth: "1px",
222+
borderBottomWidth: "1px",
215223
},
216224
},
217225
}}

‎frontend/src/components/widgets/TextInput/styled-components.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
/**
2+
* @license
3+
* Copyright 2018-2022 Streamlit Inc.
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
118
import styled from "@emotion/styled"
219

320
export interface StyledTextInputProps {

‎frontend/src/components/widgets/TimeInput/TimeInput.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,11 @@ class TimeInput extends PureComponent<Props, State> {
146146
overrides: {
147147
ControlContainer: {
148148
style: {
149-
borderWidth: "1px",
149+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
150+
borderLeftWidth: "1px",
151+
borderRightWidth: "1px",
152+
borderTopWidth: "1px",
153+
borderBottomWidth: "1px",
150154
},
151155
},
152156

@@ -158,7 +162,11 @@ class TimeInput extends PureComponent<Props, State> {
158162

159163
ValueContainer: {
160164
style: () => ({
161-
padding: ".5rem",
165+
// Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
166+
paddingRight: ".5rem",
167+
paddingLeft: ".5rem",
168+
paddingBottom: ".5rem",
169+
paddingTop: ".5rem",
162170
}),
163171
},
164172

0 commit comments

Comments
 (0)