@khanacademy/wonder-blocks-button 11.3.2 → 11.3.4

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-button@11.3.2 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-button
+> @khanacademy/wonder-blocks-button@11.3.4 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-button
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-button/dist/css

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-button
 
+## 11.3.4
+
+### Patch Changes
+
+- 12e04c3: Update component documentation for the `disabled` props to include details about `aria-disabled` being set internally to keep an element focusable while in a disabled state
+- Updated dependencies [12e04c3]
+    - @khanacademy/wonder-blocks-clickable@8.1.3
+
+## 11.3.3
+
+### Patch Changes
+
+- 61d61a9: Button: Removes unnecessary aria-hidden on start icon. This opens up the option
+  to add an accessible name to the icon if needed. By default, the start icon
+  isn't included in the accessibility tree because PhosphorIcon renders a `span`
+  and needs `role="image"` and the `aria-label` set explicitly.
+
 ## 11.3.2
 
 ### Patch Changes

package/dist/components/activity-button.d.ts

@@ -34,24 +34,7 @@ export declare const ActivityButton: React.ForwardRefExoticComponent<Partial<Omi
     type?: "submit";
     className?: string;
     onClick?: (e: React.SyntheticEvent) => unknown;
-    onMouseDown?: (e: React.MouseEvent /**
-     * `ActivityButton` is a button that is used for actions in the context of
-     * learner activities. It uses a "chonky" design, which is a more playful and
-     * engaging design that is suitable for learner activities.
-     *
-     * ```tsx
-     * import magnifyingGlassIcon from
-     * "@phosphor-icons/core/regular/magnifying-glass.svg";
-     * import {ActivityButton} from "@khanacademy/wonder-blocks-button";
-     *
-     * <ActivityButton
-     *     startIcon={magnifyingGlassIcon}
-     *     onClick={(e) => console.log("Hello, world!")}
-     * >
-     *  Hello, world!
-     * </ActivityButton>
-     * ```
-     */) => unknown;
+    onMouseDown?: (e: React.MouseEvent) => unknown;
     onMouseUp?: (e: React.MouseEvent) => unknown;
     onMouseEnter?: (e: React.MouseEvent) => unknown;
     onMouseLeave?: (e: React.MouseEvent) => unknown;

package/dist/es/index.js

@@ -14,7 +14,7 @@ const textUnderlineOffset=sizing.size_040;const theme$2={root:{border:{width:{pr
 
 var theme$1 = mapValuesToCssVars(theme$2,"--wb-c-button-");
 
-function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={"aria-hidden":true,style:[style,iconStyle],testId};const phosphorIconProps={...commonProps,color:"currentColor"};if(typeof icon!=="string"){return React.cloneElement(icon,commonProps)}switch(size){case"small":return jsx(PhosphorIcon,{...phosphorIconProps,size:"small",icon:icon});case"medium":default:return jsx(PhosphorIcon,{...phosphorIconProps,size:"medium",icon:icon})}}
+function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={style:[style,iconStyle],testId};const phosphorIconProps={...commonProps,color:"currentColor"};if(typeof icon!=="string"){return React.cloneElement(icon,commonProps)}switch(size){case"small":return jsx(PhosphorIcon,{...phosphorIconProps,size:"small",icon:icon});case"medium":default:return jsx(PhosphorIcon,{...phosphorIconProps,size:"medium",icon:icon})}}
 
 const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const ButtonUnstyled=React.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,id:id,role:"button",style:[styles$2.reset,style],...restProps};const inRouterContext=useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsx(StyledButton,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$2=StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});
 

package/dist/index.js

@@ -38,7 +38,7 @@ const textUnderlineOffset=wonderBlocksTokens.sizing.size_040;const theme$2={root
 
 var theme$1 = wonderBlocksTokens.mapValuesToCssVars(theme$2,"--wb-c-button-");
 
-function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={"aria-hidden":true,style:[style,iconStyle],testId};const phosphorIconProps={...commonProps,color:"currentColor"};if(typeof icon!=="string"){return React__namespace.cloneElement(icon,commonProps)}switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...phosphorIconProps,size:"small",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...phosphorIconProps,size:"medium",icon:icon})}}
+function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={style:[style,iconStyle],testId};const phosphorIconProps={...commonProps,color:"currentColor"};if(typeof icon!=="string"){return React__namespace.cloneElement(icon,commonProps)}switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...phosphorIconProps,size:"small",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...phosphorIconProps,size:"medium",icon:icon})}}
 
 const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const ButtonUnstyled=React__namespace.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,id:id,role:"button",style:[styles$2.reset,style],...restProps};const inRouterContext=reactRouterDomV5Compat.useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsxRuntime.jsx(StyledButton,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$2=aphrodite.StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});
 

package/dist/util/button.types.d.ts

@@ -46,6 +46,9 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
     kind?: ButtonKind;
     /**
      * Whether the button is disabled.
+     *
+     * Internally, the `aria-disabled` attribute will be set so that the
+     * element remains focusable and will be included in the tab order.
      */
     disabled?: boolean;
     /**

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "11.3.2",
+  "version": "11.3.4",
   "publishConfig": {
     "access": "public"
   },
@@ -28,7 +28,7 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.1.2",
+    "@khanacademy/wonder-blocks-clickable": "8.1.3",
     "@khanacademy/wonder-blocks-core": "12.4.3",
     "@khanacademy/wonder-blocks-icon": "5.3.7",
     "@khanacademy/wonder-blocks-progress-spinner": "3.1.44",