feat(TextField): revamp component to use design v2

rotki · Oct 30, 2024 · 0d2aefc · 0d2aefc
1 parent 6a7d1d0
commit 0d2aefc
Show file tree

Hide file tree

Showing 8 changed files with 295 additions and 518 deletions.
diff --git a/example/src/views/DataTableView.vue b/example/src/views/DataTableView.vue
@@ -1040,8 +1040,6 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
               placeholder="search"
               label="search"
               class="w-1/2 lg:w-2/5"
-              variant="outlined"
-              color="primary"
               hide-details
             />
             <span v-if="table.modelValue">
@@ -1085,8 +1083,6 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
               placeholder="search"
               label="search"
               class="w-1/2 lg:w-2/5"
-              variant="outlined"
-              color="primary"
               hide-details
               @update:model-value="onSearch($event, i)"
             />

diff --git a/example/src/views/NotificationView.vue b/example/src/views/NotificationView.vue
@@ -32,7 +32,6 @@ const options = ['light', 'dark'];
       <RuiTextField
         v-model="timeout"
         type="number"
-        variant="outlined"
         label="timeout"
         class="mt-4"
         data-cy="timeout"

diff --git a/example/src/views/TextFieldView.vue b/example/src/views/TextFieldView.vue
@@ -48,73 +48,66 @@ const textFields = ref<TextFieldData[]>([
   { modelValue: '', color: 'info', variant: 'filled', dense: true },
   { modelValue: '', color: 'success', variant: 'filled', dense: true },
 
-  { modelValue: '', color: 'primary', variant: 'outlined' },
-  { modelValue: '', color: 'secondary', variant: 'outlined' },
-  { modelValue: '', color: 'error', variant: 'outlined' },
-  { modelValue: '', color: 'warning', variant: 'outlined' },
-  { modelValue: '', color: 'info', variant: 'outlined' },
-  { modelValue: '', color: 'success', variant: 'outlined' },
+  { modelValue: '', color: 'primary' },
+  { modelValue: '', color: 'secondary' },
+  { modelValue: '', color: 'error' },
+  { modelValue: '', color: 'warning' },
+  { modelValue: '', color: 'info' },
+  { modelValue: '', color: 'success' },
 
-  { modelValue: '', color: 'primary', variant: 'outlined', dense: true },
-  { modelValue: '', color: 'secondary', variant: 'outlined', dense: true },
-  { modelValue: '', color: 'error', variant: 'outlined', dense: true },
-  { modelValue: '', color: 'warning', variant: 'outlined', dense: true },
-  { modelValue: '', color: 'info', variant: 'outlined', dense: true },
-  { modelValue: '', color: 'success', variant: 'outlined', dense: true },
+  { modelValue: '', color: 'primary', dense: true },
+  { modelValue: '', color: 'secondary', dense: true },
+  { modelValue: '', color: 'error', dense: true },
+  { modelValue: '', color: 'warning', dense: true },
+  { modelValue: '', color: 'success', dense: true },
+  { modelValue: '', color: 'info', dense: true },
 
-  { modelValue: '', color: 'primary', variant: 'outlined', disabled: true },
-  { modelValue: '', color: 'secondary', variant: 'outlined', disabled: true },
-  { modelValue: '', color: 'error', variant: 'outlined', disabled: true },
-  { modelValue: '', color: 'warning', variant: 'outlined', disabled: true },
-  { modelValue: '', color: 'info', variant: 'outlined', disabled: true },
-  { modelValue: '', color: 'success', variant: 'outlined', disabled: true },
+  { modelValue: '', color: 'primary', disabled: true },
+  { modelValue: '', color: 'error', disabled: true },
+  { modelValue: '', color: 'warning', disabled: true },
+  { modelValue: '', color: 'info', disabled: true },
+  { modelValue: '', color: 'success', disabled: true },
+  { modelValue: '', color: 'secondary', disabled: true },
 
-  { modelValue: '', color: 'primary', variant: 'outlined', hint: 'Text field hint' },
+  { modelValue: '', color: 'primary', hint: 'Text field hint' },
   {
     modelValue: '',
     color: 'secondary',
-    variant: 'outlined',
     hint: 'Text field hint',
   },
-  { modelValue: '', color: 'error', variant: 'outlined', hint: 'Text field hint' },
-  { modelValue: '', color: 'warning', variant: 'outlined', hint: 'Text field hint' },
-  { modelValue: '', color: 'info', variant: 'outlined', hint: 'Text field hint' },
-  { modelValue: '', color: 'success', variant: 'outlined', hint: 'Text field hint' },
+  { modelValue: '', color: 'error', hint: 'Text field hint' },
+  { modelValue: '', color: 'warning', hint: 'Text field hint' },
+  { modelValue: '', color: 'info', hint: 'Text field hint' },
+  { modelValue: '', color: 'success', hint: 'Text field hint' },
 
   {
     modelValue: '',
     color: 'primary',
-    variant: 'outlined',
     errorMessages: ['Text field error message'],
   },
   {
     modelValue: '',
     color: 'secondary',
-    variant: 'outlined',
     errorMessages: 'Text field error message',
   },
   {
     modelValue: '',
     color: 'error',
-    variant: 'outlined',
     errorMessages: ['Text field error message'],
   },
   {
     modelValue: '',
     color: 'warning',
-    variant: 'outlined',
     successMessages: ['Text field success message'],
   },
   {
     modelValue: '',
     color: 'info',
-    variant: 'outlined',
     successMessages: 'Text field success message',
   },
   {
     modelValue: '',
     color: 'success',
-    variant: 'outlined',
     successMessages: ['Text field success message'],
   },
 
@@ -132,7 +125,6 @@ const textFields = ref<TextFieldData[]>([
   {
     modelValue: '',
     color: 'primary',
-    variant: 'outlined',
     appendIcon: 'arrow-right-line',
     textColor: 'primary',
   },
@@ -151,7 +143,6 @@ const textFields = ref<TextFieldData[]>([
   {
     modelValue: '',
     color: 'primary',
-    variant: 'outlined',
     prependIcon: 'arrow-right-line',
     textColor: 'primary',
   },
@@ -171,7 +162,6 @@ const textFields = ref<TextFieldData[]>([
   {
     modelValue: '',
     color: 'primary',
-    variant: 'outlined',
     prepend: 'Prepend',
   },
   {
@@ -188,7 +178,6 @@ const textFields = ref<TextFieldData[]>([
   {
     modelValue: '',
     color: 'primary',
-    variant: 'outlined',
     append: 'Append',
     textColor: 'primary',
   },
@@ -201,14 +190,12 @@ const textFields = ref<TextFieldData[]>([
   {
     modelValue: '',
     color: 'primary',
-    variant: 'filled',
     append: 'Append',
     clearable: true,
   },
   {
     modelValue: '',
     color: 'primary',
-    variant: 'outlined',
     append: 'Append',
     clearable: true,
     textColor: 'primary',
@@ -219,43 +206,37 @@ const revealableTextFields = ref<RevealableTextFieldData[]>([
   {
     modelValue: '',
     color: 'primary',
-    variant: 'outlined',
     label: 'Password',
     textColor: 'primary',
   },
   {
     modelValue: '',
     color: 'secondary',
-    variant: 'outlined',
     label: 'Password',
     textColor: 'secondary',
   },
   {
     modelValue: '',
     color: 'error',
-    variant: 'outlined',
     label: 'Password',
     textColor: 'error',
   },
   {
     modelValue: '',
     color: 'warning',
-    variant: 'outlined',
     label: 'Password',
     textColor: 'warning',
   },
   {
     modelValue: '',
     color: 'info',
-    variant: 'outlined',
     label: 'API Key',
     textColor: 'info',
     disabled: true,
   },
   {
     modelValue: 'some secret key',
     color: 'success',
-    variant: 'outlined',
     label: 'API Secret',
     textColor: 'success',
     prependIcon: 'arrow-right-line',
@@ -266,7 +247,6 @@ const revealableTextFields = ref<RevealableTextFieldData[]>([
   },
   {
     color: 'info',
-    variant: 'outlined',
     label: 'API Key',
     textColor: 'info',
     clearable: true,

diff --git a/src/components/color-picker/RuiColorInput.vue b/src/components/color-picker/RuiColorInput.vue
@@ -89,10 +89,8 @@ whenever(
         <RuiTextField
           v-if="inputType === 'hex'"
           v-model="state.hex"
-          variant="outlined"
           class="flex-1 w-full [&_input]:uppercase"
           maxlength="6"
-          color="primary"
           dense
           hide-details
           @update:model-value="onInputChange(inputType, $event)"
@@ -112,10 +110,8 @@ whenever(
             v-for="(v, i) in state.rgb"
             :key="i"
             :model-value="v.toString()"
-            variant="outlined"
             class="[&_input]:text-center w-full"
             maxlength="3"
-            color="primary"
             dense
             hide-details
             @update:model-value="onInputChange(inputType, $event, i)"

diff --git a/src/components/forms/revealable-text-field/RuiRevealableTextField.stories.ts b/src/components/forms/revealable-text-field/RuiRevealableTextField.stories.ts
@@ -49,7 +49,7 @@ const meta: Meta<RuiRevealableTextFieldProps> = {
     },
     variant: {
       control: 'select',
-      options: ['default', 'filled', 'outlined'],
+      options: ['default', 'filled'],
       table: { category: 'State' },
     },
   },
@@ -70,7 +70,6 @@ export const Default: Story = {
   args: {
     label: 'Password',
     placeholder: 'Placeholder',
-    variant: 'outlined',
   },
 };
 
@@ -80,7 +79,6 @@ export const PrimaryText: Story = {
     label: 'Password',
     placeholder: 'Placeholder',
     textColor: 'primary',
-    variant: 'outlined',
   },
 };
 
@@ -90,7 +88,6 @@ export const SuccessText: Story = {
     label: 'Password',
     placeholder: 'Placeholder',
     textColor: 'success',
-    variant: 'outlined',
   },
 };
 
@@ -99,7 +96,6 @@ export const ErrorsMessage: Story = {
     errorMessages: ['Lorem ipsum dolor'],
     label: 'Password',
     placeholder: 'Placeholder',
-    variant: 'outlined',
   },
 };
 
@@ -108,7 +104,6 @@ export const SuccessMessage: Story = {
     label: 'Password',
     placeholder: 'Placeholder',
     successMessages: ['Lorem ipsum dolor'],
-    variant: 'outlined',
   },
 };
 
@@ -117,7 +112,6 @@ export const Hinted: Story = {
     hint: 'Lorem ipsum dolor',
     label: 'Password',
     placeholder: 'Placeholder',
-    variant: 'outlined',
   },
 };
 

diff --git a/src/components/forms/text-field/RuiTextField.spec.ts b/src/components/forms/text-field/RuiTextField.spec.ts
@@ -50,11 +50,7 @@ describe('forms/TextField', () => {
         modelValue: '',
       },
     });
-    expect(wrapper.find('div[class*=wrapper]').classes()).toEqual(
-      expect.arrayContaining([expect.stringMatching(/_default_/)]),
-    );
 
-    await wrapper.setProps({ color: 'primary' });
     expect(wrapper.find('div[class*=wrapper]').classes()).toEqual(
       expect.arrayContaining([expect.stringMatching(/_primary_/)]),
     );
@@ -81,18 +77,18 @@ describe('forms/TextField', () => {
         modelValue: '',
       },
     });
-    expect(wrapper.find('div[class*=wrapper]').classes()).toEqual(
-      expect.arrayContaining([expect.stringMatching(/_default_/)]),
+    expect(wrapper.find('div[class*=wrapper]').classes()).not.toEqual(
+      expect.arrayContaining([expect.stringMatching(/_filled_/)]),
     );
 
     await wrapper.setProps({ variant: 'filled' });
     expect(wrapper.find('div[class*=wrapper]').classes()).toEqual(
       expect.arrayContaining([expect.stringMatching(/_filled_/)]),
     );
 
-    await wrapper.setProps({ variant: 'outlined' });
-    expect(wrapper.find('div[class*=wrapper]').classes()).toEqual(
-      expect.arrayContaining([expect.stringMatching(/_outlined_/)]),
+    await wrapper.setProps({ variant: undefined });
+    expect(wrapper.find('div[class*=wrapper]').classes()).not.toEqual(
+      expect.arrayContaining([expect.stringMatching(/_filled_/)]),
     );
   });