feat(VDivider): add gradient prop

Author: J-Sek

packages/api-generator/src/locale/en/VDivider.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "gradient": "Adds fading effect for both sides.",
     "inset": "Adds indentation (72px) for **normal** dividers, reduces max height for **vertical**.",
     "length": "Sets the dividers length. Default unit is px.",
     "thickness": "Sets the dividers thickness. Default unit is px.",

packages/docs/src/data/new-in.json

@@ -126,6 +126,11 @@
       "stickToTarget": "3.10.0"
     }
   },
+  "VDivider": {
+    "props": {
+      "gradient": "3.11.0"
+    }
+  },
   "VExpansionPanels": {
     "props": {
       "static": "3.4.0"

packages/docs/src/examples/v-divider/prop-gradient.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-container class="d-flex">
+    <div class="d-flex flex-column gr-4 py-8 flex-grow-1">
+      <v-divider class="my-3" color="red" style="height: 300px;" thickness="3" gradient></v-divider>
+      <v-divider thickness="3" gradient>OR</v-divider>
+      <v-divider
+        color="primary"
+        style="border-style: double"
+        thickness="12"
+        gradient
+      >
+        AND
+      </v-divider>
+    </div>
+    <div class="d-flex gc-8 px-8">
+      <v-divider color="red" thickness="3" gradient vertical></v-divider>
+      <v-divider thickness="3" gradient vertical>OR</v-divider>
+      <v-divider
+        color="primary"
+        style="border-style: double"
+        thickness="12"
+        gradient
+        vertical
+      >
+        AND
+      </v-divider>
+    </div>
+  </v-container>
+</template>

packages/docs/src/pages/en/components/dividers.md

@@ -53,6 +53,12 @@ Inset dividers are moved 72px to the right. This will cause them to line up with
 
 <ExamplesExample file="v-divider/prop-inset" />
 
+#### Gradient
+
+Easily enable fading effect with **gradient** prop for a modern look.
+
+<ExamplesExample file="v-divider/prop-gradient" />
+
 #### Vertical
 
 Vertical dividers give you more tools for unique layouts.

packages/vuetify/src/components/VDivider/VDivider.sass

@@ -33,6 +33,12 @@
         margin-top: $divider-vertical-inset-margin-top
         max-height: $divider-vertical-inset-max-height
 
+    &--gradient
+      mask-image: $divider-gradient-mask
+
+      &.v-divider--vertical
+        mask-image: $divider-vertical-gradient-mask
+
   .v-divider__content
     padding: $divider-content-padding
     text-wrap: nowrap
@@ -45,9 +51,16 @@
     align-items: center
     justify-content: center
 
+
     &--vertical
       flex-direction: column
       height: 100%
 
       .v-divider
         margin: 0 auto
+
+    &--gradient
+      mask-image: $divider-gradient-mask
+
+      &.v-divider__wrapper--vertical
+        mask-image: $divider-vertical-gradient-mask

packages/vuetify/src/components/VDivider/VDivider.tsx

@@ -15,6 +15,7 @@ type DividerStyles = Partial<Record<DividerKey, string>>
 
 export const makeVDividerProps = propsFactory({
   color: String,
+  gradient: Boolean,
   inset: Boolean,
   length: [Number, String],
   opacity: [Number, String],
@@ -53,6 +54,7 @@ export const VDivider = genericComponent()({
           class={[
             {
               'v-divider': true,
+              'v-divider--gradient': props.gradient && !slots.default,
               'v-divider--inset': props.inset,
               'v-divider--vertical': props.vertical,
             },
@@ -82,8 +84,9 @@ export const VDivider = genericComponent()({
           class={[
             'v-divider__wrapper',
             {
-              'v-divider__wrapper--vertical': props.vertical,
+              'v-divider__wrapper--gradient': props.gradient,
               'v-divider__wrapper--inset': props.inset,
+              'v-divider__wrapper--vertical': props.vertical,
             },
           ]}
         >

packages/vuetify/src/components/VDivider/_variables.scss

@@ -7,6 +7,7 @@ $divider-border-width: thin 0 0 0 !default;
 $divider-content-padding: 0 16px !default;
 $divider-content-vertical-padding: 4px 0 !default;
 $divider-flex: 1 1 100% !default;
+$divider-gradient-mask: linear-gradient(90deg, transparent, #000, transparent) !default;
 $divider-inset-margin: 72px !default;
 $divider-inset-max-width: calc(100% - #{$divider-inset-margin}) !default;
 $divider-margin: 8px !default;
@@ -15,6 +16,7 @@ $divider-vertical-border-width: 0 thin 0 0 !default;
 $divider-vertical-inset-margin-bottom: $divider-margin !default;
 $divider-vertical-inset-margin-top: $divider-margin !default;
 $divider-vertical-inset-max-height: calc(100% - #{$divider-margin * 2}) !default;
+$divider-vertical-gradient-mask: linear-gradient(0deg, transparent, #000, transparent) !default;
 $divider-vertical-margin-left: -1px !default;