Merge branch 'fix/widget-intent-styles' into 'release'

Widget Styles
- Fix Dropdown widget styles.
- Change Input widget to TextArea widget when type === Text and number of rows is more than 1
- Fix radio group widget styles
- Fix checkbox widget styles

See merge request theappsmith/internal-tools-client!283

app/client/src/api/Api.tsx

@@ -43,7 +43,9 @@ axiosInstance.interceptors.response.use(
   },
   function(error: any) {
     if (error.code === "ECONNABORTED") {
-      console.log("CONNECTION TIMEOUT");
+      return Promise.reject({
+        message: "Please check your internet connection",
+      });
     }
     if (error.config.url.match(executeActionRegex)) {
       return makeExecuteActionResponse(error.response);

app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { Checkbox, Classes } from "@blueprintjs/core";
+import { BlueprintControlTransform } from "constants/DefaultTheme";
 
 const CheckboxContainer = styled.div`
   && {
@@ -14,6 +15,7 @@ const CheckboxContainer = styled.div`
       margin: 0;
     }
   }
+  ${BlueprintControlTransform}
 `;
 class CheckboxComponent extends React.Component<CheckboxComponentProps> {
   render() {

app/client/src/components/designSystems/blueprint/DropdownComponent.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { ReactNode } from "react";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import {
   MenuItem,
@@ -6,13 +6,26 @@ import {
   ControlGroup,
   Label,
   Classes,
+  Checkbox,
+  Icon,
 } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
 import { SelectionType, DropdownOption } from "widgets/DropdownWidget";
-import { Select, MultiSelect, IItemRendererProps } from "@blueprintjs/select";
+import {
+  Select,
+  MultiSelect,
+  IItemRendererProps,
+  Classes as MultiSelectClasses,
+} from "@blueprintjs/select";
 import _ from "lodash";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
 import "../../../../node_modules/@blueprintjs/select/lib/css/blueprint-select.css";
-import styled, { labelStyle } from "constants/DefaultTheme";
+import styled, {
+  labelStyle,
+  BlueprintCSSTransform,
+  BlueprintInputTransform,
+} from "constants/DefaultTheme";
+import { Colors } from "constants/Colors";
 
 const SingleDropDown = Select.ofType<DropdownOption>();
 const MultiDropDown = MultiSelect.ofType<DropdownOption>();
@@ -23,46 +36,164 @@ const StyledSingleDropDown = styled(SingleDropDown)`
   }
   span {
     width: 100%;
+    position: relative;
   }
-  .bp3-button {
+  .${Classes.BUTTON} {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: space-between;
-    ${labelStyle}
   }
-  .bp3-button-text {
+  .${Classes.BUTTON_TEXT} {
     text-overflow: ellipsis;
-    text-align: center;
+    text-align: left;
     overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
   }
-  .bp3-icon {
+  && {
-    width: fit-content;
+    .${Classes.ICON} {
+      width: fit-content;
+      color: ${Colors.SLATE_GRAY};
+    }
   }
 `;
 
-const StyledControlGroup = styled(ControlGroup)`
+const StyledControlGroup = styled(ControlGroup)<{ hasLabel: boolean }>`
-  &&& {
+  &&& > {
     label {
       ${labelStyle}
-      margin: 0 ${WIDGET_PADDING * 2}px 0 0;
+      margin: 7px ${WIDGET_PADDING * 2}px 0 0;
-      align-self: center;
+      align-self: flex-start;
       flex: 0 1 30%;
+      max-width: calc(30% - ${WIDGET_PADDING}px);
       text-align: right;
     }
+    span {
+      max-width: ${props =>
+        props.hasLabel ? `calc(70% - ${WIDGET_PADDING}px)` : "100%"};
+    }
   }
 `;
 
 const DropdownContainer = styled.div`
-  textalign: center;
+  ${BlueprintCSSTransform}
+  &&&& .${Classes.MENU_ITEM} {
+    border-radius: ${props => props.theme.radii[1]}px;
+    &:hover{
+      background: ${Colors.POLAR};
+    }
+  &.${Classes.ACTIVE} {
+    background: ${Colors.POLAR};
+    color: ${props => props.theme.colors.textDefault};
+    position:relative;
+    &.single-select{
+      &:before{
+        left: 0;
+        top: -2px;
+        position: absolute;
+        content: "";
+        background: ${props => props.theme.colors.primary};
+        border-radius: 4px 0 0 4px;
+        width: 4px;
+        height:100%;
+      }
+    }
+  }
+}
+  && .${Classes.POPOVER} {
+    width: 100%;
+    border-radius: ${props => props.theme.radii[1]}px;
+    box-shadow:  0px 2px 4px rgba(67, 70, 74, 0.14);
+    padding: ${props => props.theme.spaces[3]}px;
+    background:white;   
+  }
+
+  && .${Classes.POPOVER_WRAPPER} {
+    position:relative;
+    .${Classes.OVERLAY} {
+      position: absolute;
+      .${Classes.TRANSITION_CONTAINER} {
+        width: 100%;
+      }
+    }
+  }
+  && .${Classes.MENU} {
+    max-width: 100%;
+    max-height: auto;
+  }
+  
   width: 100%;
 `;
 
 const StyledMultiDropDown = styled(MultiDropDown)`
-  .bp3-multi-select {
+  div {
+    flex: 1 1 auto;
+  }
+  .${MultiSelectClasses.MULTISELECT} {
+    position: relative;
     min-width: 0;
   }
+  && {
+    ${BlueprintInputTransform}
+    .${Classes.TAG_INPUT} {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+      .${Classes.TAG_INPUT_VALUES} {
+        margin-top: 0;
+        overflow: hidden;
+        padding: 2px 0;
+      }
+      .${Classes.TAG} {
+        background: none;
+        border: 1px solid #D0D7DD;
+        border-radius: 2px;
+        margin-bottom: 0;
+        max-width: 100px;
+      }
+      & > .${Classes.ICON} {
+        align-self: center;
+        margin-right: 10px;
+        color: ${Colors.SLATE_GRAY};
+      }
+      .${Classes.INPUT_GHOST} {
+        width: 0px;
+        flex: 0 0 auto;
+      }
+    }
+  }
+  &&&& {
+    .${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} {
+      background: white;
+      box-shadow: none;
+      border-width: 2px;
+      border-style: solid;
+      border-color: ${Colors.GEYSER};
+      &::before {
+        width: auto;
+        height: 1em;
+      }
+    }
+    .${Classes.CONTROL} input:checked ~ .${Classes.CONTROL_INDICATOR} {
+      background: ${props => props.theme.colors.primary};
+      color: ${props => props.theme.colors.textOnDarkBG};
+      border-color: ${props => props.theme.colors.primary};
+    }
+  }
 `;
+
+const StyledCheckbox = styled(Checkbox)`
+  &&.${Classes.CHECKBOX}.${Classes.CONTROL} {
+    margin: 0;
+  }
+`;
+
 class DropDownComponent extends React.Component<DropDownComponentProps> {
   render() {
     const selectedItems = this.props.selectedIndexArr
@@ -72,7 +203,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
       : [];
     return (
       <DropdownContainer>
-        <StyledControlGroup fill>
+        <StyledControlGroup fill hasLabel={!!this.props.label}>
           {this.props.label && (
             <Label
               className={
@@ -86,15 +217,18 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
           )}
           {this.props.selectionType === "SINGLE_SELECT" ? (
             <StyledSingleDropDown
-              className={this.props.isLoading ? "bp3-skeleton" : ""}
+              className={this.props.isLoading ? Classes.SKELETON : ""}
               items={this.props.options}
               filterable={false}
-              itemRenderer={this.renderItem}
+              itemRenderer={this.renderSingleSelectItem}
               onItemSelect={this.onItemSelect}
+              popoverProps={{
+                minimal: true,
+                usePortal: false,
+              }}
             >
               <Button
-                intent={"primary"}
+                rightIcon={IconNames.CHEVRON_DOWN}
-                rightIcon="chevron-down"
                 text={
                   !_.isEmpty(this.props.options)
                     ? this.props.options[this.props.selectedIndex].label
@@ -104,15 +238,23 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
             </StyledSingleDropDown>
           ) : (
             <StyledMultiDropDown
-              className={this.props.isLoading ? "bp3-skeleton" : ""}
+              className={this.props.isLoading ? Classes.SKELETON : ""}
               items={this.props.options}
-              fill={true}
               placeholder={this.props.placeholder}
               tagRenderer={this.renderTag}
-              itemRenderer={this.renderItem}
+              itemRenderer={this.renderMultiSelectItem}
               selectedItems={selectedItems}
-              tagInputProps={{ onRemove: this.onItemRemoved }}
+              tagInputProps={{
+                onRemove: this.onItemRemoved,
+                tagProps: { minimal: true },
+                inputProps: { readOnly: true },
+                rightElement: <Icon icon={IconNames.CHEVRON_DOWN} />,
+              }}
               onItemSelect={this.onItemSelect}
+              popoverProps={{
+                minimal: true,
+                usePortal: false,
+              }}
             ></StyledMultiDropDown>
           )}
         </StyledControlGroup>
@@ -147,21 +289,52 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
     }
   };
 
-  renderItem = (option: DropdownOption, itemProps: IItemRendererProps) => {
+  renderSingleSelectItem = (
+    option: DropdownOption,
+    itemProps: IItemRendererProps,
+  ) => {
     if (!itemProps.modifiers.matchesPredicate) {
       return null;
     }
     const isSelected: boolean = this.isOptionSelected(option);
     return (
       <MenuItem
-        icon={isSelected ? "tick" : "blank"}
+        className="single-select"
-        active={itemProps.modifiers.active}
+        active={isSelected}
         key={option.value}
         onClick={itemProps.handleClick}
         text={option.label}
       />
     );
   };
+
+  renderMultiSelectItem = (
+    option: DropdownOption,
+    itemProps: IItemRendererProps,
+  ) => {
+    if (!itemProps.modifiers.matchesPredicate) {
+      return null;
+    }
+    const isSelected: boolean = this.isOptionSelected(option);
+    const content: ReactNode = (
+      <React.Fragment>
+        <StyledCheckbox
+          checked={isSelected}
+          label={option.label}
+          alignIndicator="left"
+          onChange={(e: any) => itemProps.handleClick(e)}
+        />
+      </React.Fragment>
+    );
+    return (
+      <MenuItem
+        className="multi-select"
+        active={isSelected}
+        key={option.value}
+        text={content}
+      />
+    );
+  };
 }
 
 export interface DropDownComponentProps extends ComponentProps {

app/client/src/components/designSystems/blueprint/InputComponent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { getBorderCSSShorthand, labelStyle } from "constants/DefaultTheme";
+import { labelStyle } from "constants/DefaultTheme";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import {
   Intent,
@@ -12,9 +12,11 @@ import {
   Text,
   Classes,
   ControlGroup,
+  TextArea,
 } from "@blueprintjs/core";
 import { InputType } from "widgets/InputWidget";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
+import { Colors } from "constants/Colors";
 /**
  * All design system component specific logic goes here.
  * Ex. Blueprint has a sperarate numeric input and text input so switching between them goes here
@@ -22,30 +24,35 @@ import { WIDGET_PADDING } from "constants/WidgetConstants";
  * All generic logic like max characters for phone numbers should be 10, should go in the widget
  */
 
-const InputComponentWrapper = styled(ControlGroup)`
+const InputComponentWrapper = styled(ControlGroup)<{ isTextArea: boolean }>`
   &&&& {
-    .bp3-input {
+    .${Classes.INPUT} {
       box-shadow: none;
-      border: ${props => getBorderCSSShorthand(props.theme.borders[2])};
+      border: 1px solid ${Colors.GEYSER_LIGHT};
-      border-radius: 0;
+      border-radius: ${props => props.theme.radii[1]}px;
+      height: ${props => (props.isTextArea ? "100%" : "inherit")};
+      &:active {
+        border: 1px solid ${Colors.HIT_GRAY};
+      }
+      &:focus {
+        border: 3px solid ${Colors.MYSTIC};
+      }
     }
-    .bp3-input:focus {
+    .${Classes.INPUT_GROUP} {
-      border: ${props => getBorderCSSShorthand(props.theme.borders[2])};
-      box-shadow: none;
-    }
-    div.bp3-input-group {
       display: block;
       margin: 0;
     }
-    .bp3-control-group {
+    .${Classes.CONTROL_GROUP} {
       justify-content: flex-start;
     }
+    height: ${props => (props.isTextArea ? "100%" : "auto")};
     align-items: center;
     label {
       ${labelStyle}
       flex: 0 1 30%;
-      margin: 0 ${WIDGET_PADDING * 2}px 0 0;
+      margin: 7px ${WIDGET_PADDING * 2}px 0 0;
       text-align: right;
+      align-self: flex-start;
     }
   }
 `;
@@ -59,7 +66,11 @@ class InputComponent extends React.Component<
     this.state = { showPassword: false };
   }
 
-  onTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  onTextChange = (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
     this.props.onValueChange(event.target.value);
   };
 
@@ -100,10 +111,74 @@ class InputComponent extends React.Component<
         return "text";
     }
   }
+  private numericInputComponent = () => (
+    <NumericInput
+      placeholder={this.props.placeholder}
+      min={this.props.minNum}
+      max={this.props.maxNum}
+      maxLength={this.props.maxChars}
+      disabled={this.props.disabled}
+      intent={this.props.intent}
+      className={this.props.isLoading ? "bp3-skeleton" : Classes.FILL}
+      defaultValue={this.props.defaultValue}
+      onValueChange={this.onNumberChange}
+      leftIcon={
+        this.props.inputType === "PHONE_NUMBER" ? "phone" : this.props.leftIcon
+      }
+      type={this.props.inputType === "PHONE_NUMBER" ? "tel" : undefined}
+      allowNumericCharactersOnly
+      stepSize={this.props.stepSize}
+    />
+  );
+  private textAreaInputComponent = (
+    <TextArea
+      placeholder={this.props.placeholder}
+      disabled={this.props.disabled}
+      maxLength={this.props.maxChars}
+      intent={this.props.intent}
+      onChange={this.onTextChange}
+      defaultValue={this.props.defaultValue}
+      className={this.props.isLoading ? "bp3-skeleton" : ""}
+      growVertically={false}
+    />
+  );
+
+  private textInputComponent = (isTextArea: boolean) =>
+    isTextArea ? (
+      this.textAreaInputComponent
+    ) : (
+      <InputGroup
+        placeholder={this.props.placeholder}
+        disabled={this.props.disabled}
+        maxLength={this.props.maxChars}
+        intent={this.props.intent}
+        onChange={this.onTextChange}
+        defaultValue={this.props.defaultValue}
+        className={this.props.isLoading ? "bp3-skeleton" : ""}
+        rightElement={
+          this.props.inputType === "PASSWORD" ? (
+            <Button
+              icon={"lock"}
+              onClick={() => {
+                this.setState({ showPassword: !this.state.showPassword });
+              }}
+            />
+          ) : (
+            undefined
+          )
+        }
+        type={this.getType(this.props.inputType)}
+        leftIcon={this.getIcon(this.props.inputType)}
+      />
+    );
+  private renderInputComponent = (inputType: InputType, isTextArea: boolean) =>
+    this.isNumberInputType(inputType)
+      ? this.numericInputComponent()
+      : this.textInputComponent(isTextArea);
 
   render() {
     return (
-      <InputComponentWrapper fill>
+      <InputComponentWrapper fill isTextArea={this.props.isTextArea}>
         {this.props.label && (
           <Label
             className={
@@ -116,51 +191,7 @@ class InputComponent extends React.Component<
           </Label>
         )}
 
-        {this.isNumberInputType(this.props.inputType) ? (
+        {this.renderInputComponent(this.props.inputType, this.props.isTextArea)}
-          <NumericInput
-            placeholder={this.props.placeholder}
-            min={this.props.minNum}
-            max={this.props.maxNum}
-            maxLength={this.props.maxChars}
-            disabled={this.props.disabled}
-            intent={this.props.intent}
-            className={this.props.isLoading ? "bp3-skeleton" : Classes.FILL}
-            defaultValue={this.props.defaultValue}
-            onValueChange={this.onNumberChange}
-            leftIcon={
-              this.props.inputType === "PHONE_NUMBER"
-                ? "phone"
-                : this.props.leftIcon
-            }
-            type={this.props.inputType === "PHONE_NUMBER" ? "tel" : undefined}
-            allowNumericCharactersOnly
-            stepSize={this.props.stepSize}
-          />
-        ) : (
-          <InputGroup
-            placeholder={this.props.placeholder}
-            disabled={this.props.disabled}
-            maxLength={this.props.maxChars}
-            intent={this.props.intent}
-            onChange={this.onTextChange}
-            defaultValue={this.props.defaultValue}
-            className={this.props.isLoading ? "bp3-skeleton" : ""}
-            rightElement={
-              this.props.inputType === "PASSWORD" ? (
-                <Button
-                  icon={"lock"}
-                  onClick={() => {
-                    this.setState({ showPassword: !this.state.showPassword });
-                  }}
-                />
-              ) : (
-                undefined
-              )
-            }
-            type={this.getType(this.props.inputType)}
-            leftIcon={this.getIcon(this.props.inputType)}
-          />
-        )}
         {this.props.errorMessage && <Text>{this.props.errorMessage}</Text>}
       </InputComponentWrapper>
     );
@@ -188,6 +219,7 @@ export interface InputComponentProps extends ComponentProps {
   stepSize?: number;
   placeholder?: string;
   isLoading: boolean;
+  isTextArea: boolean;
 }
 
 export default InputComponent;

app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx

@@ -10,7 +10,7 @@ import {
   Classes,
 } from "@blueprintjs/core";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
-import { labelStyle } from "constants/DefaultTheme";
+import { BlueprintControlTransform, labelStyle } from "constants/DefaultTheme";
 
 const StyledControlGroup = styled(ControlGroup)`
   &&& {
@@ -24,7 +24,9 @@ const StyledControlGroup = styled(ControlGroup)`
   }
 `;
 
-const StyledRadioGroup = styled(RadioGroup)``;
+const StyledRadioGroup = styled(RadioGroup)`
+  ${BlueprintControlTransform};
+`;
 
 class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
   render() {

app/client/src/constants/DefaultTheme.tsx

@@ -3,6 +3,7 @@ import { Colors, Color } from "./Colors";
 import * as FontFamilies from "./Fonts";
 import tinycolor from "tinycolor2";
 import _ from "lodash";
+import { Classes } from "@blueprintjs/core";
 
 export type FontFamily = typeof FontFamilies[keyof typeof FontFamilies];
 
@@ -25,6 +26,66 @@ export const IntentColors: Record<string, Color> = {
 
 export type Intent = typeof IntentColors[keyof typeof IntentColors];
 
+export const BlueprintControlTransform = css`
+  && {
+    .${Classes.CONTROL} {
+      & input:checked ~ .${Classes.CONTROL_INDICATOR} {
+        background: ${props => props.theme.colors.primary};
+        box-shadow: none;
+        border: 2px solid ${props => props.theme.colors.primary};
+      }
+      & input:not(:disabled):active ~ .${Classes.CONTROL_INDICATOR} {
+        box-shadow: none;
+        background: none;
+        border: 2px solid ${Colors.SLATE_GRAY};
+      }
+      & input:not(:disabled):active:checked ~ .${Classes.CONTROL_INDICATOR} {
+        box-shadow: none;
+        background: none;
+        border: 2px solid ${Colors.SLATE_GRAY};
+      }
+      &:hover .${Classes.CONTROL_INDICATOR} {
+        box-shadow: none;
+        background: none;
+        border: 2px solid ${Colors.SLATE_GRAY};
+      }
+    }
+    .${Classes.CONTROL_INDICATOR} {
+      box-shadow: none;
+      background: none;
+      border: 2px solid ${Colors.SLATE_GRAY};
+      &::before {
+        position: absolute;
+        left: -2px;
+        top: -2px;
+      }
+    }
+  }
+`;
+
+export const BlueprintCSSTransform = css`
+  &&&& {
+    .${Classes.BUTTON} {
+      box-shadow: none;
+      border-radius: 4px;
+      background: none;
+      border: 1px solid ${Colors.GEYSER};
+    }
+    .${Classes.INTENT_PRIMARY} {
+      background: ${IntentColors.primary};
+    }
+    .${Classes.INTENT_SUCCESS} {
+      background: ${IntentColors.success};
+    }
+    .${Classes.INTENT_DANGER} {
+      background: ${IntentColors.danger};
+    }
+    .${Classes.INTENT_WARNING} {
+      background: ${IntentColors.warning};
+    }
+  }
+`;
+
 export const darken = (color: Color, intensity: number) => {
   return new tinycolor(color).darken(intensity).toString();
 };
@@ -37,7 +98,7 @@ export const darkenActive = (color: Color) => {
   return darken(color, 16);
 };
 
-const getHoverAndActiveStyles = (color: Color, filled = true) => {
+const getButtonHoverAndActiveStyles = (color: Color, filled = true) => {
   return css`
     background: ${color};
     border-color: ${filled ? color : "auto"};
@@ -56,7 +117,7 @@ const getHoverAndActiveStyles = (color: Color, filled = true) => {
 };
 
 export const BlueprintButtonIntentsCSS = css`
-  &&.bp3-button {
+  &&.${Classes.BUTTON} {
     box-shadow: none;
     display: flex;
     border-width: 1px;
@@ -73,56 +134,70 @@ export const BlueprintButtonIntentsCSS = css`
     }
     background: ${Colors.WHITE};
   }
-  &&&.bp3-button.bp3-intent-primary:not(.bp3-minimal) {
+  &&&.${Classes.BUTTON}.${Classes.INTENT_PRIMARY}:not(.${Classes.MINIMAL}) {
     background: ${IntentColors.primary};
-    ${getHoverAndActiveStyles(IntentColors.primary)}
+    ${getButtonHoverAndActiveStyles(IntentColors.primary)}
   }
-  &&&.bp3-button.bp3-intent-secondary:not(.bp3-minimal) {
+  &&&.${Classes.BUTTON}.bp3-intent-secondary:not(.${Classes.MINIMAL}) {
     background: ${IntentColors.secondary};
-    ${getHoverAndActiveStyles(IntentColors.secondary)}
+    ${getButtonHoverAndActiveStyles(IntentColors.secondary)}
   }
-  &&&.bp3-button.bp3-intent-danger:not(.bp3-minimal) {
+  &&&.${Classes.BUTTON}.${Classes.INTENT_DANGER}:not(.${Classes.MINIMAL}) {
     background: ${IntentColors.danger};
-    ${getHoverAndActiveStyles(IntentColors.danger)}
+    ${getButtonHoverAndActiveStyles(IntentColors.danger)}
   }
-  &&&.bp3-button.bp3-intent-success:not(.bp3-minimal) {
+  &&&.${Classes.BUTTON}.${Classes.INTENT_SUCCESS}:not(.${Classes.MINIMAL}) {
     background: ${IntentColors.success};
-    ${getHoverAndActiveStyles(IntentColors.success)}
+    ${getButtonHoverAndActiveStyles(IntentColors.success)}
   }
-  &&&.bp3-button.bp3-intent-warning:not(.bp3-minimal) {
+  &&&.${Classes.BUTTON}.${Classes.INTENT_WARNING}:not(.${Classes.MINIMAL}) {
     background: ${IntentColors.warning};
-    ${getHoverAndActiveStyles(IntentColors.warning)}
+    ${getButtonHoverAndActiveStyles(IntentColors.warning)}
   }
 
-  &&.bp3-minimal.bp3-button {
+  &&.${Classes.MINIMAL}.${Classes.BUTTON} {
     border: none;
     border-color: ${IntentColors.none};
     & span.bp3-icon {
       color: ${IntentColors.none};
     }
   }
-  &&&.bp3-minimal.bp3-intent-primary {
+  &&&.${Classes.MINIMAL}.${Classes.INTENT_PRIMARY} {
     color: ${IntentColors.primary};
     border-color: ${IntentColors.primary};
   }
-  &&&.bp3-minimal.bp3-intent-secondary {
+  &&&.${Classes.MINIMAL}.bp3-intent-secondary {
     color: ${IntentColors.secondary};
     border-color: ${IntentColors.secondary};
   }
-  &&&.bp3-minimal.bp3-intent-danger {
+  &&&.${Classes.MINIMAL}.${Classes.INTENT_DANGER} {
     color: ${IntentColors.danger};
     border-color: ${IntentColors.danger};
   }
-  &&&.bp3-minimal.bp3-intent-warning {
+  &&&.${Classes.MINIMAL}.${Classes.INTENT_WARNING} {
     color: ${IntentColors.warning};
     border-color: ${IntentColors.warning};
   }
-  &&&.bp3-minimal.bp3-intent-success {
+  &&&.${Classes.MINIMAL}.${Classes.INTENT_SUCCESS} {
     color: ${IntentColors.success};
     border-color: ${IntentColors.success};
   }
 `;
 
+export const BlueprintInputTransform = css`
+  && {
+    .${Classes.INPUT} {
+      border-radius: ${props => props.theme.radii[1]}px;
+      box-shadow: none;
+      border: ${props => getBorderCSSShorthand(props.theme.borders[2])};
+      &:focus {
+        border: ${props => getBorderCSSShorthand(props.theme.borders[2])};
+        box-shadow: none;
+      }
+    }
+  }
+`;
+
 export type ThemeBorder = {
   thickness: number;
   style: "dashed" | "solid";

app/client/src/index.css

@@ -52,13 +52,13 @@ div.bp3-popover-arrow {
   cursor: default !important;
 }
 
-.bp3-intent-primary:not(.bp3-icon):not(:hover), input:checked ~ span.bp3-control-indicator {
+/* .bp3-intent-primary:not(.bp3-icon):not(:hover), input:checked ~ span.bp3-control-indicator {
   background: #29CCA3 !important;
   box-shadow: none !important;
 }
 .bp3-intent-primary {
   border-radius: 4px !important;
-}
+} */
 
 .pace {
   -webkit-pointer-events: none;

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -114,6 +114,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
         { id: "1", label: "Option 1", value: "1" },
         { id: "2", label: "Option 2", value: "2" },
         { id: "3", label: "Option 3", value: "3" },
+        { id: "4", label: "Option 4", value: "4" },
+        { id: "5", label: "Option 5", value: "5" },
       ],
       widgetName: "Dropdown",
       selectedIndex: 0,

app/client/src/pages/common/CustomizedDropdown/OrgDropdownData.tsx

@@ -6,7 +6,6 @@ import { getOnSelectAction, DropdownOnSelectActions } from "./dropdownHelpers";
 import DropdownComponent, { CustomizedDropdownProps } from "./index";
 import { Org } from "constants/orgConstants";
 import { User } from "constants/userConstants";
-import history from "utils/history";
 import FormDialogComponent from "components/editorComponents/form/FormDialogComponent";
 import CreateOrganizationForm from "pages/organization/CreateOrganizationForm";
 
@@ -76,7 +75,6 @@ export const options = (
             getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
               path: "/org/settings",
             }),
-          active: history.location.pathname === "/org/settings",
         },
         {
           content: "Applications",
@@ -84,7 +82,6 @@ export const options = (
             getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
               path: "/applications",
             }),
-          active: history.location.pathname === "/applications",
         },
         {
           content: "Members",
@@ -92,7 +89,6 @@ export const options = (
             getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
               path: "/users",
             }),
-          active: history.location.pathname === "/users",
         },
         {
           content: <DropdownComponent {...switchdropdown(orgs, currentOrg)} />,

app/client/src/sagas/ErrorSagas.tsx

@@ -48,7 +48,7 @@ export function getResponseErrorMessage(response: ApiResponse) {
     : undefined;
 }
 
-type ErrorPayloadType = object | { message: string };
+type ErrorPayloadType = { message?: string };
 let ActionErrorDisplayMap: {
   [key: string]: (error: ErrorPayloadType) => string;
 } = {};
@@ -79,7 +79,7 @@ export function* errorSaga(
     type,
     payload: { error, show = true },
   } = errorAction;
-  const message = ActionErrorDisplayMap[type](error);
+  const message = error.message || ActionErrorDisplayMap[type](error);
   if (show) AppToaster.show({ message, intent: Intent.DANGER });
   yield put({
     type: ReduxActionTypes.REPORT_ERROR,

app/client/src/sagas/userSagas.tsx

@@ -276,6 +276,9 @@ export function* fetchUserSaga(action: ReduxAction<FetchUserRequest>) {
     console.log(error);
     yield put({
       type: ReduxActionErrorTypes.FETCH_USER_ERROR,
+      payload: {
+        error,
+      },
     });
   }
 }

app/client/src/widgets/InputWidget.tsx

@@ -76,6 +76,10 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
         minNum={this.props.minNum}
         placeholder={this.props.placeholderText}
         isLoading={this.props.isLoading}
+        isTextArea={
+          this.props.bottomRow - this.props.topRow > 1 &&
+          this.props.inputType === "TEXT"
+        }
         stepSize={1}
       />
     );