From de6fbd4931edc0ed9546b6b3234f58e49b2b8adb Mon Sep 17 00:00:00 2001
From: Ryan Johnston <ryan@magic.nz>
Date: Thu, 10 Jun 2021 21:24:12 +1200
Subject: [PATCH] Remove explicit class prop (#608) (#608)

---
 CHANGELOG.md                                                  | 1 +
 packages/@headlessui-vue/src/components/listbox/listbox.ts    | 4 +---
 packages/@headlessui-vue/src/components/menu/menu.ts          | 4 +---
 .../@headlessui-vue/src/components/radio-group/radio-group.ts | 4 +---
 packages/@headlessui-vue/src/components/switch/switch.ts      | 3 ---
 5 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c0d323..7c747a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve `aria-expanded` logic ([#592](https://github.com/tailwindlabs/headlessui/pull/592))
 - Remove undocumented `:className` prop ([#607](https://github.com/tailwindlabs/headlessui/pull/607))
 - Improve types for `Listbox` component ([#576](https://github.com/tailwindlabs/headlessui/pull/576))
+- Remove explicit `:class` prop ([#608](https://github.com/tailwindlabs/headlessui/pull/608))
 
 ## [Unreleased - Vue]
 
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
index 0dca2f4..00173b8 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.ts
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -472,7 +472,6 @@ export let ListboxOption = defineComponent({
     as: { type: [Object, String], default: 'li' },
     value: { type: [Object, String, Number, Boolean] },
     disabled: { type: Boolean, default: false },
-    class: { type: [String, Function], required: false },
   },
   setup(props, { slots, attrs }) {
     let api = useListboxContext('ListboxOption')
@@ -546,13 +545,12 @@ export let ListboxOption = defineComponent({
     }
 
     return () => {
-      let { disabled, class: defaultClass } = props
+      let { disabled } = props
       let slot = { active: active.value, selected: selected.value, disabled }
       let propsWeControl = {
         id,
         role: 'option',
         tabIndex: disabled === true ? undefined : -1,
-        class: defaultClass,
         'aria-disabled': disabled === true ? true : undefined,
         'aria-selected': selected.value === true ? selected.value : undefined,
         disabled: undefined, // Never forward the `disabled` prop
diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
index 75e9630..837d67d 100644
--- a/packages/@headlessui-vue/src/components/menu/menu.ts
+++ b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -411,7 +411,6 @@ export let MenuItem = defineComponent({
   props: {
     as: { type: [Object, String], default: 'template' },
     disabled: { type: Boolean, default: false },
-    class: { type: [String, Function], required: false },
   },
   setup(props, { slots, attrs }) {
     let api = useMenuContext('MenuItem')
@@ -465,13 +464,12 @@ export let MenuItem = defineComponent({
     }
 
     return () => {
-      let { disabled, class: defaultClass } = props
+      let { disabled } = props
       let slot = { active: active.value, disabled }
       let propsWeControl = {
         id,
         role: 'menuitem',
         tabIndex: disabled === true ? undefined : -1,
-        class: defaultClass,
         'aria-disabled': disabled === true ? true : undefined,
         onClick: handleClick,
         onFocus: handleFocus,
diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts
index 6750f82..e332b8e 100644
--- a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts
+++ b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts
@@ -232,10 +232,9 @@ export let RadioGroupOption = defineComponent({
     as: { type: [Object, String], default: 'div' },
     value: { type: [Object, String, Number, Boolean] },
     disabled: { type: Boolean, default: false },
-    class: { type: [String, Function], required: false },
   },
   render() {
-    let { value, disabled, class: defaultClass, ...passThroughProps } = this.$props
+    let { value, disabled, ...passThroughProps } = this.$props
 
     let slot = {
       checked: this.checked,
@@ -247,7 +246,6 @@ export let RadioGroupOption = defineComponent({
       id: this.id,
       ref: 'el',
       role: 'radio',
-      class: defaultClass,
       'aria-checked': this.checked ? 'true' : 'false',
       'aria-labelledby': this.labelledby,
       'aria-describedby': this.describedby,
diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts
index b9db0d4..d0ef859 100644
--- a/packages/@headlessui-vue/src/components/switch/switch.ts
+++ b/packages/@headlessui-vue/src/components/switch/switch.ts
@@ -61,11 +61,9 @@ export let Switch = defineComponent({
   props: {
     as: { type: [Object, String], default: 'button' },
     modelValue: { type: Boolean, default: false },
-    class: { type: [String, Function], required: false },
   },
   render() {
     let api = inject(GroupContext, null)
-    let { class: defaultClass } = this.$props
 
     let slot = { checked: this.$props.modelValue }
     let propsWeControl = {
@@ -73,7 +71,6 @@ export let Switch = defineComponent({
       ref: api === null ? undefined : api.switchRef,
       role: 'switch',
       tabIndex: 0,
-      class: defaultClass,
       'aria-checked': this.$props.modelValue,
       'aria-labelledby': this.labelledby,
       'aria-describedby': this.describedby,