@khanacademy/wonder-blocks-icon-button 10.5.7 → 11.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-icon-button@
|
|
2
|
+
> @khanacademy/wonder-blocks-icon-button@11.0.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-icon-button
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-icon-button/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-icon-button
|
|
2
2
|
|
|
3
|
+
## 11.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [70d6c08]
|
|
8
|
+
- @khanacademy/wonder-blocks-tokens@14.1.3
|
|
9
|
+
- @khanacademy/wonder-blocks-clickable@8.0.5
|
|
10
|
+
- @khanacademy/wonder-blocks-icon@5.3.5
|
|
11
|
+
- @khanacademy/wonder-blocks-styles@0.2.37
|
|
12
|
+
- @khanacademy/wonder-blocks-typography@4.2.27
|
|
13
|
+
|
|
14
|
+
## 11.0.0
|
|
15
|
+
|
|
16
|
+
### Major Changes
|
|
17
|
+
|
|
18
|
+
- 0fd41cc: Replace style prop with styles object prop for ActivityIconButton
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- d36860e: Changes `ActivityIconButton` styling to allow longer labels in the same line.
|
|
23
|
+
|
|
3
24
|
## 10.5.7
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Link } from "react-router-dom-v5-compat";
|
|
3
|
-
import type { ActivityIconButtonActionType,
|
|
3
|
+
import type { ActivityIconButtonActionType, ActivityIconButtonProps } from "../util/icon-button.types";
|
|
4
4
|
type AriaLabelOnly = {
|
|
5
5
|
/**
|
|
6
6
|
* The alternative text for the icon button. Use `aria-label` for when
|
|
@@ -19,7 +19,7 @@ type LabelOnly = {
|
|
|
19
19
|
*/
|
|
20
20
|
label: string;
|
|
21
21
|
};
|
|
22
|
-
type Props =
|
|
22
|
+
type Props = ActivityIconButtonProps & (AriaLabelOnly | LabelOnly) & {
|
|
23
23
|
/**
|
|
24
24
|
* The action type of the button. This determines the visual style of the
|
|
25
25
|
* button.
|
package/dist/es/index.js
CHANGED
|
@@ -17,7 +17,7 @@ const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLi
|
|
|
17
17
|
|
|
18
18
|
const theme$2=iconButtonTheme.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};if(typeof icon!=="string"){return React.cloneElement(icon,{style:[iconStyle]})}switch(size){case"small":return jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsx(IconChooser,{size:size,icon:icon})})});const styles$2={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$2[buttonType]){return styles$2[buttonType]}const borderWidthKind=theme$2.root.border.width[kind];const outlineOffsetKind=theme$2.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",background:themeVariant.press.background,borderRadius:theme$2.root.border.radius.press,color:themeVariant.press.foreground,transition:"border-radius 0.1s ease-in-out"};const newStyles={default:{height:theme$2.root.sizing[size],width:theme$2.root.sizing[size],borderRadius:theme$2.root.border.radius.default,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,borderRadius:theme$2.root.border.radius.hover,color:themeVariant.hover.foreground,outline:kind==="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":active":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$2[buttonType]=StyleSheet.create(newStyles);return styles$2[buttonType]};
|
|
19
19
|
|
|
20
|
-
const ActivityIconButton=React.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",
|
|
20
|
+
const ActivityIconButton=React.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",styles:stylesProp,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";const iconElement=React.useMemo(()=>{if(typeof icon==="string"){return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}return icon},[icon]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxs(Fragment,{children:[jsx(View,{style:chonkyStyles,className:"chonky",children:iconElement}),hasVisibleLabel&&jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[buttonStyles.label,stylesProp?.label],children:label})]})})});const theme$1={root:{border:{width:{primary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},secondary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin}},radius:border.radius.radius_120},layout:{padding:{block:sizing.size_140,inline:sizing.size_200}},shadow:{y:{rest:"6px",hover:"8px",press:sizing.size_0}}},label:{color:{progressive:semanticColor.core.foreground.instructive.default,neutral:semanticColor.core.foreground.neutral.default,disabled:semanticColor.core.foreground.disabled.default},layout:{inlineSize:sizing.size_640}}};const styles$1={};const _generateStyles$1=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$1[buttonType]){return styles$1[buttonType]}const borderWidthKind=theme$1.root.border.width[kind];const themeVariant=semanticColor.chonky[actionType];const disabledState=semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme$1.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme$1.root.shadow.y.rest})`};const newStyles={button:{borderRadius:theme$1.root.border.radius,color:theme$1.label.color[actionType],flexDirection:"column",gap:sizing.size_020,maxInlineSize:200,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme$1.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme$1.root.shadow.y.hover} - ${theme$1.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},disabled:{cursor:"not-allowed",color:theme$1.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{borderRadius:theme$1.root.border.radius,marginBlockEnd:theme$1.root.shadow.y.rest,paddingBlock:theme$1.root.layout.padding.block,paddingInline:theme$1.root.layout.padding.inline,inlineSize:theme$1.label.layout.inlineSize,justifyContent:"center",alignItems:"center",background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled,label:{margin:0,textAlign:"center",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:"2",overflow:"hidden",wordBreak:"break-word"}};styles$1[buttonType]=StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
21
21
|
|
|
22
22
|
const ConversationIconButton=React.forwardRef(function ConversationIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles(actionType,!!disabled,kind);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:typeof icon!=="string"?React.cloneElement(icon,{style:[staticStyles.icon]}):jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon})})});const staticStyles=StyleSheet.create({icon:{width:sizing.size_160,height:sizing.size_160}});const styles={};const theme={root:{border:{radius:border.radius.radius_full,width:{primary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium},tertiary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium}}},layout:{padding:sizing.size_100},sizing:{default:sizing.size_360}}};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles[buttonType]){return styles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={padding:theme.root.layout.padding,borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={border:`${borderWidthKind.press} solid ${themeVariant.press.border}`,background:themeVariant.press.background,color:themeVariant.press.foreground,padding:`calc(${theme.root.layout.padding} - 1px)`};const newStyles={default:{borderRadius:theme.root.border.radius,padding:theme.root.layout.padding,alignSelf:"center",justifySelf:"center",borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{padding:theme.root.layout.padding,background:themeVariant.hover.background,color:themeVariant.hover.foreground,border:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
|
|
23
23
|
|
package/dist/index.js
CHANGED
|
@@ -41,7 +41,7 @@ const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore
|
|
|
41
41
|
|
|
42
42
|
const theme$2=iconButtonTheme.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};if(typeof icon!=="string"){return React__namespace.cloneElement(icon,{style:[iconStyle]})}switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React__namespace.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsxRuntime.jsx(IconChooser,{size:size,icon:icon})})});const styles$2={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$2[buttonType]){return styles$2[buttonType]}const borderWidthKind=theme$2.root.border.width[kind];const outlineOffsetKind=theme$2.root.border.offset[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",background:themeVariant.press.background,borderRadius:theme$2.root.border.radius.press,color:themeVariant.press.foreground,transition:"border-radius 0.1s ease-in-out"};const newStyles={default:{height:theme$2.root.sizing[size],width:theme$2.root.sizing[size],borderRadius:theme$2.root.border.radius.default,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,borderRadius:theme$2.root.border.radius.hover,color:themeVariant.hover.foreground,outline:kind==="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":active":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$2[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$2[buttonType]};
|
|
43
43
|
|
|
44
|
-
const ActivityIconButton=React__namespace.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",
|
|
44
|
+
const ActivityIconButton=React__namespace.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",styles:stylesProp,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";const iconElement=React__namespace.useMemo(()=>{if(typeof icon==="string"){return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}return icon},[icon]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:iconElement}),hasVisibleLabel&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[buttonStyles.label,stylesProp?.label],children:label})]})})});const theme$1={root:{border:{width:{primary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},secondary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin}},radius:wonderBlocksTokens.border.radius.radius_120},layout:{padding:{block:wonderBlocksTokens.sizing.size_140,inline:wonderBlocksTokens.sizing.size_200}},shadow:{y:{rest:"6px",hover:"8px",press:wonderBlocksTokens.sizing.size_0}}},label:{color:{progressive:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,neutral:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:wonderBlocksTokens.semanticColor.core.foreground.disabled.default},layout:{inlineSize:wonderBlocksTokens.sizing.size_640}}};const styles$1={};const _generateStyles$1=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$1[buttonType]){return styles$1[buttonType]}const borderWidthKind=theme$1.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.chonky[actionType];const disabledState=wonderBlocksTokens.semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme$1.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme$1.root.shadow.y.rest})`};const newStyles={button:{borderRadius:theme$1.root.border.radius,color:theme$1.label.color[actionType],flexDirection:"column",gap:wonderBlocksTokens.sizing.size_020,maxInlineSize:200,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme$1.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme$1.root.shadow.y.hover} - ${theme$1.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",color:theme$1.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{borderRadius:theme$1.root.border.radius,marginBlockEnd:theme$1.root.shadow.y.rest,paddingBlock:theme$1.root.layout.padding.block,paddingInline:theme$1.root.layout.padding.inline,inlineSize:theme$1.label.layout.inlineSize,justifyContent:"center",alignItems:"center",background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled,label:{margin:0,textAlign:"center",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:"2",overflow:"hidden",wordBreak:"break-word"}};styles$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
45
45
|
|
|
46
46
|
const ConversationIconButton=React__namespace.forwardRef(function ConversationIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles(actionType,!!disabled,kind);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:typeof icon!=="string"?React__namespace.cloneElement(icon,{style:[staticStyles.icon]}):jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon})})});const staticStyles=aphrodite.StyleSheet.create({icon:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160}});const styles={};const theme={root:{border:{radius:wonderBlocksTokens.border.radius.radius_full,width:{primary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium},tertiary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium}}},layout:{padding:wonderBlocksTokens.sizing.size_100},sizing:{default:wonderBlocksTokens.sizing.size_360}}};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles[buttonType]){return styles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={padding:theme.root.layout.padding,borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={border:`${borderWidthKind.press} solid ${themeVariant.press.border}`,background:themeVariant.press.background,color:themeVariant.press.foreground,padding:`calc(${theme.root.layout.padding} - 1px)`};const newStyles={default:{borderRadius:theme.root.border.radius,padding:theme.root.layout.padding,alignSelf:"center",justifySelf:"center",borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{padding:theme.root.layout.padding,background:themeVariant.hover.background,color:themeVariant.hover.foreground,border:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
|
|
47
47
|
|
|
@@ -121,3 +121,16 @@ export type IconButtonProps = BaseIconButtonProps & {
|
|
|
121
121
|
size?: IconButtonSize;
|
|
122
122
|
};
|
|
123
123
|
export type IconButtonRef = typeof Link | HTMLButtonElement | HTMLAnchorElement;
|
|
124
|
+
export type ActivityIconButtonProps = Omit<BaseIconButtonProps, "style"> & {
|
|
125
|
+
/**
|
|
126
|
+
* Custom styles for the elements in the ActivityIconButton component.
|
|
127
|
+
* - `root`: Styles the root element (button)
|
|
128
|
+
* - `box`: Styles the "chonky" box element
|
|
129
|
+
* - `label`: Styles the text in the button
|
|
130
|
+
*/
|
|
131
|
+
styles?: {
|
|
132
|
+
root?: StyleType;
|
|
133
|
+
box?: StyleType;
|
|
134
|
+
label?: StyleType;
|
|
135
|
+
};
|
|
136
|
+
};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "
|
|
6
|
+
"version": "11.0.1",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"./styles.css": "./dist/css/vars.css"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@khanacademy/wonder-blocks-clickable": "8.0.
|
|
31
|
+
"@khanacademy/wonder-blocks-clickable": "8.0.5",
|
|
32
32
|
"@khanacademy/wonder-blocks-core": "12.4.2",
|
|
33
|
-
"@khanacademy/wonder-blocks-icon": "5.3.
|
|
34
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
33
|
+
"@khanacademy/wonder-blocks-icon": "5.3.5",
|
|
34
|
+
"@khanacademy/wonder-blocks-styles": "0.2.37",
|
|
35
|
+
"@khanacademy/wonder-blocks-tokens": "14.1.3",
|
|
35
36
|
"@khanacademy/wonder-blocks-theming": "4.0.2",
|
|
36
|
-
"@khanacademy/wonder-blocks-
|
|
37
|
-
"@khanacademy/wonder-blocks-typography": "4.2.26"
|
|
37
|
+
"@khanacademy/wonder-blocks-typography": "4.2.27"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"aphrodite": "^1.2.5",
|