feat: input component: adds searchbox, textarea and textinput compone…

…nts (#40) * Initial commit of input components * Optimizes Input, fixes missing d.ts files for prod build. * Updates close button SVG, adds color spec'd in Figma * chore(release): 0.0.1 * fix: search box: make button semantic to forms, update scss * fix: input component: breaks textarea and input into separate components * fix: adds missing file: adds untracked textinput to project * feat: input component: adds html escape * chore: scss: updates type definitions * feat: input component: adds searchbox, textarea and textinput components * chore: webpack: reverts local change * fix: hooks: update to match current project architecture * chore: type defs: remove gitignore defs * chore: styles: remove unreferenced variable * fix: pr feedback: use css vars plus optimize nullchecks, hook and interface * chore: code coverage: adds input unit tests * chore: input component: adds typing and optimizes null check * chore: input component: adds typing * feat: input component: ensure the clear text button hides when value is empty people may spam the delete button to clear the text * feat: input component: ensures type change is committed
EightfoldAI · Apr 6, 2022 · 56d7ffe · 56d7ffe
1 parent 294f1b4
commit 56d7ffe
Show file tree

Hide file tree

Showing 22 changed files with 1,600 additions and 5 deletions.
diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
@@ -21,6 +21,7 @@ export const BaseButton: FC<InternalButtonProps> = ({
     disruptive = false,
     htmlType,
     icon,
+    iconColor,
     id,
     onClick,
     primaryColor,
@@ -95,7 +96,12 @@ export const BaseButton: FC<InternalButtonProps> = ({
     };
 
     const getButtonIcon = (icon: IconName): JSX.Element => (
-        <Icon className={styles.icon} path={icon} size={getButtonIconSize()} />
+        <Icon
+            className={styles.icon}
+            color={iconColor}
+            path={icon}
+            size={getButtonIconSize()}
+        />
     );
 
     const buttonStyles = (): CSSVariables => {

diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
@@ -57,6 +57,10 @@ export interface ButtonProps {
      * The button icon.
      */
     icon?: IconName;
+    /**
+     * The button icon color.
+     */
+    iconColor?: string;
     /**
      * The button id.
      */

diff --git a/src/components/Button/DefaultButton/DefaultButton.tsx b/src/components/Button/DefaultButton/DefaultButton.tsx
@@ -12,6 +12,7 @@ export const DefaultButton: FC<ButtonProps> = ({
     disabled = false,
     htmlType,
     icon,
+    iconColor,
     onClick,
     primaryColor,
     text,
@@ -34,6 +35,7 @@ export const DefaultButton: FC<ButtonProps> = ({
             disabled={disabled}
             htmlType={htmlType}
             icon={icon}
+            iconColor={iconColor}
             onClick={onClick}
             primaryColor={primaryColor}
             size={size}

diff --git a/src/components/Button/PrimaryButton/PrimaryButton.tsx b/src/components/Button/PrimaryButton/PrimaryButton.tsx
@@ -13,6 +13,7 @@ export const PrimaryButton: FC<ButtonProps> = ({
     disruptive = false,
     htmlType,
     icon,
+    iconColor,
     onClick,
     primaryColor,
     size = ButtonSize.Flex,
@@ -37,6 +38,7 @@ export const PrimaryButton: FC<ButtonProps> = ({
             disruptive={disruptive}
             htmlType={htmlType}
             icon={icon}
+            iconColor={iconColor}
             onClick={onClick}
             primaryColor={primaryColor}
             size={size}

diff --git a/src/components/Button/SecondaryButton/SecondaryButton.tsx b/src/components/Button/SecondaryButton/SecondaryButton.tsx
@@ -13,6 +13,7 @@ export const SecondaryButton: FC<ButtonProps> = ({
     disruptive = false,
     htmlType,
     icon,
+    iconColor,
     onClick,
     primaryColor,
     text,
@@ -37,6 +38,7 @@ export const SecondaryButton: FC<ButtonProps> = ({
             disruptive={disruptive}
             htmlType={htmlType}
             icon={icon}
+            iconColor={iconColor}
             onClick={onClick}
             primaryColor={primaryColor}
             size={size}

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -32,9 +32,8 @@
     }
 
     &:focus-visible {
-        box-sizing: border-box;
-        padding: $space-xs $space-s;
-        border-width: rem(4px);
+        outline: rem(2px) solid var(--primary-color-80);
+        outline-offset: rem(-2px);
     }
 }
 

diff --git a/src/components/Icon/mdi.ts b/src/components/Icon/mdi.ts
@@ -293,6 +293,7 @@ export enum IconName {
     mdiReplyAll = 'M13,9V5L6,12L13,19V14.9C18,14.9 21.5,16.5 24,20C23,15 20,10 13,9M7,8V5L0,12L7,19V16L3,12L7,8Z',
     mdiReplyAllOutline = 'M11,9.8V10.7L12.7,10.9C15.3,11.3 17.2,12.3 18.6,13.6C16.9,13.1 15.1,12.8 13,12.8H11V14.1L8.8,12L11,9.8M13,5L6,12L13,19V14.9C18,14.9 21.5,16.5 24,20C23,15 20,10 13,9M7,8V5L0,12L7,19V16L3,12',
     mdiReplyOutline = 'M8,9.8V10.7L9.7,11C12.3,11.4 14.2,12.4 15.6,13.7C13.9,13.2 12.1,12.9 10,12.9H8V14.2L5.8,12L8,9.8M10,5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9',
+    mdiResizeBottomRight = 'M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z',
     mdiRoad = 'M11,16H13V20H11M11,10H13V14H11M11,4H13V8H11M4,22H20V2H4V22Z',
     mdiRoadVariant = 'M18.1,4.8C18,4.3 17.6,4 17.1,4H13L13.2,7H10.8L11,4H6.8C6.3,4 5.9,4.4 5.8,4.8L3.1,18.8C3,19.4 3.5,20 4.1,20H10L10.3,15H13.7L14,20H19.8C20.4,20 20.9,19.4 20.8,18.8L18.1,4.8M10.4,13L10.6,9H13.2L13.4,13H10.4Z',
     mdiRocket = 'M20 22L16.14 20.45C16.84 18.92 17.34 17.34 17.65 15.73L20 22M7.86 20.45L4 22L6.35 15.73C6.66 17.34 7.16 18.92 7.86 20.45M12 2C12 2 17 4 17 12C17 15.1 16.25 17.75 15.33 19.83C15 20.55 14.29 21 13.5 21H10.5C9.71 21 9 20.55 8.67 19.83C7.76 17.75 7 15.1 7 12C7 4 12 2 12 2M12 12C13.1 12 14 11.1 14 10C14 8.9 13.1 8 12 8C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12Z',