Fix widgets overwrites from short to long-hand props (#4935)

* Change short-hand props to long-hand * Remove text input snapshots * Add snapshots
streamlit · Jul 7, 2022 · ad4547f · ad4547f
1 parent 3809637
commit ad4547f
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 18 deletions.
diff --git 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<Props, State> {
 
             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<Props, State> {
 
             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
@@ -278,19 +278,21 @@ class DateInput extends React.PureComponent<Props, State> {
                 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
@@ -230,7 +230,11 @@ class Multiselect extends React.PureComponent<Props, State> {
 
               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
@@ -341,8 +341,12 @@ class NumberInput extends React.PureComponent<Props, State> {
                   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<Props, State> {
                 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
@@ -208,14 +208,18 @@ class TextArea extends React.PureComponent<Props, State> {
             overrides={{
               Input: {
                 style: {
-                  padding: "1rem",
                   lineHeight: "1.4",
                   height: height ? `${height}px` : "",
                   minHeight: "95px",
                   resize: "vertical",
                   "::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
@@ -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
@@ -205,13 +205,21 @@ class TextInput extends React.PureComponent<Props, State> {
                 "::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
@@ -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
@@ -146,7 +146,11 @@ class TimeInput extends PureComponent<Props, State> {
           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<Props, State> {
 
             ValueContainer: {
               style: () => ({
-                padding: ".5rem",
+                // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
+                paddingRight: ".5rem",
+                paddingLeft: ".5rem",
+                paddingBottom: ".5rem",
+                paddingTop: ".5rem",
               }),
             },