DCOS-57982: component for rendering badges in a text input (#401)

DCOS-57982: component for rendering badges in a text input Co-authored-by: Georgi Todorov <[email protected]>
d2iq · Sep 17, 2019 · 6c78795 · 6c78795
2 parents 6f831d7 + dbf141b
commit 6c78795
Show file tree

Hide file tree

Showing 18 changed files with 2,256 additions and 80 deletions.
diff --git a/packages/badge/components/badge.tsx b/packages/badge/components/badge.tsx
@@ -1,14 +1,16 @@
 import * as React from "react";
 import { badge } from "../style";
 
+export type BadgeAppearance =
+  | "default"
+  | "success"
+  | "primary"
+  | "warning"
+  | "danger"
+  | "outline";
+
 export interface BadgeProps {
-  appearance?:
-    | "default"
-    | "success"
-    | "primary"
-    | "warning"
-    | "danger"
-    | "outline";
+  appearance?: BadgeAppearance;
   children: JSX.Element | string;
 }
 

diff --git a/packages/badge/style.ts b/packages/badge/style.ts
@@ -16,6 +16,7 @@ import getCSSVarValue from "../utilities/components/getCSSVarValue";
 
 const badgeAppearanceStyle = (color, isOutlined?: boolean) => {
   const bgColor = isOutlined ? getCSSVarValue(themeBgPrimary) : color;
+
   return css`
     background-color: ${bgColor};
     border-color: ${color};

diff --git a/packages/selectInput/components/SelectInput.tsx b/packages/selectInput/components/SelectInput.tsx
@@ -4,7 +4,8 @@ import { select, selectIcon, selectContainer } from "../style";
 import {
   inputContainer,
   getInputAppearanceStyle,
-  getLabelStyle
+  getLabelStyle,
+  getIconAppearanceStyle
 } from "../../shared/styles/formStyles";
 import {
   inputReset,
@@ -158,7 +159,13 @@ class SelectInput extends React.PureComponent<
                   /* tslint:enable */
                 ))}
               </select>
-              <span className={cx(selectIcon, padding("horiz", "m"))}>
+              <span
+                className={cx(
+                  selectIcon,
+                  padding("horiz", "m"),
+                  getIconAppearanceStyle(this.getInputAppearance())
+                )}
+              >
                 <Icon
                   shape={SystemIcons.TriangleDown}
                   size={iconSizeXs}

diff --git a/packages/shared/styles/formStyles.ts b/packages/shared/styles/formStyles.ts
@@ -25,6 +25,7 @@ const getFocusFieldBg = color => hexToRgbA(color, 0.05);
 
 const toggleInputHeight = 16;
 const toggleInputBorderWidth = 1;
+export const textInputHeight = 36;
 
 export const toggleInput = css`
   border-color: ${themeBorder};
@@ -70,36 +71,79 @@ export const toggleInputApperances = {
   `
 };
 
-export const getInputAppearanceStyle = appearance => {
+export const getIconAppearanceStyle = appearance => {
   switch (appearance) {
     case "standard":
       return css`
-        background-color: ${themeBgPrimary};
-        border-color: ${themeBorder};
         svg {
           fill: ${themeTextColorPrimary};
         }
+      `;
+    case "disabled":
+      return css`
+        svg {
+          fill: ${themeTextColorDisabled};
+        }
+      `;
+    case "error":
+      return css`
+        svg {
+          fill: ${themeError};
+        }
+      `;
+    case "success":
+      return css`
+        svg {
+          fill: ${themeSuccess};
+        }
+      `;
+    case "standard-focus":
+      return css`
+        svg {
+          fill: ${themeBrandPrimary};
+        }
+      `;
+    case "error-focus":
+      return css`
+        svg {
+          fill: ${themeError};
+        }
+      `;
+    case "success-focus":
+      return css`
+        svg {
+          fill: ${themeSuccess};
+        }
+      `;
+    default:
+      return "";
+  }
+};
+
+export const getInputAppearanceStyle = appearance => {
+  switch (appearance) {
+    case "standard":
+      return css`
+        background-color: ${themeBgPrimary};
+        border-color: ${themeBorder};
+
         &:focus {
           background-color: ${getFocusFieldBg(
             getCSSVarValue(themeBrandPrimary)
           )};
           border-color: ${themeBrandPrimary};
-          svg {
-            fill: ${themeBrandPrimary};
-          }
         }
       `;
     case "disabled":
       return css`
         background-color: ${themeBgDisabled};
         border-color: ${themeBgDisabled};
         color: ${themeTextColorDisabled};
-        svg {
-          fill: ${themeTextColorDisabled};
-        }
+
         &::placeholder {
           color: ${themeTextColorDisabled};
         }
+
         input {
           color: ${themeTextColorDisabled};
           ::placeholder {
@@ -111,9 +155,7 @@ export const getInputAppearanceStyle = appearance => {
       return css`
         background-color: ${themeBgPrimary};
         border-color: ${themeError};
-        svg {
-          fill: ${themeError};
-        }
+
         &:focus {
           background-color: ${getFocusFieldBg(getCSSVarValue(themeError))};
         }
@@ -122,9 +164,7 @@ export const getInputAppearanceStyle = appearance => {
       return css`
         background-color: ${themeBgPrimary};
         border-color: ${themeSuccess};
-        svg {
-          fill: ${themeSuccess};
-        }
+
         &:focus {
           background-color: ${getFocusFieldBg(getCSSVarValue(themeSuccess))};
         }
@@ -133,25 +173,16 @@ export const getInputAppearanceStyle = appearance => {
       return css`
         background-color: ${getFocusFieldBg(getCSSVarValue(themeBrandPrimary))};
         border-color: ${themeBrandPrimary};
-        svg {
-          fill: ${themeBrandPrimary};
-        }
       `;
     case "error-focus":
       return css`
         background-color: ${getFocusFieldBg(getCSSVarValue(themeError))};
         border-color: ${themeError};
-        svg {
-          fill: ${themeError};
-        }
       `;
     case "success-focus":
       return css`
         background-color: ${getFocusFieldBg(getCSSVarValue(themeSuccess))};
         border-color: ${themeSuccess};
-        svg {
-          fill: ${themeSuccess};
-        }
       `;
     default:
       return "";
@@ -162,7 +193,7 @@ export const inputContainer = css`
   border: 1px solid;
   border-radius: ${borderRadiusSmall};
   color: inherit;
-  height: 36px;
+  height: ${textInputHeight}px;
   font-size: inherit;
   ${padding("horiz", "m")};
   &::placeholder {

diff --git a/packages/textInput/README.md b/packages/textInput/README.md
@@ -29,3 +29,6 @@ If the `tooltipContent` prop is set, an icon tooltip with the given text will be
 
 ## TextInputWithIcon
 `TextInputWithIcon` extends the `TextInput` component but adds two additional props, `iconStart` & `iconEnd`. These props can be provided a `ReactNode` to be rendered either at the start or end of the `TextInput` or both.
+
+## TextInputWithBadges
+`TextInputWithBadges` extends the `TextInputWithIcon` component. More info coming soon...