feat: add steps hover styles (#478)

lob · Apr 18, 2024 · 1849053 · 1849053
1 parent 181e27f
commit 1849053
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v2.0.38
+
+- Add hover styles to `<Steps />`
+- Fix clickbox on the `<TextInput />`
+
 ## v2.0.37
 
 - Revert `<TextInput />` changes

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.37",
+  "version": "2.0.38",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

diff --git a/src/components/Steps/Steps.vue b/src/components/Steps/Steps.vue
@@ -8,17 +8,21 @@
   >
     <template #item="{ active, index, label }">
       <span :class="['uic-steps-action', { active }]">
-        <span :class="['uic-steps-step', { icon: Boolean(stepIcons[index]) }]">
-          <Icon
-            v-if="stepIcons[index]"
-            :icon="stepIcons[index]"
-            data-testid="uic-steps-icon"
-          />
-          <template v-else>
-            {{ index + 1 }}
-          </template>
+        <span class="uic-steps-container">
+          <span
+            :class="['uic-steps-step', { icon: Boolean(stepIcons[index]) }]"
+          >
+            <Icon
+              v-if="stepIcons[index]"
+              :icon="stepIcons[index]"
+              data-testid="uic-steps-icon"
+            />
+            <template v-else>
+              {{ index + 1 }}
+            </template>
+          </span>
+          <span class="uic-steps-label">{{ label }}</span>
         </span>
-        <span class="uic-steps-label">{{ label }}</span>
         <Transition>
           <span v-if="active" class="uic-steps-active-indicator" />
         </Transition>
@@ -71,9 +75,18 @@ const stepIcons = computed<Record<number, IconName>>(() => {
 }
 .uic-steps-action {
   @apply relative;
+  @apply flex;
   @apply cursor-pointer;
+  @apply py-1;
+
+  &:hover > .uic-steps-container {
+    @apply bg-gray-25;
+  }
+}
+.uic-steps-container {
   @apply flex gap-2 items-center;
-  @apply py-4;
+  @apply px-3 py-2 my-2 rounded-xl;
+  @apply transition-colors;
 }
 .uic-steps-label {
   @apply type-small-600 text-gray-600;

diff --git a/src/components/TextInput/TextInput.vue b/src/components/TextInput/TextInput.vue
@@ -43,7 +43,7 @@
     <div
       data-testId="input-container"
       :class="[
-        'bg-white h-11 px-3 py-2 rounded flex items-center gap-2 border border-gray-200',
+        'bg-white h-11 rounded flex items-center gap-2 border border-gray-200',
         {
           'hover:border-gray-300 focus-within:border-[#2D2D2F] focus-within:hover:border-[#2D2D2F] focus-within:outline-black focus-within:outline-offset-1 focus-within:outline-1':
             !disabled && !readonly
@@ -57,6 +57,7 @@
       <div
         v-if="iconLeft"
         :class="[
+          'pl-3 py-2',
           modelValue && !disabled ? 'text-gray-800' : 'text-gray-500',
           { 'text-green-700': success },
           { 'text-red-600': error },
@@ -75,7 +76,7 @@
         :max="max"
         :pattern="pattern"
         :class="[
-          `w-full text-gray-800 type-small-400 caret-gray-300 placeholder-gray-200 placeholder:type-small-400 outline-none ${inputClass}`,
+          `w-full text-gray-800 type-small-400 caret-gray-300 placeholder-gray-200 placeholder:type-small-400 outline-none px-3 py-2 ${inputClass}`,
           { nonErrorAutofill: !disabled && !readonly },
           { truncate: withCopyButton },
           { 'bg-green-50 !placeholder-green-700': success },
@@ -101,6 +102,7 @@
       <button
         v-if="showClearButton && modelValue"
         :class="[
+          'pr-3 py-2',
           modelValue && !disabled ? 'text-gray-800' : 'text-gray-500',
           { 'text-green-700': success },
           { 'text-red-600': error },
@@ -120,6 +122,7 @@
       <div
         v-if="iconRight"
         :class="[
+          'pr-3 py-2',
           modelValue && !disabled ? 'text-gray-800' : 'text-gray-500',
           { 'text-green-700': success },
           { 'text-red-600': error },
@@ -131,7 +134,7 @@
       <button
         v-if="withCopyButton"
         type="button"
-        class="rounded-full px-3 h-7 type-xs-700 bg-black text-white hover:bg-gray-700 focus-within:outline-1 focus-visible:outline-black focus-visible:outline-offset-1 active:bg-gray-800 focus:bg-gray-800"
+        class="mr-3 my-2 rounded-full px-3 h-7 type-xs-700 bg-black text-white hover:bg-gray-700 focus-within:outline-1 focus-visible:outline-black focus-visible:outline-offset-1 active:bg-gray-800 focus:bg-gray-800"
         @click="copyToClipboard"
       >
         {{ copyButtonLabel }}