ui-core, input: Update Input component styles to improve responsiveness

ui-core, select: Update Select component props to exclude children from FieldWrapperProps and styles to improve responsiveness ui-core, textarea: Update TextArea component to exclude children from FieldWrapperProps and improve responsiveness ui-core, tokenInput: Add decorator to TokenInput story for better display in Storybook ui-core, radiobutton: remove unnecessary CSS code for radio button wrapper ui-core : export component props type ui-core, input : prevent trailing content from going to 2 lines on firefox ui-core: change focus input style
OpenRailAssociation · May 16, 2024 · 8296314 · 8296314
1 parent 65d0681
commit 8296314
Show file tree

Hide file tree

Showing 18 changed files with 96 additions and 49 deletions.
diff --git a/tailwind-preset.js b/tailwind-preset.js
@@ -12,6 +12,7 @@ export default {
           100: '#000000',
         },
         white: {
+          25: '#FFFFFF',
           50: '#FFFFFF80',
           75: '#FFFFFFBF',
           100: '#FFFFFF',

diff --git a/ui-core/src/components/Select.tsx b/ui-core/src/components/Select.tsx
@@ -14,7 +14,7 @@ export type SelectOption = { value: string; label: string };
  * but for our Select component, we want to ensure that it's always a string.
  */
 export type SelectProps = Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'value'> &
-  FieldWrapperProps & {
+  Omit<FieldWrapperProps, 'children'> & {
     value?: string;
     placeholder?: string;
     options: SelectOption[];

diff --git a/ui-core/src/components/buttons/Button.tsx b/ui-core/src/components/buttons/Button.tsx
@@ -4,7 +4,7 @@ import { Gear } from '@osrd-project/ui-icons';
 
 type ButtonVariant = 'Normal' | 'Cancel' | 'Quiet' | 'Destructive' | 'Primary';
 
-interface ButtonProps {
+export interface ButtonProps {
   label: string;
   variant?: ButtonVariant;
   isLoading?: boolean;

diff --git a/ui-core/src/components/inputs/PasswordInput.tsx b/ui-core/src/components/inputs/PasswordInput.tsx
@@ -3,22 +3,26 @@ import { Eye, EyeClosed } from '@osrd-project/ui-icons';
 
 import Input, { InputProps } from './Input';
 
-export const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const [showPassword, toggleShowPassword] = useState(false);
+export type PasswordInputProps = InputProps;
 
-  return (
-    <Input
-      {...props}
-      type={showPassword ? 'text' : 'password'}
-      trailingContent={{
-        content: showPassword ? <EyeClosed /> : <Eye />,
-        onClickCallback: () => toggleShowPassword(!showPassword),
-      }}
-      inputWrapperClassname="password-input"
-      ref={ref}
-    />
-  );
-});
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  (props, ref) => {
+    const [showPassword, toggleShowPassword] = useState(false);
+
+    return (
+      <Input
+        {...props}
+        type={showPassword ? 'text' : 'password'}
+        trailingContent={{
+          content: showPassword ? <EyeClosed /> : <Eye />,
+          onClickCallback: () => toggleShowPassword(!showPassword),
+        }}
+        inputWrapperClassname="password-input"
+        ref={ref}
+      />
+    );
+  }
+);
 
 PasswordInput.displayName = 'PasswordInput';
 

diff --git a/ui-core/src/components/inputs/TextArea.tsx b/ui-core/src/components/inputs/TextArea.tsx
@@ -3,7 +3,8 @@ import cx from 'classnames';
 import FieldWrapper, { FieldWrapperProps } from './FieldWrapper';
 import useFocusByTab from '../hooks/useFocusByTab';
 
-export type TextAreaProps = React.InputHTMLAttributes<HTMLTextAreaElement> & FieldWrapperProps;
+export type TextAreaProps = React.InputHTMLAttributes<HTMLTextAreaElement> &
+  Omit<FieldWrapperProps, 'children'>;
 
 const CHAR_COUNT_ERROR_THRESHOLD = 40;
 const TextArea: React.FC<TextAreaProps> = ({

diff --git a/ui-core/src/components/inputs/TokenInput.tsx b/ui-core/src/components/inputs/TokenInput.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import cx from 'classnames';
 import { X } from '@osrd-project/ui-icons';
 
-type TokenInputProps = {
+export type TokenInputProps = {
   label: string;
   tokens: string[];
 };

diff --git a/ui-core/src/components/inputs/checkbox.tsx b/ui-core/src/components/inputs/checkbox.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-interface CheckboxProps {
+export interface CheckboxProps {
   label: string;
 }
 

diff --git a/ui-core/src/index.ts b/ui-core/src/index.ts
@@ -1,11 +1,11 @@
 import './styles/main.css';
 
-export { default as Button } from './components/buttons/Button';
-export { default as Checkbox } from './components/inputs/checkbox';
-export { default as Input } from './components/inputs/Input';
-export { default as TokenInput } from './components/inputs/TokenInput';
-export { default as PasswordInput } from './components/inputs/PasswordInput';
-export { default as TextArea } from './components/inputs/TextArea';
-export { default as RadioButton } from './components/inputs/RadioButton';
-export { default as RadioGroup } from './components/inputs/RadioGroup';
-export { default as Select } from './components/Select';
+export { default as Button, ButtonProps } from './components/buttons/Button';
+export { default as Checkbox, CheckboxProps } from './components/inputs/checkbox';
+export { default as Input, InputProps } from './components/inputs/Input';
+export { default as TokenInput, TokenInputProps } from './components/inputs/TokenInput';
+export { default as PasswordInput, PasswordInputProps } from './components/inputs/PasswordInput';
+export { default as TextArea, TextAreaProps } from './components/inputs/TextArea';
+export { default as RadioButton, RadioButtonProps } from './components/inputs/RadioButton';
+export { default as RadioGroup, RadioGroupProps } from './components/inputs/RadioGroup';
+export { default as Select, SelectOption, SelectProps } from './components/Select';
diff --git a/ui-core/src/stories/Input.stories.tsx b/ui-core/src/stories/Input.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@osrd-project/ui-core/dist/theme.css';
 
@@ -11,6 +12,13 @@ const meta: Meta<typeof Input> = {
     readOnly: false,
     onChange: () => {},
   },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '20rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
   title: 'Input',
   tags: ['autodocs'],
 };
@@ -48,6 +56,13 @@ export const LeadingContent: Story = {
     type: 'number',
     leadingContent: '£',
   },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '10rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export const TrainlingContent: Story = {
@@ -56,6 +71,13 @@ export const TrainlingContent: Story = {
     type: 'number',
     trailingContent: '€',
   },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '10rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export const LeadingAndTrainlingContent: Story = {

diff --git a/ui-core/src/stories/Select.stories.tsx b/ui-core/src/stories/Select.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import Select from '../components/Select';
@@ -18,6 +19,13 @@ const meta: Meta<typeof Select> = {
     disabled: false,
     readOnly: false,
   },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '20rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
   title: 'Select',
   tags: ['autodocs'],
 };

diff --git a/ui-core/src/stories/TextArea.stories.tsx b/ui-core/src/stories/TextArea.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import TextArea from '../components/inputs/TextArea';
 
@@ -10,6 +11,13 @@ const meta: Meta<typeof TextArea> = {
     readOnly: false,
     label: 'Description',
   },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '25rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
   title: 'TextArea',
   tags: ['autodocs'],
 };

diff --git a/ui-core/src/stories/TokenInput.stories.tsx b/ui-core/src/stories/TokenInput.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@osrd-project/ui-core/dist/theme.css';
 
@@ -9,6 +10,13 @@ const meta: Meta<typeof TokenInput> = {
     label: 'Favorite colors',
     tokens: ['Yellow', 'Orange', 'Red', 'Black'],
   },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '20rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
   title: 'TokenInput',
   tags: ['autodocs'],
 };

diff --git a/ui-core/src/styles/inputs/fieldWrapper.css b/ui-core/src/styles/inputs/fieldWrapper.css
@@ -1,6 +1,5 @@
 .feed-back {
   border-radius: 0.5rem;
-  width: max-content;
   position: relative;
   padding: 0.625rem 0.813rem 1rem 1rem;
 
@@ -19,7 +18,6 @@
   .custom-field {
     display: flex;
     flex-direction: column;
-    width: max-content;
 
     .field-wrapper-and-status-icon {
       display: flex;

diff --git a/ui-core/src/styles/inputs/input.css b/ui-core/src/styles/inputs/input.css
@@ -1,13 +1,20 @@
 .input-wrapper {
   display: flex;
   align-items: center;
+  width: 100%;
   padding: 0.188rem;
   margin-left: -0.125rem;
-  width: max-content;
 
   &.focused-by-tab {
     box-shadow: 0 0 0 0.0625rem rgba(37, 106, 250, 1) inset;
-  } 
+  }
+
+  &:focus-within {
+    .leading-content-wrapper, .trailing-content-wrapper, .input {
+      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 1px rgba(31, 27, 23, 1) inset;
+      @apply bg-white-25;
+    }
+  }
 
   .leading-content-wrapper {
     height: 2.5rem;
@@ -23,6 +30,7 @@
       line-height: 1.25rem;
       font-size: 0.875rem;
       text-align: center;
+      flex-shrink: 0;
       @apply text-grey-80;
     }
 
@@ -45,6 +53,7 @@
 
   .input {
     height: 2.5rem;
+    width: 100%;
     line-height: 1.5rem;
     text-align: left;
     vertical-align: top;
@@ -68,11 +77,6 @@
       border-radius: 0;
     }
 
-    &.with-leading-only,
-    &.with-trailing-only,
-    &.with-leading-and-trailing {
-      width: 6rem;
-    }
 
     &:focus {
       outline: none;
@@ -147,6 +151,7 @@
       line-height: 1.25rem;
       font-size: 0.875rem;
       text-align: center;
+      flex-shrink: 0;
       @apply text-grey-80;
     }
 
@@ -198,11 +203,6 @@
         border-radius: 0;
       }
 
-      &.with-leading-only,
-      &.with-trailing-only,
-      &.with-leading-and-trailing {
-        width: 6rem;
-      }
     }
 
     .trailing-content-wrapper {

diff --git a/ui-core/src/styles/inputs/radioButton.css b/ui-core/src/styles/inputs/radioButton.css
@@ -175,8 +175,6 @@
 }
 
 .radio-button-wrapper {
-  width: -moz-max-content;
-  width: max-content;
   position: relative;
   padding: 1rem 0.625rem;
   border-radius: 0.5rem;

diff --git a/ui-core/src/styles/inputs/textArea.css b/ui-core/src/styles/inputs/textArea.css
@@ -1,14 +1,15 @@
 .text-area-wrapper {
   padding: 0.1875rem;
   position: relative;
+  width: 100%;
 
   &.focused-by-tab {
     box-shadow: 0 0 0 0.0625rem rgba(37, 106, 250, 1) inset;
   }  
 
   .text-area {
     height: 5.875rem;
-    width: 25.375rem;
+    width: 100%;
     line-height: 1.5rem;
     text-align: left;
     vertical-align: top;

diff --git a/ui-core/src/styles/inputs/tokenInput.css b/ui-core/src/styles/inputs/tokenInput.css
@@ -12,7 +12,6 @@
     flex-wrap: wrap;
     min-height: 2.5rem;
     padding: 0.25rem;
-    width: 21.5rem;
     border-radius: 0.25rem;
     box-shadow:
       0 0.063rem 0.188rem rgba(0, 0, 0, 0.5) inset,

diff --git a/ui-core/src/styles/select.css b/ui-core/src/styles/select.css
@@ -5,11 +5,11 @@
     0px 1px 1px rgba(0, 0, 0, 0.2),
     0px 2px 4px rgba(0, 0, 0, 0.1);
   height: 2.5rem;
-  width: 18.5rem;
   padding: 0.438rem 0.813rem 0.562rem 0.813rem;
   letter-spacing: 0;
   text-align: left;
   line-height: 1.5rem;
+  width: 100%;
   @apply border-grey-40 bg-black-1 text-grey-80;
 
   option {
@@ -72,7 +72,6 @@
 
   &.small {
     height: 2rem;
-    width: 13.5rem;
     padding: 0.375rem 0.562rem;
     font-size: 0.875rem;
   }