diff --git a/frontend/src/components/shared/Dropdown/Selectbox.tsx b/frontend/src/components/shared/Dropdown/Selectbox.tsx index b17fb52e8902..9933774aaf52 100644 --- a/frontend/src/components/shared/Dropdown/Selectbox.tsx +++ b/frontend/src/components/shared/Dropdown/Selectbox.tsx @@ -185,7 +185,11 @@ class Selectbox extends React.PureComponent { ControlContainer: { style: () => ({ - borderWidth: "1px", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + borderLeftWidth: "1px", + borderRightWidth: "1px", + borderTopWidth: "1px", + borderBottomWidth: "1px", }), }, @@ -197,7 +201,11 @@ class Selectbox extends React.PureComponent { ValueContainer: { style: () => ({ - padding: ".5rem", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + paddingRight: ".5rem", + paddingLeft: ".5rem", + paddingBottom: ".5rem", + paddingTop: ".5rem", }), }, diff --git a/frontend/src/components/widgets/DateInput/DateInput.tsx b/frontend/src/components/widgets/DateInput/DateInput.tsx index 28904fae357a..0caebfccb998 100644 --- a/frontend/src/components/widgets/DateInput/DateInput.tsx +++ b/frontend/src/components/widgets/DateInput/DateInput.tsx @@ -278,19 +278,21 @@ class DateInput extends React.PureComponent { overrides: { Root: { style: { - borderWidth: "1px", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + borderLeftWidth: "1px", + borderRightWidth: "1px", + borderTopWidth: "1px", + borderBottomWidth: "1px", }, }, - InputContainer: { - style: { - borderWidth: "1px", - }, - }, Input: { style: { - padding: ".5rem", - borderWidth: "1px", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + paddingRight: ".5rem", + paddingLeft: ".5rem", + paddingBottom: ".5rem", + paddingTop: ".5rem", }, }, }, diff --git a/frontend/src/components/widgets/Multiselect/Multiselect.tsx b/frontend/src/components/widgets/Multiselect/Multiselect.tsx index 43292f18a7e9..3a1cd4bf631a 100644 --- a/frontend/src/components/widgets/Multiselect/Multiselect.tsx +++ b/frontend/src/components/widgets/Multiselect/Multiselect.tsx @@ -230,7 +230,11 @@ class Multiselect extends React.PureComponent { ControlContainer: { style: () => ({ - borderWidth: "1px", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + borderLeftWidth: "1px", + borderRightWidth: "1px", + borderTopWidth: "1px", + borderBottomWidth: "1px", }), }, diff --git a/frontend/src/components/widgets/NumberInput/NumberInput.tsx b/frontend/src/components/widgets/NumberInput/NumberInput.tsx index 2fc2330233b7..fe089634609a 100644 --- a/frontend/src/components/widgets/NumberInput/NumberInput.tsx +++ b/frontend/src/components/widgets/NumberInput/NumberInput.tsx @@ -341,8 +341,12 @@ class NumberInput extends React.PureComponent { max: this.getMax(), }, style: { - padding: ".5rem", lineHeight: "1.5", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + paddingRight: ".5rem", + paddingLeft: ".5rem", + paddingBottom: ".5rem", + paddingTop: ".5rem", }, }, InputContainer: { @@ -355,7 +359,11 @@ class NumberInput extends React.PureComponent { style: () => ({ borderTopRightRadius: 0, borderBottomRightRadius: 0, - borderWidth: 0, + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + borderLeftWidth: 0, + borderRightWidth: 0, + borderTopWidth: 0, + borderBottomWidth: 0, }), }, }} diff --git a/frontend/src/components/widgets/TextArea/TextArea.tsx b/frontend/src/components/widgets/TextArea/TextArea.tsx index bfb559f763fd..ce8481c56ca0 100644 --- a/frontend/src/components/widgets/TextArea/TextArea.tsx +++ b/frontend/src/components/widgets/TextArea/TextArea.tsx @@ -208,7 +208,6 @@ class TextArea extends React.PureComponent { overrides={{ Input: { style: { - padding: "1rem", lineHeight: "1.4", height: height ? `${height}px` : "", minHeight: "95px", @@ -216,6 +215,11 @@ class TextArea extends React.PureComponent { "::placeholder": { opacity: "0.7", }, + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + paddingRight: "1rem", + paddingLeft: "1rem", + paddingBottom: "1rem", + paddingTop: "1rem", }, }, }} diff --git a/frontend/src/components/widgets/TextArea/styled-components.ts b/frontend/src/components/widgets/TextArea/styled-components.ts index 18a52b9613bc..dde52ad70eb3 100644 --- a/frontend/src/components/widgets/TextArea/styled-components.ts +++ b/frontend/src/components/widgets/TextArea/styled-components.ts @@ -1,7 +1,26 @@ +/** + * @license + * Copyright 2018-2022 Streamlit Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import styled from "@emotion/styled" export const StyledTextAreaContainer = styled.div({ div: { + // TODO: move this to the TextArea overwrites once Root is supported: + // https://github.com/uber/baseweb/issues/4264 borderWidth: "1px", }, }) diff --git a/frontend/src/components/widgets/TextInput/TextInput.tsx b/frontend/src/components/widgets/TextInput/TextInput.tsx index 672a604bc9f7..639b17ce7ef6 100644 --- a/frontend/src/components/widgets/TextInput/TextInput.tsx +++ b/frontend/src/components/widgets/TextInput/TextInput.tsx @@ -205,13 +205,21 @@ class TextInput extends React.PureComponent { "::placeholder": { opacity: "0.7", }, - padding: ".5rem", lineHeight: "1.4", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + paddingRight: ".5rem", + paddingLeft: ".5rem", + paddingBottom: ".5rem", + paddingTop: ".5rem", }, }, Root: { style: { - borderWidth: "1px", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + borderLeftWidth: "1px", + borderRightWidth: "1px", + borderTopWidth: "1px", + borderBottomWidth: "1px", }, }, }} diff --git a/frontend/src/components/widgets/TextInput/styled-components.ts b/frontend/src/components/widgets/TextInput/styled-components.ts index 484509d8bbde..f5b2f4e51c36 100644 --- a/frontend/src/components/widgets/TextInput/styled-components.ts +++ b/frontend/src/components/widgets/TextInput/styled-components.ts @@ -1,3 +1,20 @@ +/** + * @license + * Copyright 2018-2022 Streamlit Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import styled from "@emotion/styled" export interface StyledTextInputProps { diff --git a/frontend/src/components/widgets/TimeInput/TimeInput.tsx b/frontend/src/components/widgets/TimeInput/TimeInput.tsx index 298e463f0556..c2fb574f60be 100644 --- a/frontend/src/components/widgets/TimeInput/TimeInput.tsx +++ b/frontend/src/components/widgets/TimeInput/TimeInput.tsx @@ -146,7 +146,11 @@ class TimeInput extends PureComponent { overrides: { ControlContainer: { style: { - borderWidth: "1px", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + borderLeftWidth: "1px", + borderRightWidth: "1px", + borderTopWidth: "1px", + borderBottomWidth: "1px", }, }, @@ -158,7 +162,11 @@ class TimeInput extends PureComponent { ValueContainer: { style: () => ({ - padding: ".5rem", + // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings. + paddingRight: ".5rem", + paddingLeft: ".5rem", + paddingBottom: ".5rem", + paddingTop: ".5rem", }), },