feat(frontend): style textarea to match other inputs DEV-2007

jsapp/js/components/common/InputBase.stories.tsx

@@ -0,0 +1,26 @@
+import { InputBase, NumberInput, PasswordInput, Stack, TextInput, Textarea } from '@mantine/core'
+import type { Meta, StoryObj } from '@storybook/react-webpack5'
+
+const meta: Meta<typeof InputBase> = {
+  title: 'Design system/InputBase',
+  component: InputBase,
+  parameters: {
+    controls: { expanded: false },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof InputBase>
+
+export const CompareAll: Story = {
+  render: () => (
+    <Stack gap='md' style={{ maxWidth: 420, padding: 40, margin: 'auto' }}>
+      <InputBase label='InputBase' placeholder='Shared styling' value='Base input' />
+      <TextInput label='TextInput' placeholder='Shared styling' defaultValue='Text input' />
+      <PasswordInput label='PasswordInput' placeholder='Shared styling' defaultValue='secret' />
+      <Textarea label='Textarea' placeholder='Shared styling' defaultValue='Textarea input' autosize minRows={2} />
+      <NumberInput label='NumberInput' placeholder='Shared styling' defaultValue={42} />
+    </Stack>
+  ),
+}

jsapp/js/components/common/NumberInput.stories.tsx

@@ -0,0 +1,68 @@
+import { NumberInput, type NumberInputProps } from '@mantine/core'
+import type { Meta, StoryObj } from '@storybook/react-webpack5'
+
+const inputSizes: Array<NumberInputProps['size']> = ['sm', 'md', 'lg']
+
+const meta: Meta<typeof NumberInput> = {
+  title: 'Design system/NumberInput',
+  component: NumberInput,
+  argTypes: {
+    label: {
+      description: 'Appears above the input',
+      control: 'text',
+    },
+    placeholder: {
+      description: 'Placeholder text for the input',
+      control: 'text',
+    },
+    value: {
+      description: 'Current value of the input',
+      control: 'number',
+    },
+    size: {
+      description: 'Changes the size of the component',
+      defaultValue: 'md',
+      options: inputSizes,
+      control: { type: 'radio' },
+    },
+    disabled: {
+      description: 'Disables the input',
+      control: 'boolean',
+    },
+    required: {
+      description: 'Marks the input as required',
+      control: 'boolean',
+    },
+    error: {
+      description: 'Error message or state for the input',
+      control: 'text',
+    },
+  },
+  args: {
+    label: 'Number input',
+    placeholder: 'Enter a number',
+    size: 'md',
+    min: 0,
+    step: 1,
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof NumberInput>
+
+export const Primary: Story = {}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: 42,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    value: 42,
+    error: 'Enter a value between 0 and 100',
+  },
+}

jsapp/js/components/common/TextInput.stories.tsx

@@ -5,7 +5,7 @@ import Icon from './icon'
 const inputSizes: Array<TextInputProps['size']> = ['sm', 'md', 'lg']
 
 export default {
-  title: 'Design system old/TextInput',
+  title: 'Design system/TextInput',
   component: TextInput,
   argTypes: {
     label: {

jsapp/js/theme/kobo/InputBase.module.css

@@ -3,6 +3,16 @@
   outline-offset: var(--kobo-focus-ring-offset);
 }
 
+.input:focus-within:not([data-error]) {
+  outline: var(--kobo-focus-ring);
+  outline-offset: var(--kobo-focus-ring-offset);
+}
+
+.control:focus-visible:not([data-error]) {
+  outline: var(--kobo-focus-ring);
+  outline-offset: var(--kobo-focus-ring-offset);
+}
+
 .input {
   border-color: var(--mantine-color-gray-6);
 
@@ -26,10 +36,38 @@
   border-color: var(--mantine-color-red-7);
 }
 
+.control {
+  border-color: var(--mantine-color-gray-6);
+}
+
+.control[data-disabled] {
+  background-color: var(--mantine-color-gray-7);
+  border-color: var(--mantine-color-gray-3);
+  color: var(--mantine-color-gray-3);
+}
+
+.control[data-error] {
+  border-color: var(--mantine-color-red-7);
+}
+
+.control:hover {
+  background-color: var(--mantine-color-gray-6);
+}
+
 .section {
   color: var(--mantine-color-gray-2);
 }
 
+.visibilityToggle {
+  color: var(--mantine-color-gray-2);
+  background-color: transparent;
+}
+
+.visibilityToggle:hover {
+  color: var(--mantine-color-gray-2);
+  background-color: transparent;
+}
+
 .label {
   font-size: var(--mantine-font-size-xs);
   color: var(--mantine-color-gray-1);

jsapp/js/theme/kobo/NumberInput.ts

@@ -1,5 +1,5 @@
 import { NumberInput } from '@mantine/core'
-import classes from './NumberInput.module.css'
+import classes from './InputBase.module.css'
 
 export const NumberInputThemeKobo = NumberInput.extend({
   classNames: classes,

jsapp/js/theme/kobo/PasswordInput.ts

@@ -0,0 +1,14 @@
+import { PasswordInput } from '@mantine/core'
+import classes from './InputBase.module.css'
+
+export const PasswordInputThemeKobo = PasswordInput.extend({
+  defaultProps: {
+    size: 'md',
+  },
+  classNames: {
+    input: classes.input,
+    innerInput: classes.input,
+    section: classes.section,
+    visibilityToggle: classes.visibilityToggle,
+  },
+})

jsapp/js/theme/kobo/Textarea.ts

@@ -1,5 +1,11 @@
 import { Textarea } from '@mantine/core'
+import classes from './InputBase.module.css'
 
-// Textarea renders InputBase internally and uses static class names.
+// Textarea renders InputBase internally and uses the shared Kobo input theme.
 // Focus styles are applied globally via focusRing.css targeting .mantine-Textarea-input
-export const TextareaThemeKobo = Textarea.extend({})
+export const TextareaThemeKobo = Textarea.extend({
+  defaultProps: {
+    size: 'md',
+  },
+  classNames: classes,
+})

jsapp/js/theme/kobo/focusRing.css

@@ -16,7 +16,8 @@
 .mantine-Textarea-input:focus-visible:not([data-error]),
 .mantine-TextInput-input:focus-visible:not([data-error]),
 .mantine-NumberInput-input:focus-visible:not([data-error]),
-.mantine-PasswordInput-input:focus-visible:not([data-error]) {
+.mantine-PasswordInput-input:focus-visible:not([data-error]),
+.mantine-PasswordInput-innerInput:focus-visible:not([data-error]) {
   outline: var(--kobo-focus-ring);
   outline-offset: var(--kobo-focus-ring-offset);
 }

jsapp/js/theme/kobo/index.ts

@@ -16,6 +16,7 @@ import { MultiSelectThemeKobo } from './MultiSelect'
 import { NotificationThemeKobo } from './Notification'
 import { NumberInputThemeKobo } from './NumberInput'
 import { PaperThemeKobo } from './Paper'
+import { PasswordInputThemeKobo } from './PasswordInput'
 import { PillThemeKobo } from './Pill'
 import { RadioThemeKobo } from './Radio'
 import { SelectThemeKobo } from './Select'
@@ -167,6 +168,7 @@ export const themeKobo = createTheme({
     Dropzone: DropzoneThemeKobo,
     TagsInput: TagsInputThemeKobo,
     ThemeIcon: ThemeIconThemeKobo,
+    PasswordInput: PasswordInputThemeKobo,
     NumberInput: NumberInputThemeKobo,
     Textarea: TextareaThemeKobo,
     Paper: PaperThemeKobo,