feat(VPicker): add new prop divided

adds a divider between the header and controls

Author: johnleider

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

@@ -1,5 +1,6 @@
 {
   "props": {
+    "divided": "Adds a divider between the header and controls.",
     "landscape": "Puts the picker into landscape mode.",
     "hideHeader": "Hide the picker header."
   },

packages/vuetify/src/labs/VPicker/VPicker.sass

@@ -35,6 +35,12 @@
       &:not(:last-child)
         margin-inline-end: 8px
 
+  .v-picker--divided
+    .v-picker__header
+      border-bottom-color: $picker-border-color
+      border-bottom-style: $picker-border-style
+      border-bottom-width: $picker-border-thin-width
+
   .v-picker--landscape
     grid-template-areas: "title" "header body" "header body"
 

packages/vuetify/src/labs/VPicker/VPicker.tsx

@@ -23,6 +23,7 @@ export type VPickerSlots = {
 
 export const makeVPickerProps = propsFactory({
   bgColor: String,
+  divided: Boolean,
   landscape: Boolean,
   title: String,
   hideHeader: Boolean,
@@ -48,6 +49,7 @@ export const VPicker = genericComponent<VPickerSlots>()({
           class={[
             'v-picker',
             {
+              'v-picker--divided': props.divided,
               'v-picker--landscape': props.landscape,
               'v-picker--with-actions': !!slots.actions,
             },

packages/vuetify/src/labs/VPicker/_variables.scss

@@ -1,7 +1,11 @@
 @use '../../styles/settings';
 
 $picker-actions-padding: 0 12px 12px !default;
+$picker-border-color: settings.$border-color-root !default;
 $picker-border-radius: settings.$border-radius-root !default;
+$picker-border-radius: settings.$border-radius-root !default;
+$picker-border-style: settings.$border-style-root !default;
+$picker-border-thin-width: thin !default;
 $picker-elevation: 0 !default;
 $picker-inactive-btn-opacity: .6 !default;
 $picker-title-font-weight: 400 !default;