fix: design audit input widget (#8498)

* fix: 8041 Added design changes * updated password input design and error border design * updated green color names
2021-11-01 20:14:08 +05:30 · 2021-11-01 20:14:08 +05:30 · 7229ef5b37
commit 7229ef5b37
parent 8c397b81a9
8 changed files with 184 additions and 57 deletions
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@ -116,7 +116,8 @@ const DropdownTriggerWrapper = styled.div<{
    props.isOpen && !props.disabled
      ? `
      box-sizing: border-box;
-      border: 1px solid #80bdff;
+      border: 1px solid ${Colors.GREEN_1};
+      box-shadow: 0px 0px 0px 2px ${Colors.GREEN_2};
    `
      : null};
  .${Classes.TEXT} {
@ -205,6 +206,35 @@ export const DropdownWrapper = styled.div<{
  background-color: ${(props) => props.theme.colors.dropdown.menu.bg};
  border: 1px solid ${(props) => props.theme.colors.dropdown.menu.border};
  padding: ${(props) => props.theme.spaces[3]}px 0;
+  .dropdown-search {
+    margin: 4px 12px 8px;
+    width: calc(100% - 24px);
+
+    input {
+      height: 36px;
+      font-size: 14px !important;
+      color: ${Colors.GREY_10} !important;
+      padding-left: 36px !important;
+
+      &:focus {
+        border: 1.2px solid ${Colors.GREEN_1};
+        box-shadow: 0px 0px 0px 2px ${Colors.GREEN_2};
+      }
+    }
+
+    .bp3-icon-search {
+      width: 36px;
+      height: 36px;
+      margin: 0px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 14px;
+      }
+    }
+  }
 `;

 const SearchComponentWrapper = styled.div`
@ -231,9 +261,8 @@ const OptionWrapper = styled.div<{
  cursor: pointer;
  display: flex;
  align-items: center;
-
-  background-color: ${(props) =>
-    props.selected ? props.theme.colors.propertyPane.dropdownSelectBg : null};
+  min-height: 36px;
+  background-color: ${(props) => (props.selected ? Colors.GREEN_3 : null)};

  &&& svg {
    rect {
@ -261,7 +290,7 @@ const OptionWrapper = styled.div<{
  }

  &:hover {
-    background-color: ${(props) => props.theme.colors.dropdown.menu.hover};
+    background-color: ${Colors.GREEN_3};

    &&& svg {
      rect {
@ -312,7 +341,9 @@ const StyledSubText = styled(Text)<{
 `;

 const LeftIconWrapper = styled.span`
-  margin-right: 15px;
+  font-size: 20px;
+  line-height: 19px;
+  margin-right: 10px;
  height: 100%;
  position: relative;
  top: 1px;
--- a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
@ -98,7 +98,6 @@ class SearchComponent extends React.Component<
    this.setState({ localValue: search });
    this.onDebouncedSearch(search);
  };
-
  clearSearch = () => {
    this.setState({ localValue: "" });
    this.onDebouncedSearch("");
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@ -146,6 +146,10 @@ export const Colors = {

  PRIMARY_ORANGE: "#F86A2B",
  MIRAGE: "#182026",
+
+  GREEN_1: "#50AF6C",
+  GREEN_2: "#D5EFE3",
+  GREEN_3: "#ECF9F3",
  MASALA: "#43403D",
 };
 export type Color = typeof Colors[keyof typeof Colors];
--- a/app/client/src/widgets/InputWidget/component/CurrencyCodeDropdown.tsx
+++ b/app/client/src/widgets/InputWidget/component/CurrencyCodeDropdown.tsx
@ -4,6 +4,7 @@ import Dropdown, { DropdownOption } from "components/ads/Dropdown";
 import { CurrencyTypeOptions, CurrencyOptionProps } from "constants/Currency";
 import Icon, { IconSize } from "components/ads/Icon";
 import { countryToFlag } from "./utilities";
+import { Colors } from "constants/Colors";

 const DropdownTriggerIconWrapper = styled.div`
  height: 19px;
@ -19,11 +20,24 @@ const DropdownTriggerIconWrapper = styled.div`
  > * {
    margin-left: 5px;
  }
+
+  .dropdown {
+    svg {
+      width: 14px;
+      height: 14px;
+
+      path {
+        fill: ${Colors.GREY_10} !important;
+      }
+    }
+  }
 `;

 const CurrencyIconWrapper = styled.span`
  height: 100%;
-  padding: 6px 4px 6px 12px;
+  display: flex;
+  align-items: center;
+  padding: 0px 4px 0px 12px;
  position: absolute;
  left: 0;
  z-index: 16;
@ -88,18 +102,18 @@ export default function CurrencyTypeDropdown(props: CurrencyDropdownProps) {
  const dropdownTriggerIcon = (
    <DropdownTriggerIconWrapper className="t--input-currency-change">
      {selectedCurrency}
-      <Icon name="downArrow" size={IconSize.XXS} />
+      <Icon className="dropdown" name="downArrow" size={IconSize.XXS} />
    </DropdownTriggerIconWrapper>
  );
  return (
    <Dropdown
      containerClassName="currency-type-filter"
-      dropdownHeight="195px"
+      dropdownHeight="139px"
      dropdownTriggerIcon={dropdownTriggerIcon}
      enableSearch
-      height="32px"
+      height="36px"
      onSelect={props.onCurrencyTypeChange}
-      optionWidth="260px"
+      optionWidth="340px"
      options={props.options}
      searchPlaceholder="Search by currency or country"
      selected={props.selected}
--- a/app/client/src/widgets/InputWidget/component/ISDCodeDropdown.tsx
+++ b/app/client/src/widgets/InputWidget/component/ISDCodeDropdown.tsx
@ -4,32 +4,39 @@ import Dropdown, { DropdownOption } from "components/ads/Dropdown";
 import Icon, { IconSize } from "components/ads/Icon";
 import { countryToFlag } from "./utilities";
 import { ISDCodeOptions, ISDCodeProps } from "constants/ISDCodes";
+import { Colors } from "constants/Colors";

 const DropdownTriggerIconWrapper = styled.div<{ disabled?: boolean }>`
-  padding: 9px 0px 9px 12px;
-  width: 85px;
-  min-width: 85px;
+  padding: 7px;
+  width: 92px;
+  min-width: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
-  height: 32px;
-  line-height: ${(props) => (props.disabled ? 32 : 18)}px;
+  height: 36px;
+  line-height: ${(props) => (props.disabled ? 36 : 18)}px;
  letter-spacing: -0.24px;
  color: #090707;
  position: ${(props) => props.disabled && "absolute"};
-  .code {
-    margin-right: 4px;
-    pointer-events: none;
-  }
-  .icon-dropdown {
-    opacity: ${(props) => props.disabled && "0.6"};
-    display: flex;
-    width: 30px;
-    justify-content: space-between;
+
+  .dropdown {
+    svg {
+      width: 14px;
+      height: 14px;
+
+      path {
+        fill: ${Colors.GREY_10} !important;
+      }
+    }
  }
 `;

+const FlagWrapper = styled.span`
+  font-size: 20px;
+  line-height: 19px;
+`;
+
 const getISDCodeOptions = (): Array<DropdownOption> => {
  return ISDCodeOptions.map((item: ISDCodeProps) => {
    return {
@ -80,11 +87,11 @@ export default function ISDCodeDropdown(props: ISDCodeDropdownProps) {
      className="t--input-country-code-change"
      disabled={props.disabled}
    >
-      <div className="icon-dropdown">
+      <FlagWrapper>
        {selectedCountry.value && countryToFlag(selectedCountry.value)}
-        <Icon name="downArrow" size={IconSize.XXS} />
-      </div>
+      </FlagWrapper>
      <div className="code">{selectedCountry.id && selectedCountry.id}</div>
+      <Icon className="dropdown" name="down-arrow" size={IconSize.XXS} />
    </DropdownTriggerIconWrapper>
  );
  if (props.disabled) {
@ -93,12 +100,12 @@ export default function ISDCodeDropdown(props: ISDCodeDropdownProps) {
  return (
    <Dropdown
      containerClassName="country-type-filter"
-      dropdownHeight="195px"
+      dropdownHeight="139px"
      dropdownTriggerIcon={dropdownTrigger}
      enableSearch
-      height="32px"
+      height="36px"
      onSelect={props.onISDCodeChange}
-      optionWidth="260px"
+      optionWidth="340px"
      options={props.options}
      searchPlaceholder="Search by ISD code or country"
      selected={props.selected}
--- a/app/client/src/widgets/InputWidget/component/index.tsx
+++ b/app/client/src/widgets/InputWidget/component/index.tsx
@ -1,10 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import {
-  getBorderCSSShorthand,
-  IntentColors,
-  labelStyle,
-} from "constants/DefaultTheme";
+import { labelStyle } from "constants/DefaultTheme";
 import { ComponentProps } from "widgets/BaseComponent";
 import {
  FontStyleTypes,
@ -17,7 +13,6 @@ import {
  NumericInput,
  IconName,
  InputGroup,
-  Button,
  Label,
  Classes,
  ControlGroup,
@ -48,6 +43,7 @@ import ISDCodeDropdown, {

 // TODO(abhinav): All of the following imports should not be in widgets.
 import ErrorTooltip from "components/editorComponents/ErrorTooltip";
+import Icon from "components/ads/Icon";

 /**
 * All design system component specific logic goes here.
@ -84,7 +80,7 @@ const InputComponentWrapper = styled((props) => (
    .currency-type-filter,
    .country-type-filter {
      width: fit-content;
-      height: 32px;
+      height: 36px;
      position: absolute;
      display: inline-block;
      left: 0;
@ -94,8 +90,12 @@ const InputComponentWrapper = styled((props) => (
          fill: ${(props) => props.theme.colors.icon?.hover};
        }
      }
+      &:hover {
+        border: 1px solid ${Colors.GREY_5} !important;
+      }
    }
    .${Classes.INPUT} {
+      min-height: 36px;
      ${(props) =>
        props.inputType === InputTypes.CURRENCY &&
        props.allowCurrencyChange &&
@ -107,11 +107,13 @@ const InputComponentWrapper = styled((props) => (
        `
      padding-left: 35px;`};
      ${(props) =>
-        props.inputType === InputTypes.PHONE_NUMBER && `padding-left: 85px;`};
+        props.inputType === InputTypes.PHONE_NUMBER &&
+        `padding-left: 85px;
+        `};
      box-shadow: none;
      border: 1px solid;
      border-color: ${({ hasError }) =>
-        hasError ? IntentColors.danger : Colors.GEYSER_LIGHT};
+        hasError ? `${Colors.DANGER_SOLID} !important;` : `${Colors.GREY_3};`}
      border-radius: 0;
      height: ${(props) => (props.multiline === "true" ? "100%" : "inherit")};
      width: 100%;
@ -120,22 +122,56 @@ const InputComponentWrapper = styled((props) => (
        `
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
-        border-right-width: 0px;
+        ${props.hasError ? "" : "border-right-width: 0px;"}
+      `}
+      ${(props) =>
+        props.inputType === "PASSWORD" &&
+        `
+        & + .bp3-input-action {
+          height: 36px;
+          width: 36px;
+          cursor: pointer;
+          padding: 1px;
+          .password-input {
+            color: ${Colors.GREY_6};
+            justify-content: center;
+            height: 100%;
+            svg {
+              width: 20px;
+              height: 20px;
+            }
+            &:hover {
+              background-color: ${Colors.GREY_2};
+              color: ${Colors.GREY_10};
+            }
+          }
+        }
      `}
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      &:active {
        border-color: ${({ hasError }) =>
-          hasError ? IntentColors.danger : Colors.HIT_GRAY};
+          hasError ? Colors.DANGER_SOLID : Colors.HIT_GRAY};
+      }
+      &:hover {
+        border-left: 1px solid ${Colors.GREY_5};
+        border-right: 1px solid ${Colors.GREY_5};
+        border-color: ${Colors.GREY_5};
      }
      &:focus {
        border-color: ${({ hasError }) =>
-          hasError ? IntentColors.danger : Colors.MYSTIC};
+          hasError ? Colors.DANGER_SOLID : Colors.MYSTIC};

        &:focus {
-          border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
-          border-color: #80bdff;
          outline: 0;
-          box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
+          border: 1px solid ${Colors.GREEN_1};
+          box-shadow: 0px 0px 0px 2px ${Colors.GREEN_2} !important;
+        }
+      }
+      &:disabled {
+        background-color: ${Colors.GREY_1};
+        border: 1.2px solid ${Colors.GREY_3};
+        & + .bp3-input-action {
+          pointer-events: none;
        }
      }
    }
@ -146,6 +182,12 @@ const InputComponentWrapper = styled((props) => (
        background-color: transparent;
        color: #5c7080;
      }
+      &.${Classes.DISABLED} + .bp3-button-group.bp3-vertical {
+        pointer-events: none;
+        button {
+          background: ${Colors.GREY_1};
+        }
+      }
    }
    .${Classes.CONTROL_GROUP} {
      justify-content: flex-start;
@ -178,17 +220,46 @@ const StyledNumericInput = styled(NumericInput)`
      &:first-child:not(input) {
        position: static;
        background: ${(props) =>
-          props.disabled ? Colors.INPUT_DISABLED : "#fff"};
-        color: ${(props) =>
-          props.disabled ? Colors.INPUT_TEXT_DISABLED : "#000"};
-        border: 1px solid #e7e7e7;
+          props.disabled ? Colors.GREY_1 : Colors.WHITE};
+        border: 1.2px solid ${Colors.GREY_3};
        border-right: 0;
      }
      input:not(:first-child) {
        padding-left: 5px;
-        border-left: 0;
+        border-left: 1px solid transparent;
        z-index: 16;
        line-height: 16px;
+
+        &:hover:not(:focus) {
+          border-left: 1px solid ${Colors.GREY_5};
+        }
+      }
+    }
+  }
+  &&&& .bp3-button-group.bp3-vertical {
+    border: 1.2px solid ${Colors.GREY_3};
+    border-left: none;
+    button {
+      background: ${Colors.WHITE};
+      box-shadow: none;
+      min-width: 24px;
+      width: 24px;
+      border-radius: 0;
+      &:hover {
+        background: ${Colors.GREY_2};
+        span {
+          color: ${Colors.GREY_10};
+        }
+      }
+      &:focus {
+        border: 1px solid ${Colors.GREEN_1};
+        box-shadow: 0px 0px 0px 2px ${Colors.GREEN_2};
+      }
+      span {
+        color: ${Colors.GREY_6};
+        svg {
+          width: 14px;
+        }
      }
    }
  }
@ -437,8 +508,9 @@ class InputComponent extends React.Component<
        placeholder={this.props.placeholder}
        rightElement={
          this.props.inputType === "PASSWORD" ? (
-            <Button
-              icon={"lock"}
+            <Icon
+              className="password-input"
+              name={this.state.showPassword ? "eye-off" : "eye-on"}
              onClick={() => {
                this.setState({ showPassword: !this.state.showPassword });
              }}
--- a/app/client/src/widgets/InputWidget/index.ts
+++ b/app/client/src/widgets/InputWidget/index.ts
@ -9,7 +9,7 @@ export const CONFIG = {
  needsMeta: true,
  defaults: {
    inputType: "TEXT",
-    rows: 1 * GRID_DENSITY_MIGRATION_V1,
+    rows: GRID_DENSITY_MIGRATION_V1,
    label: "",
    columns: 5 * GRID_DENSITY_MIGRATION_V1,
    widgetName: "Input",
@ -17,7 +17,7 @@ export const CONFIG = {
    defaultText: "",
    iconAlign: "left",
    autoFocus: false,
-    labelStyle: "BOLD",
+    labelStyle: "",
    resetOnSubmit: true,
    isRequired: false,
    isDisabled: false,
--- a/app/client/src/widgets/InputWidget/widget/index.tsx
+++ b/app/client/src/widgets/InputWidget/widget/index.tsx
@ -701,7 +701,7 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
    const minInputSingleLineHeight =
      this.props.label || this.props.tooltip
        ? // adjust height for label | tooltip extra div
-          GRID_DENSITY_MIGRATION_V1 + 2
+          GRID_DENSITY_MIGRATION_V1 + 4
        : // GRID_DENSITY_MIGRATION_V1 used to adjust code as per new scaled canvas.
          GRID_DENSITY_MIGRATION_V1;