fix: input disabled state is greyed out again

bigcommerce · Oct 3, 2019 · 6290f88 · 6290f88
1 parent 63fbcf0
commit 6290f88
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/packages/big-design/src/components/Form/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Form/__snapshots__/spec.tsx.snap
@@ -115,6 +115,10 @@ exports[`simple form render 1`] = `
   font-size: 1rem;
 }
 
+.c9[disabled] {
+  background-color: #ECEEF5;
+}
+
 .c8 {
   box-sizing: border-box;
   display: -webkit-box;

diff --git a/packages/big-design/src/components/Input/Input.tsx b/packages/big-design/src/components/Input/Input.tsx
@@ -42,19 +42,20 @@ class StyleableInput extends React.PureComponent<InputProps & PrivateProps, Inpu
   private readonly uniqueId = uniqueId('input_');
 
   render() {
-    const { chips, description, error, label, forwardedRef, onChipDelete, ...props } = this.props;
+    const { chips, description, disabled, error, label, forwardedRef, onChipDelete, ...props } = this.props;
     const id = this.getId();
 
     return (
       <div>
         {this.renderLabel()}
         {this.renderDescription()}
-        <StyledInputWrapper error={error} focus={this.state.focus}>
+        <StyledInputWrapper disabled={disabled} error={error} focus={this.state.focus}>
           {this.renderIconLeft()}
           <StyledInputContent chips={chips}>
             {this.renderChips()}
             <StyledInput
               {...props}
+              disabled={disabled}
               chips={chips}
               error={error}
               id={id}

diff --git a/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
@@ -86,6 +86,10 @@ exports[`renders all together 1`] = `
   font-size: 1rem;
 }
 
+.c7[disabled] {
+  background-color: #ECEEF5;
+}
+
 .c4 {
   color: #5E637A;
   -webkit-flex: 0 0 1.5rem;

diff --git a/packages/big-design/src/components/Input/styled.tsx b/packages/big-design/src/components/Input/styled.tsx
@@ -81,6 +81,10 @@ export const StyledInput = styled.input<InputProps>`
     css`
       padding-left: ${props.theme.spacing.xxSmall};
     `};
+
+  &[disabled] {
+    background-color: ${({ theme }) => theme.colors.secondary20};
+  }
 `;
 
 export const StyledIconWrapper = styled.div`