fix: Updated ButtonColors interface to deprecated focusRing from focus (

#2906)

Fixes: #2905  

This fixes a TS error in buttons that wouldn't allow the update of the focusRing styles through the colors prop. Also, deprecated the use of focusRing within focus in the colors prop on buttons and added support for boxShadowInner and boxShadowOuter within focus in colors prop.

[category:Components]

Release Note:
Deprecated the use of focusRing within focus in the colors prop on buttons as this does not work with our current styling methods. Added support for boxShadowInner and boxShadowOuter within focus in colors prop.

modules/docs/lib/Value.tsx

@@ -8,6 +8,7 @@ import {MdxJSToJSX} from './MDXElements';
 import {Table} from './Table';
 import {capitalize, IndentLevelContext, RenderContext, indent} from './widgetUtils';
 import {DescriptionTooltip} from './DescriptionTooltip';
+import {colors} from '@workday/canvas-kit-react/tokens';
 
 const widgets: Record<string, React.FC<ValueProps>> = {};
 
@@ -52,18 +53,19 @@ export const PropertiesInline = ({properties}: {properties: types.ObjectProperty
           <React.Fragment key={index}>
             <br />
             {indent(level + 1)}
-            {p.description ? (
+            {p.description || p.tags.deprecated ? (
               <DescriptionTooltip
                 type="describe"
                 style={{maxWidth: '50em'}}
-                title={<MdxJSToJSX>{p.description}</MdxJSToJSX>}
+                title={<MdxJSToJSX>{p.description || p.tags.deprecated}</MdxJSToJSX>}
               >
                 <span
                   className="token property"
                   style={{
                     cursor: 'pointer',
-                    textDecoration: 'underline',
+                    textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                     textDecorationStyle: 'dotted',
+                    color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
                   }}
                 >
                   {p.name}

modules/react/button/lib/types.ts

@@ -16,7 +16,18 @@ export interface ButtonColors {
   hover?: ButtonStateColors;
   active?: ButtonStateColors;
   focus?: ButtonStateColors & {
+    /**
+     * @deprecated This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution.
+     */
     focusRing?: CSSObject;
+    /**
+     * Updates the color of the inner `box-shadow` within a focus ring.
+     */
+    boxShadowInner?: string;
+    /**
+     * Updates the color of the outer `box-shadow` within a focus ring.
+     */
+    boxShadowOuter?: string;
   };
   disabled?: ButtonStateColors;
 }

modules/react/button/stories/button/examples/CustomStyles.tsx

@@ -20,7 +20,10 @@ const getDropdownColors = () => {
       label: colors.frenchVanilla100,
     },
     active: {},
-    focus: {},
+    focus: {
+      boxShadowInner: colors.berrySmoothie200,
+      boxShadowOuter: colors.berrySmoothie400,
+    },
     disabled: {},
   };
 };