feat(VColorPicker): add hide-eye-dropper prop

closes #19154
resolves #19150

Author: J-Sek

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

@@ -5,6 +5,7 @@
     "eyeDropperIcon": "Icon used to trigger EyeDropper API.",
     "flat": "Removes elevation.",
     "hideCanvas": "Hides canvas.",
+    "hideEyeDropper": "Hides eyedropper icon.",
     "hideSliders": "Hides sliders.",
     "hideInputs": "Hides inputs.",
     "hideModeSwitch": "Hides mode switch.",

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

@@ -53,6 +53,7 @@
   },
   "VColorPicker": {
     "props": {
+      "hideEyeDropper": "3.10.0",
       "eyeDropperIcon": "3.10.0",
       "hideTitle": "3.10.0"
     }

packages/vuetify/src/components/VColorPicker/VColorPicker.tsx

@@ -56,7 +56,7 @@ export const makeVColorPickerProps = propsFactory({
   },
 
   ...makeVPickerProps({ hideHeader: true }),
-  ...pick(makeVColorPickerPreviewProps(), ['eyeDropperIcon']),
+  ...pick(makeVColorPickerPreviewProps(), ['hideEyeDropper', 'eyeDropperIcon']),
 }, 'VColorPicker')
 
 export const VColorPicker = defineComponent({
@@ -173,6 +173,7 @@ export const VColorPicker = defineComponent({
                         onUpdate:color={ updateColor }
                         hideAlpha={ !mode.value.endsWith('a') }
                         disabled={ props.disabled }
+                        hideEyeDropper={ props.hideEyeDropper }
                         eyeDropperIcon={ props.eyeDropperIcon }
                       />
                     )}

packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx

@@ -33,6 +33,7 @@ export const makeVColorPickerPreviewProps = propsFactory({
   },
   disabled: Boolean,
   hideAlpha: Boolean,
+  hideEyeDropper: Boolean,
   eyeDropperIcon: {
     type: IconValue,
     default: '$eyeDropper',
@@ -79,7 +80,7 @@ export const VColorPickerPreview = defineComponent({
         ]}
         style={ props.style }
       >
-        { SUPPORTS_EYE_DROPPER && (
+        { SUPPORTS_EYE_DROPPER && !props.hideEyeDropper && (
           <div class="v-color-picker-preview__eye-dropper" key="eyeDropper">
             <VBtn
               aria-label={ t('$vuetify.colorPicker.ariaLabel.eyedropper') }

packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.browser.tsx

@@ -1,9 +1,17 @@
 import { VColorPicker } from '../VColorPicker'
 
 // Utilities
-import { render, screen, userEvent } from '@test'
+import { generate, render, screen, userEvent } from '@test'
 import { within } from '@testing-library/vue'
 
+const stories = {
+  'Without canvas': <VColorPicker hideCanvas />,
+  'Without inputs': <VColorPicker hideInputs />,
+  'Without sliders': <VColorPicker hideSliders />,
+  Swatches: <VColorPicker showSwatches />,
+  'Without eyedropper': <VColorPicker hideEyeDropper />,
+}
+
 describe('VColorPicker', () => {
   it('should default to emitting hex value if no value is provided', async () => {
     const update = vi.fn()
@@ -167,4 +175,8 @@ describe('VColorPicker', () => {
     expect(update).toHaveBeenCalledTimes(1)
     expect(update).toHaveBeenCalledWith('#FF00CC')
   })
+
+  describe('Showcase', () => {
+    generate({ stories })
+  })
 })