diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
index d3df42ad4f..6599890f0f 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
@@ -81,10 +81,10 @@ const Styles = styled.div`
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
.explore-column {
display: flex;
- flex: 0 0 ${({ theme }) => theme.gridUnit * 80}px;
+ flex: 0 0 ${({ theme }) => theme.gridUnit * 95}px;
flex-direction: column;
padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
- max-width: ${({ theme }) => theme.gridUnit * 80}px;
+ max-width: ${({ theme }) => theme.gridUnit * 95}px;
max-height: 100%;
}
.data-source-selection {
diff --git a/superset-frontend/src/explore/components/OptionControls.tsx b/superset-frontend/src/explore/components/OptionControls.tsx
index 8e3121d824..8d157c876d 100644
--- a/superset-frontend/src/explore/components/OptionControls.tsx
+++ b/superset-frontend/src/explore/components/OptionControls.tsx
@@ -87,7 +87,7 @@ export const HeaderContainer = styled.div`
export const LabelsContainer = styled.div`
padding: ${({ theme }) => theme.gridUnit}px;
border: solid 1px ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: 3px;
+ border-radius: ${({ theme }) => theme.gridUnit}px;
`;
export const AddControlLabel = styled.div`
@@ -99,7 +99,7 @@ export const AddControlLabel = styled.div`
font-size: ${({ theme }) => theme.typography.sizes.s}px;
color: ${({ theme }) => theme.colors.grayscale.light1};
border: dashed 1px ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: 3px;
+ border-radius: ${({ theme }) => theme.gridUnit}px;
cursor: pointer;
:hover {
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index ccd0574f57..62e0826232 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -203,13 +203,6 @@ export default class SelectControl extends React.PureComponent {
return remainingOptions;
}
- createPlaceholder() {
- const optionsRemaining = this.optionsRemaining();
- const placeholder =
- this.props.placeholder || t('%s option(s)', optionsRemaining);
- return optionsRemaining ? placeholder : '';
- }
-
createMetaSelectAllOption() {
const option = { label: 'Select All', meta: true };
option[this.props.valueKey] = 'Select All';
@@ -235,9 +228,19 @@ export default class SelectControl extends React.PureComponent {
valueKey,
valueRenderer,
} = this.props;
- const placeholder = this.createPlaceholder();
+
+ const optionsRemaining = this.optionsRemaining();
+ const optionRemaingText = optionsRemaining
+ ? t('%s option(s)', optionsRemaining)
+ : '';
+ const placeholder = this.props.placeholder || optionRemaingText;
const isMulti = this.props.isMulti || this.props.multi;
+ let assistiveText;
+ if (isMulti && optionsRemaining && Array.isArray(value) && !!value.length) {
+ assistiveText = optionRemaingText;
+ }
+
const selectProps = {
autoFocus,
clearable,
@@ -257,6 +260,7 @@ export default class SelectControl extends React.PureComponent {
optionRenderer,
options: this.state.options,
placeholder,
+ assistiveText,
promptTextCreator,
selectRef: this.getSelectRef,
value,
diff --git a/superset-frontend/src/explore/components/controls/TextControl.tsx b/superset-frontend/src/explore/components/controls/TextControl.tsx
index 038d1698c8..ffc1f56d7c 100644
--- a/superset-frontend/src/explore/components/controls/TextControl.tsx
+++ b/superset-frontend/src/explore/components/controls/TextControl.tsx
@@ -107,7 +107,7 @@ export default class TextControl extends React.Component<
return (
-
+