Migrate VisuallyHidden component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { VisuallyHiddenDefinition } from './definition';
 import { VisuallyHiddenProps } from './types';
-import styles from './VisuallyHidden.module.css';
-import clsx from 'clsx';
 
 /**
  * Visually hides content while keeping it accessible to screen readers.
@@ -30,16 +28,11 @@ import clsx from 'clsx';
  * @public
  */
 export const VisuallyHidden = (props: VisuallyHiddenProps) => {
-  const { classNames, cleanedProps } = useStyles(
+  const { ownProps, restProps } = useDefinition(
     VisuallyHiddenDefinition,
     props,
   );
-  const { className, ...rest } = cleanedProps;
+  const { classes } = ownProps;
 
-  return (
-    <div
-      className={clsx(classNames.root, styles[classNames.root], className)}
-      {...rest}
-    />
-  );
+  return <div className={classes.root} {...restProps} />;
 };

packages/ui/src/components/VisuallyHidden/definition.ts

@@ -14,14 +14,22 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { VisuallyHiddenOwnProps } from './types';
+import styles from './VisuallyHidden.module.css';
 
 /**
  * Component definition for VisuallyHidden
  * @public
  */
-export const VisuallyHiddenDefinition = {
-  classNames: {
-    root: 'bui-VisuallyHidden',
+export const VisuallyHiddenDefinition = defineComponent<VisuallyHiddenOwnProps>()(
+  {
+    styles,
+    classNames: {
+      root: 'bui-VisuallyHidden',
+    },
+    propDefs: {
+      className: {},
+    },
   },
-} as const satisfies ComponentDefinition;
+);

packages/ui/src/components/VisuallyHidden/index.ts

@@ -15,5 +15,5 @@
  */
 
 export { VisuallyHidden } from './VisuallyHidden';
-export type { VisuallyHiddenProps } from './types';
+export type { VisuallyHiddenOwnProps, VisuallyHiddenProps } from './types';
 export { VisuallyHiddenDefinition } from './definition';

packages/ui/src/components/VisuallyHidden/types.ts

@@ -14,13 +14,18 @@
  * limitations under the License.
  */
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+
+/** @public */
+export type VisuallyHiddenOwnProps = {
+  className?: string;
+};
 
 /**
  * Properties for {@link VisuallyHidden}
  *
  * @public
  */
-export interface VisuallyHiddenProps extends ComponentProps<'div'> {
-  children?: React.ReactNode;
-}
+export interface VisuallyHiddenProps
+  extends Omit<ComponentProps<'div'>, 'className'>,
+    VisuallyHiddenOwnProps {}