Remove explicit class prop (#608) (#608)

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]
 

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

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,

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,

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,