fix(VStepper): add missing hover and focus styling

vuetifyjs · May 8, 2024 · b45ab1a · b45ab1a
1 parent da6d5f3
commit b45ab1a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass
@@ -8,12 +8,16 @@
     align-self: stretch
     display: inline-flex
     flex: none
+    outline: none
     opacity: $stepper-item-opacity
     padding: $stepper-item-padding
+    position: relative
     transition-duration: $stepper-item-transition-duration
     transition-property: $stepper-item-transition-property
     transition-timing-function: $stepper-item-transition-timing-function
 
+    @include tools.states('.v-stepper-item__overlay')
+
     .v-stepper--non-linear &
       opacity: var(--v-high-emphasis-opacity)
 
@@ -74,3 +78,14 @@
 
     .v-stepper--mobile &
       display: none
+
+  .v-stepper-item__overlay
+    background-color: currentColor
+    border-radius: inherit
+    opacity: 0
+    transition: opacity .2s ease-in-out
+
+  .v-stepper-item__overlay,
+  .v-stepper-item__underlay
+    @include tools.absolute()
+    pointer-events: none
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -7,6 +7,7 @@ import { VIcon } from '@/components/VIcon/VIcon'
 
 // Composables
 import { makeGroupItemProps, useGroupItem } from '@/composables/group'
+import { genOverlays } from '@/composables/variant'
 
 // Directives
 import { Ripple } from '@/directives/ripple'
@@ -85,6 +86,7 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
     const group = useGroupItem(props, VStepperSymbol, true)
     const step = computed(() => group?.value.value ?? props.value)
     const isValid = computed(() => props.rules.every(handler => handler() === true))
+    const isClickable = computed(() => !props.disabled && props.editable)
     const canEdit = computed(() => !props.disabled && props.editable)
     const hasError = computed(() => props.error || !isValid.value)
     const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value))
@@ -141,6 +143,8 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
           ]}
           onClick={ onClick }
         >
+          { isClickable.value && genOverlays(true, 'v-stepper-item') }
+
           <VAvatar
             key="stepper-avatar"
             class="v-stepper-item__avatar"