Merge branch 'master' of https://github.com/kodiak-packages/ventura

.github/workflows/pipeline.yml

@@ -25,16 +25,16 @@ jobs:
       - name: Run ESLint
         run: yarn lint --quiet --color
 
+      - name: Run tests
+        id: tests
+        run: yarn run test --watchAll=false --colors --ci --coverage
+
       - name: Compile src
         run: yarn build
 
       - name: Build the docs
         run: yarn document
 
-      - name: Run tests
-        id: tests
-        run: yarn run test --watchAll=false --colors --ci --coverage
-
       - name: Upload coverage report to codecov
         uses: codecov/codecov-action@v1
 

src/components/Input/Input.module.css

@@ -5,6 +5,7 @@
   padding: 8px 14px;
   width: 100%;
   color: var(--color-neutral-9);
+  -webkit-appearance: none;
 }
 
 .input::placeholder {

src/components/TextArea/TextArea.mdx

@@ -35,6 +35,12 @@ A Input can be used to let the user insert text using key strokes. A crucial for
   <TextArea name="invalidTextArea" isInvalid />
 </Playground>
 
+### Disabled input
+
+<Playground>
+  <TextArea name="disabledTextArea" isDisabled value="This field is disabled" />
+</Playground>
+
 ## API
 
 <Props of={TextArea} />

src/components/TextArea/TextArea.module.css

@@ -17,6 +17,11 @@
   box-shadow: 0 0 0 3px var(--color-focus);
 }
 
+.textarea:disabled {
+  color: var(--color-neutral-4);
+  border-color: var(--color-neutral-4);
+}
+
 .containsError {
   border-color: var(--color-error);
 }

src/components/TextArea/TextArea.test.tsx

@@ -79,6 +79,15 @@ describe('TextArea', () => {
     expect(textAreaElement.getAttribute('autocomplete')).toBe('on');
   });
 
+  test('disabled prop', () => {
+    const component = <TextArea {...defaultButtonProps} isDisabled />;
+    const { getByTestId } = render(component);
+    const textAreaElement = getByTestId('textarea-comment');
+
+    expect(textAreaElement.hasAttribute('spellcheck')).toBe(true);
+    expect(textAreaElement.getAttribute('spellcheck')).not.toBe(false);
+  });
+
   test('maxLength prop', () => {
     const maxLength = 3;
     const component = <TextArea {...defaultButtonProps} maxLength={3} />;

src/components/TextArea/TextArea.tsx

@@ -12,6 +12,7 @@ interface Props {
   placeholder?: string;
   spellCheck?: boolean;
   autoComplete?: boolean;
+  isDisabled?: boolean;
   maxLength?: number;
   className?: string;
   isInvalid?: boolean;
@@ -28,6 +29,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, Props>(
       isInvalid = false,
       spellCheck = false,
       autoComplete = false,
+      isDisabled = false,
       maxLength,
       className,
     }: Props,
@@ -55,6 +57,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, Props>(
         className={textareaClassNames}
         data-testid={name && `textarea-${name}`}
         onBlur={onBlur}
+        disabled={isDisabled}
       />
     );
   },

src/theme.css

@@ -49,10 +49,10 @@
 
   /* Font */
   --font-family: Lato, sans-serif;
-  --font-size: 16px;
+  --font-size: 14px;
   --font-color: var(--color-neutral-8);
   --font-color-sub: var(--color-neutral-7);
-  --line-height: 28px;
+  --line-height: 16px;
 
   /* Border */
   --border-radius-small: 3px;