fix(Button): avoid repetitive warnings (#758)

Author: tenphi

.changeset/light-suits-hammer.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Avoid repetitive warnings in Buttons.

.size-limit.cjs

@@ -20,14 +20,14 @@ module.exports = [
         }),
       );
     },
-    limit: '285kB',
+    limit: '286kB',
   },
   {
     name: 'Tree shaking (just a Button)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '24 kB',
+    limit: '25 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',

src/components/actions/Button/Button.tsx

@@ -1,6 +1,7 @@
 import { FocusableRef } from '@react-types/shared';
 import { cloneElement, forwardRef, ReactElement, useMemo } from 'react';
 
+import { useWarn } from '../../../_internal/hooks/use-warn';
 import {
   DANGER_CLEAR_STYLES,
   DANGER_LINK_STYLES,
@@ -31,11 +32,9 @@ import { LoadingIcon } from '../../../icons';
 import {
   CONTAINER_STYLES,
   extractStyles,
-  Styles,
   tasty,
   TEXT_STYLES,
 } from '../../../tasty';
-import { accessibilityWarning } from '../../../utils/warnings';
 import { Text } from '../../content/Text';
 import { CubeActionProps } from '../Action/Action';
 import { useAction } from '../use-action';
@@ -225,24 +224,28 @@ export const Button = forwardRef(function Button(
 
   children = children || icon || rightIcon ? children : label;
 
-  if (!children) {
-    const specifiedLabel =
-      label ?? props['aria-label'] ?? props['aria-labelledby'];
-    if (icon) {
-      if (!specifiedLabel) {
-        accessibilityWarning(
-          'If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.',
-        );
-        label = 'Unnamed'; // fix to avoid warning in production
-      }
-    } else {
-      if (!specifiedLabel) {
-        accessibilityWarning(
-          'If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.',
-        );
-        label = 'Unnamed'; // fix to avoid warning in production
-      }
-    }
+  const specifiedLabel =
+    label ?? props['aria-label'] ?? props['aria-labelledby'];
+
+  // Warn about accessibility issues when button has no accessible label
+  useWarn(!children && icon && !specifiedLabel, {
+    key: ['button-icon-no-label', !!icon],
+    args: [
+      'accessibility issue:',
+      'If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.',
+    ],
+  });
+
+  useWarn(!children && !icon && !specifiedLabel, {
+    key: ['button-no-content-no-label', !!icon],
+    args: [
+      'accessibility issue:',
+      'If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.',
+    ],
+  });
+
+  if (!children && !specifiedLabel) {
+    label = 'Unnamed'; // fix to avoid warning in production
   }
 
   if (icon) {

src/data/item-themes.ts

@@ -52,9 +52,9 @@ export const DEFAULT_SECONDARY_STYLES: Styles = {
 
 export const DEFAULT_OUTLINE_STYLES: Styles = {
   border: {
-    '': '#dark.12',
+    '': true,
     focused: '#purple-text',
-    '[disabled] | disabled': '#border',
+    '[disabled] | disabled': true,
     ...(VALIDATION_STYLES.border as Record<string, string>),
   },
   fill: {

src/stories/BaseProperties.docs.mdx

@@ -65,8 +65,8 @@ All components support React Aria's labeling properties:
 ### Testing Properties
 ```jsx
 <Button
-  qa="submit-button"
-  qaVal="primary-action"
+  qa="SubmitButton"
+  qaVal="primary"
 >
   Submit
 </Button>

src/utils/warnings.ts

@@ -21,12 +21,6 @@ export function propDeprecationWarning(name, props, propList) {
   });
 }
 
-export function accessibilityWarning(...args) {
-  if (devMode) {
-    console.warn(`${PREFIX} accessibility issue:`, ...args);
-  }
-}
-
 export function warn(...args) {
   if (devMode) {
     console.warn(`${PREFIX}:`, ...args);