fix(textfield/textarea): clean up classes (#163)

* refactor(textfield): update component classes * refactor(textarea): update component classes * chore(deps): update @warp-ds/uno to 1.12.0 and @warp-ds/css to 1.9.6 * chore(workflows): use pnpm v9 in github actions
warp-ds · May 14, 2024 · 2babe15 · 2babe15
1 parent 9ad7871
commit 2babe15
Show file tree

Hide file tree

Showing 8 changed files with 9,224 additions and 7,580 deletions.
diff --git a/.github/workflows/i18n.yml b/.github/workflows/i18n.yml
@@ -15,7 +15,7 @@ jobs:
  - name: Install pnpm and dependencies
  uses: pnpm/action-setup@v2
  with:
- version: 8
+ version: 9
  run_install: true
  - name: Validate extracted messages
  run: pnpm messages:compile
diff --git a/.github/workflows/lint.pr.yaml b/.github/workflows/lint.pr.yaml
@@ -15,7 +15,7 @@ jobs:
  - name: Install pnpm and dependencies
  uses: pnpm/action-setup@v2
  with:
- version: 8
+ version: 9
  run_install: true
  - name: Lint
  run: pnpm lint:check
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -19,7 +19,7 @@ jobs:
  - name: Install pnpm and dependencies
  uses: pnpm/action-setup@v2
  with:
- version: 8
+ version: 9
  run_install: true
  - name: Build
  run: pnpm build

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -14,7 +14,7 @@ jobs:
  - name: Install pnpm and dependencies
  uses: pnpm/action-setup@v2
  with:
- version: 8
+ version: 9
  run_install: true
  - name: Test
  run: pnpm test
diff --git a/components/forms/w-textarea.vue b/components/forms/w-textarea.vue
@@ -1,13 +1,15 @@
 <template>
  <w-field v-bind="{ ...$attrs, ...$props }" #default="{ triggerValidation, aria, hasValidationErrors }">
- <div :class="wrapperClass">
+ <div :class="[ccInput.wrapper]">
  <textarea 
- :class="[
- inputClasses,
- {
- [ccInput.invalid]: hasValidationErrors,
- }
- ]"
+ :class="{
+ [`${ccInput.base} ${ccInput.textArea}`]: true,
+ [ccInput.placeholder]: !!p.placeholder,
+ [ccInput.default]: !hasValidationErrors && !p.disabled && !p.readOnly,
+ [ccInput.invalid]: hasValidationErrors && !p.disabled && !p.readOnly,
+ [ccInput.disabled]: !hasValidationErrors && p.disabled && !p.readOnly,
+ [ccInput.readOnly]: !hasValidationErrors && !p.disabled && p.readOnly,
+ }"
  :disabled="disabled"
  :readOnly="readOnly"
  v-bind="{ ...aria, ...$attrs, class: '' }" v-model="model" :id="id" @blur="triggerValidation" 
@@ -17,22 +19,13 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
 import { input as ccInput } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model';
 import { default as wField, fieldProps } from './w-field.vue';
 
 const p = defineProps(fieldProps);
 const emit = defineEmits(['update:modelValue']);
 const model = createModel({ props: p, emit });
-
-const wrapperClass = ccInput.wrapper;
-const inputClasses = computed(() => ({
- [`${ccInput.default} ${ccInput.textArea}`]: true,
- [ccInput.disabled]: p.disabled,
- [ccInput.readOnly]: p.readOnly,
- [ccInput.placeholder]: !!p.placeholder,
-}));
 </script>
 
 <script>

diff --git a/components/forms/w-textfield.vue b/components/forms/w-textfield.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useSlots } from 'vue';
+import { ref, useSlots } from 'vue';
 import { input as ccInput } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model';
 import { setupMask } from './w-input-mask.js';
@@ -24,18 +24,7 @@ const slots = useSlots();
 const model = createModel({ props: p, emit });
 const inputEl = ref(null);
 if (p.mask) setupMask({ props: p, emit, inputEl });
-const inputClasses = computed(() => ({
- [ccInput.default]: true,
- [ccInput.disabled]: p.disabled,
- [ccInput.readOnly]: p.readOnly,
- [ccInput.placeholder]: !!p.placeholder,
- [ccInput.suffix]: slots.suffix,
- [ccInput.prefix]: slots.prefix,
-}));
 
-const inputWithPrefixStyle = computed(() => (
- slots.prefix ? 'padding-left: var(--w-prefix-width, 40px);' : undefined
-))
 </script>
 
 <template>
@@ -47,12 +36,16 @@ const inputWithPrefixStyle = computed(() => (
  :id="id"
  ref="inputEl"
  :type="type"
- :class="[
- inputClasses,
- {
- [ccInput.invalid]: hasValidationErrors,
- }
- ]"
+ :class="{
+ [ccInput.base]: true,
+ [ccInput.default]: !hasValidationErrors && !p.disabled && !p.readOnly,
+ [ccInput.invalid]: hasValidationErrors && !p.disabled && !p.readOnly,
+ [ccInput.disabled]: !hasValidationErrors && p.disabled && !p.readOnly, 
+ [ccInput.readOnly]: !hasValidationErrors && !p.disabled && p.readOnly,
+ [ccInput.placeholder]: !!p.placeholder,
+ [ccInput.suffix]: slots.suffix,
+ [ccInput.prefix]: slots.prefix
+ }"
  :autocomplete="autocomplete"
  :disabled="disabled"
  :placeholder="placeholder"
@@ -65,19 +58,22 @@ const inputWithPrefixStyle = computed(() => (
  ref="inputEl"
  v-model="model"
  :type="type"
- :class="[
- inputClasses,
- {
- [ccInput.invalid]: hasValidationErrors,
- }
- ]"
+ :class="{
+ [ccInput.base]: true,
+ [ccInput.default]: !hasValidationErrors && !p.disabled && !p.readOnly,
+ [ccInput.invalid]: hasValidationErrors && !p.disabled && !p.readOnly,
+ [ccInput.disabled]: !hasValidationErrors && p.disabled && !p.readOnly,
+ [ccInput.readOnly]: !hasValidationErrors && !p.disabled && p.readOnly,
+ [ccInput.placeholder]: !!p.placeholder,
+ [ccInput.suffix]: slots.suffix,
+ [ccInput.prefix]: slots.prefix
+ }"
  :autocomplete="autocomplete"
  :disabled="disabled"
  :placeholder="placeholder"
  :readOnly="readOnly"
  v-bind="{ ...aria, ...$attrs, class: '' }"
  @blur="triggerValidation"
- :style="inputWithPrefixStyle"
  >
  <slot name="suffix" :inputElement="inputEl" />
  </div>

diff --git a/package.json b/package.json
@@ -52,9 +52,9 @@
  "dependencies": {
  "@lingui/core": "^4.7.0",
  "@warp-ds/core": "^1.1.1",
- "@warp-ds/css": "1.9.3",
+ "@warp-ds/css": "1.9.6",
  "@warp-ds/icons": "2.0.0",
- "@warp-ds/uno": "1.10.2",
+ "@warp-ds/uno": "1.12.0",
  "create-v-model": "^2.2.0",
  "dom-focus-lock": "^1.1.0",
  "element-collapse": "^1.1.0",