Merge branch 'develop' into tim/FormProto

* develop:
  Rename snapshot folders (streamlit#2553)
  Update FAQ to indicate components can go in the sidebar (streamlit#2589)

docs/streamlit_faq.md

@@ -64,9 +64,19 @@ Below are some selected questions we've received about Streamlit Components. If
    - **Can't modify CSS**: A Component can’t modify the CSS that the rest of the Streamlit app uses, so you can't create something like `dark_mode`
    - **Can't add/remove elements**: A Component can’t add or remove other elements of a Streamlit app, so you couldn't make something like `remove_streamlit_hamburger_menu`
 
-3. **How do I build a Component that can be displayed in the sidebar?**
-
-   Currently, it is not possible to create a component in the sidebar, but we’re hoping to release that functionality in a future release.
+3. **How do I add a Component to the sidebar?**
+
+   You can add a component to st.sidebar using the `with` syntax. For example:
+   ```
+   with st.sidebar:
+       my_component(greeting="hello")
+   ```
+   In fact, you can add your component to _any_ [layout container](./api.html#lay-out-your-app) (eg st.beta_columns, st.beta_expander),  using the `with` syntax!
+   ```
+   col1, col2 = st.beta_columns(2)
+   with col2:
+       my_component(greeting="hello")
+   ```
 
 4. **My Component seems to be blinking/stuttering...how do I fix that?**
 

frontend/src/components/core/Block/Block.tsx

@@ -48,6 +48,7 @@ import {
 } from "autogen/proto"
 
 import React, { PureComponent, ReactNode, Suspense } from "react"
+import classnames from "classnames"
 import { AutoSizer } from "react-virtualized"
 // @ts-ignore
 import debounceRender from "react-debounce-render"
@@ -267,9 +268,12 @@ class Block extends PureComponent<Props> {
     return (
       <Maybe enable={enable} key={key}>
         <StyledElementContainer
+          data-stale={isStale}
           isStale={isStale}
           isHidden={isHidden}
-          className="element-container"
+          className={classnames("element-container", {
+            "stale-element": isStale,
+          })}
           style={{ width }}
         >
           <ErrorBoundary width={width}>

frontend/src/components/core/MainMenu/styled-components.ts

@@ -27,7 +27,7 @@ export const StyledRecordingIndicator = styled.div(({ theme }) => ({
 }))
 
 export const StyledMenuDivider = styled.div(({ theme }) => ({
-  borderTop: `1px solid ${theme.colors.lightGray}`,
+  borderTop: `1px solid ${theme.colors.lightestGray}`,
   margin: `${theme.spacing.sm} ${theme.spacing.none}`,
 }))
 
@@ -73,7 +73,7 @@ export const StyledMenuItem = styled.li<StyledMenuItemProps>(
         }
 
     const highlightedStyles = isHighlighted && {
-      backgroundColor: theme.colors.lightGray,
+      backgroundColor: theme.colors.lightestGray,
     }
 
     const recordingStyles = isRecording && {

frontend/src/components/elements/ExceptionElement/__snapshots__/ExceptionElement.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ExceptionElement Element renders without crashing 1`] = `"<div class=\\"stException\\"><div role=\\"alert\\" data-baseweb=\\"notification\\" class=\\"\\"><div class=\\"\\"><div class=\\"css-o2wnu3-StyledAlertContent e13vu3m50\\"><div class=\\"message\\"><span class=\\"css-7yzkdt-StyledMessageType e1m3hlzs1\\">RuntimeError</span>: This is an exception of type RuntimeError</div><div class=\\"css-1v39qrn-StyledStackTraceTitle e1m3hlzs2\\">Traceback:</div><pre class=\\"css-1we3vbf-StyledStackTrace e1m3hlzs3\\"><code><div class=\\"css-j3p1f6-StyledStackTraceRow e1m3hlzs0\\">step 1</div><div class=\\"css-j3p1f6-StyledStackTraceRow e1m3hlzs0\\">step 2</div><div class=\\"css-j3p1f6-StyledStackTraceRow e1m3hlzs0\\">step 3</div></code></pre></div></div></div></div>"`;
+exports[`ExceptionElement Element renders without crashing 1`] = `"<div class=\\"stException\\"><div role=\\"alert\\" data-baseweb=\\"notification\\" class=\\"\\"><div class=\\"\\"><div class=\\"css-k8skp-StyledAlertContent e13vu3m50\\"><div class=\\"message\\"><span class=\\"css-7yzkdt-StyledMessageType e1m3hlzs1\\">RuntimeError</span>: This is an exception of type RuntimeError</div><div class=\\"css-1v39qrn-StyledStackTraceTitle e1m3hlzs2\\">Traceback:</div><pre class=\\"css-1we3vbf-StyledStackTrace e1m3hlzs3\\"><code><div class=\\"css-j3p1f6-StyledStackTraceRow e1m3hlzs0\\">step 1</div><div class=\\"css-j3p1f6-StyledStackTraceRow e1m3hlzs0\\">step 2</div><div class=\\"css-j3p1f6-StyledStackTraceRow e1m3hlzs0\\">step 3</div></code></pre></div></div></div></div>"`;
 
 exports[`ExceptionElement Element should render markdown when it has messageIsMarkdown 1`] = `
 Object {

frontend/src/components/elements/Table/Table.tsx

@@ -48,7 +48,7 @@ function generateTableCell(
 
   switch (type) {
     case "corner":
-      return <td key={colIdx}>&nbsp;</td>
+      return <StyledTableCellHeader key={colIdx}>&nbsp;</StyledTableCellHeader>
     case "row-header":
       return (
         <StyledTableCellHeader key={colIdx} scope="row">

frontend/src/components/shared/AlertContainer/styled-components.ts

@@ -1,9 +1,27 @@
 import styled from "@emotion/styled"
 
 export const StyledAlertContent = styled.div(({ theme }) => ({
-  code: {
+  pre: {
     // Default color for syntax highlighting.
+    backgroundColor: "#ffffff44",
+
+    "pre, code": {
+      backgroundColor: theme.colors.transparent,
+      color: "inherit",
+    },
+  },
+
+  code: {
     backgroundColor: theme.colors.transparent,
+    padding: theme.spacing.none,
+  },
+
+  "pre, code": {
+    color: "inherit",
+  },
+
+  a: {
     color: "inherit",
+    textDecoration: "underline",
   },
 }))

frontend/src/components/shared/StreamlitMarkdown/styled-components.ts

@@ -7,22 +7,12 @@ export const StyledStreamlitMarkdown = styled.div(({ theme }) => ({
     color: theme.colors.blue,
   },
 
-  "ul, ol": {
-    paddingLeft: theme.spacing.lg,
-  },
-
   li: {
     margin: "0.2em 0 0.2em 1.2em",
     padding: "0 0 0 0.6em",
     fontSize: theme.fontSizes.md,
   },
 
-  "pre code": {
-    // Default color for syntax highlighting.
-    backgroundColor: "#ffffff44",
-    color: "inherit",
-  },
-
   tr: {
     borderTop: `1px solid ${theme.colors.lightGray}`,
     background: theme.colors.white,

frontend/src/components/shared/VirtualDropdown/styled-components.ts

@@ -15,4 +15,7 @@ export const ThemedStyledDropdownListItem = styled(StyledDropdownListItem, {
   alignItems: "center",
   paddingTop: theme.spacing.none,
   paddingBottom: theme.spacing.none,
+  "&:hover, &:active, &:focus": {
+    background: theme.colors.lightestGray,
+  },
 }))

frontend/src/components/widgets/Checkbox/Checkbox.tsx

@@ -115,6 +115,7 @@ class Checkbox extends React.PureComponent<Props, State> {
             Label: {
               style: {
                 color: colors.bodyText,
+                marginBottom: ".4rem",
               },
             },
           }}

frontend/src/components/widgets/FileUploader/styled-components.ts

@@ -57,6 +57,7 @@ export const StyledUploadedFiles = styled.div(({ theme }) => ({
 
 export const StyledUploadedFilesList = styled.ul(({ theme }) => ({
   listStyleType: "none",
+  marginBottom: 0,
 }))
 
 export const StyledUploadedFilesListItem = styled.li(({ theme }) => ({

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

@@ -160,6 +160,27 @@ class Multiselect extends React.PureComponent<Props, State> {
                 color: theme.colors.darkGray,
               },
             },
+            Tag: {
+              props: {
+                overrides: {
+                  Root: {
+                    style: {
+                      borderTopLeftRadius: theme.radii.md,
+                      borderTopRightRadius: theme.radii.md,
+                      borderBottomRightRadius: theme.radii.md,
+                      borderBottomLeftRadius: theme.radii.md,
+                      fontSize: theme.fontSizes.sm,
+                      paddingLeft: theme.spacing.md,
+                    },
+                  },
+                  Action: {
+                    style: {
+                      paddingLeft: theme.spacing.sm,
+                    },
+                  },
+                },
+              },
+            },
             MultiValue: {
               props: {
                 overrides: {

frontend/src/components/widgets/Slider/Slider.tsx

@@ -282,8 +282,10 @@ class Slider extends React.PureComponent<Props, State> {
               },
             },
             InnerTrack: {
-              style: ({ $disabled }: { $disabled: boolean }) =>
-                $disabled ? { background: colors.lightGray } : {},
+              style: ({ $disabled }: { $disabled: boolean }) => ({
+                height: "4px",
+                background: $disabled ? colors.lightGray : "initial",
+              }),
             },
             ThumbValue: this.renderThumbValue,
             TickBar: this.renderTickBar,