feat(fuselage): new InputBox small variant (#1377)

RocketChat · May 10, 2024 · a4f8bb5 · a4f8bb5
1 parent 08ff9b3
commit a4f8bb5
Show file tree

Hide file tree

Showing 33 changed files with 867 additions and 241 deletions.
diff --git a/.changeset/early-eels-shake.md b/.changeset/early-eels-shake.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): new `InputBox` small variant
diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
@@ -1,5 +1,6 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './EmailInput.stories';
@@ -8,6 +9,14 @@ const { Default } = composeStories(stories);
 
 describe('[EmailInput Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
@@ -27,13 +27,13 @@ export default {
 } as ComponentMeta<typeof EmailInput>;
 
 const Template: ComponentStory<typeof EmailInput> = (args) => (
-  <EmailInput {...args} />
+  <EmailInput aria-label='email' {...args} />
 );
 
 export const Default: ComponentStory<typeof EmailInput> = Template.bind({});
 
 export const WithIconAddon: ComponentStory<typeof EmailInput> = () => (
-  <EmailInput addon={<Icon name='send' size='x20' />} />
+  <EmailInput aria-label='email' addon={<Icon name='send' size='x20' />} />
 );
 
 export const Invalid: ComponentStory<typeof EmailInput> = Template.bind({});
@@ -59,28 +59,54 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof EmailInput> = () => (
-  <PropsVariationSection
-    component={EmailInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'support@rocket.chat' },
-      'with icon': {
-        addon: <Icon name='at' size='x20' />,
-        value: 'support@rocket.chat',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={EmailInput}
+      common={{ 'onChange': () => {}, 'aria-label': 'email' }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'support@rocket.chat' },
+        'with icon': {
+          addon: <Icon name='at' size='x20' />,
+          value: 'support@rocket.chat',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={EmailInput}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'email' }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'support@rocket.chat' },
+        'with icon': {
+          addon: <Icon name='at' size='x20' />,
+          value: 'support@rocket.chat',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap b/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[EmailInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="email"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+      size="1"
+      type="email"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
@@ -1,14 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { InputBox } from '.';
+import * as stories from './InputBox.stories';
+
+const { Default } = composeStories(stories);
 
 describe('[InputBox Component]', () => {
-  it('renders InputBox without crashing', () => {
-    render(<InputBox type='text' />);
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
   });
 
-  it('renders InputBox.Skeleton without crashing', () => {
-    render(<InputBox.Skeleton />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
@@ -9,7 +9,7 @@ import {
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { Icon, InputBox } from '../..';
+import { Icon, InputBox, Box } from '../..';
 
 export default {
   title: 'Inputs/InputBox',
@@ -34,7 +34,7 @@ export default {
 } as ComponentMeta<typeof Icon>;
 
 const Template: ComponentStory<typeof InputBox> = (args) => (
-  <InputBox {...args} />
+  <InputBox aria-label='Value' {...args} />
 );
 
 export const Default: ComponentStory<typeof InputBox> = Template.bind({});
@@ -87,3 +87,26 @@ export const Skeleton: ComponentStory<typeof InputBox> = () => (
   <InputBox.Skeleton />
 );
 Skeleton.storyName = 'InputBox.Skeleton';
+
+export const SmallVariants: ComponentStory<typeof InputBox> = () => (
+  <Box
+    display='flex'
+    flexDirection='column'
+    alignItems='flex-start'
+    style={{ gap: '8px' }}
+  >
+    <InputBox type='text' small placeholder='Name' aria-label='Name' />
+    <InputBox
+      type='text'
+      small
+      placeholder='Search'
+      addon={<Icon name='magnifier' size='x20' />}
+      aria-label='Search'
+    />
+  </Box>
+);
+SmallVariants.args = {
+  placeholder: 'Search',
+  small: true,
+  onChange: action('change'),
+};
diff --git a/packages/fuselage/src/components/InputBox/InputBox.styles.scss b/packages/fuselage/src/components/InputBox/InputBox.styles.scss
@@ -193,6 +193,31 @@
     }
   }
 
+  &__wrapper:has(.rcx-input-box--small) {
+    align-items: center;
+
+    min-width: lengths.size(112);
+    max-height: lengths.size(28);
+    padding: lengths.padding(4) lengths.padding(16);
+  }
+
+  &--small {
+    @include typography.use-font-scale(c1);
+
+    &:not(.rcx-input-box--undecorated) {
+      @extend %input;
+      min-width: lengths.size(112);
+
+      min-height: lengths.size(28);
+      padding: lengths.padding(4) lengths.padding(16);
+
+      &:invalid,
+      &.invalid {
+        @extend %input--invalid;
+      }
+    }
+  }
+
   @include with-colors(
     $color: $input-colors-color,
     $placeholder-color: $input-colors-placeholder-color,
@@ -241,6 +266,10 @@
   .rcx-input-box__wrapper > & {
     width: lengths.size(none);
     min-width: lengths.size(none);
+
+    &--small {
+      padding: lengths.padding(none);
+    }
   }
 }
 

diff --git a/packages/fuselage/src/components/InputBox/InputBox.tsx b/packages/fuselage/src/components/InputBox/InputBox.tsx
@@ -23,6 +23,7 @@ type InputBoxProps = ComponentProps<typeof Box> & {
   error?: string;
   placeholder?: string;
   placeholderVisible?: boolean;
+  small?: boolean;
   type:
     | 'button'
     | 'checkbox'
@@ -69,6 +70,7 @@ export const InputBox = forwardRef(function InputBox(
     multiple,
     placeholderVisible,
     type = 'text',
+    small,
     onChange,
     ...props
   }: InputBoxProps,
@@ -140,6 +142,7 @@ export const InputBox = forwardRef(function InputBox(
         rcx-input-box--multiple={multiple}
         rcx-input-box--placeholder-visible={placeholderVisible}
         rcx-input-box--type={type}
+        rcx-input-box--small={small}
         {...props}
       />
     );
@@ -173,6 +176,7 @@ export const InputBox = forwardRef(function InputBox(
         rcx-input-box--placeholder-visible={placeholderVisible}
         rcx-input-box--type={type}
         rcx-input-box--undecorated
+        rcx-input-box--small={small}
         {...props}
       />
       <Addon children={addon} />

diff --git a/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap b/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[InputBox Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="Value"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      size="1"
+      type="text"
+      value="Value"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
@@ -1,10 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { NumberInput } from '.';
+import * as stories from './NumberInput.stories';
+
+const { Default } = composeStories(stories);
 
 describe('[NumberInput Component]', () => {
   it('renders without crashing', () => {
-    render(<NumberInput />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });