@khanacademy/wonder-blocks-icon-button 11.3.3 → 11.3.5
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.
- package/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +30 -0
- package/dist/css/vars.css +6 -3
- package/dist/es/index.js +5 -5
- package/dist/index.js +4 -4
- package/dist/theme/default.d.ts +7 -0
- package/dist/theme/index.d.ts +7 -0
- package/dist/theme/syl-dark.d.ts +7 -0
- package/dist/theme/thunderblocks.d.ts +7 -0
- package/package.json +6 -6
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-icon-button@11.3.
|
|
2
|
+
> @khanacademy/wonder-blocks-icon-button@11.3.5 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,35 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-icon-button
|
|
2
2
|
|
|
3
|
+
## 11.3.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [f13552a]
|
|
8
|
+
- @khanacademy/wonder-blocks-tokens@16.8.0
|
|
9
|
+
- @khanacademy/wonder-blocks-clickable@8.2.4
|
|
10
|
+
- @khanacademy/wonder-blocks-icon@5.3.18
|
|
11
|
+
- @khanacademy/wonder-blocks-styles@0.2.48
|
|
12
|
+
- @khanacademy/wonder-blocks-typography@4.3.8
|
|
13
|
+
|
|
14
|
+
## 11.3.4
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- 9773405: ActivityIconButton: Add component theme token for the label to accommodate syl-dark
|
|
19
|
+
- Updated dependencies [ddcaaeb]
|
|
20
|
+
- Updated dependencies [0907f64]
|
|
21
|
+
- Updated dependencies [9773405]
|
|
22
|
+
- Updated dependencies [9773405]
|
|
23
|
+
- Updated dependencies [022e775]
|
|
24
|
+
- Updated dependencies [e181c15]
|
|
25
|
+
- Updated dependencies [c033245]
|
|
26
|
+
- Updated dependencies [a2bbc0a]
|
|
27
|
+
- @khanacademy/wonder-blocks-icon@5.3.17
|
|
28
|
+
- @khanacademy/wonder-blocks-tokens@16.7.0
|
|
29
|
+
- @khanacademy/wonder-blocks-clickable@8.2.3
|
|
30
|
+
- @khanacademy/wonder-blocks-styles@0.2.47
|
|
31
|
+
- @khanacademy/wonder-blocks-typography@4.3.7
|
|
32
|
+
|
|
3
33
|
## 11.3.3
|
|
4
34
|
|
|
5
35
|
### Patch Changes
|
package/dist/css/vars.css
CHANGED
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
--wb-c-icon-button-iconButton-icon-sizing-xsmall: var(--wb-sizing-size_160);
|
|
21
21
|
--wb-c-icon-button-iconButton-icon-sizing-small: var(--wb-sizing-size_240);
|
|
22
22
|
--wb-c-icon-button-iconButton-icon-sizing-medium: var(--wb-sizing-size_240);
|
|
23
|
-
--wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_240);
|
|
23
|
+
--wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_240);
|
|
24
|
+
--wb-c-icon-button-activityIconButton-label-color-progressive: var(--wb-semanticColor-core-foreground-instructive-default);}
|
|
24
25
|
|
|
25
26
|
[data-wb-theme='syl-dark'] {--wb-c-icon-button-iconButton-root-border-offset-primary: var(--wb-border-width-medium);
|
|
26
27
|
--wb-c-icon-button-iconButton-root-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
|
|
@@ -44,7 +45,8 @@
|
|
|
44
45
|
--wb-c-icon-button-iconButton-icon-sizing-xsmall: var(--wb-sizing-size_120);
|
|
45
46
|
--wb-c-icon-button-iconButton-icon-sizing-small: var(--wb-sizing-size_120);
|
|
46
47
|
--wb-c-icon-button-iconButton-icon-sizing-medium: var(--wb-sizing-size_180);
|
|
47
|
-
--wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);
|
|
48
|
+
--wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);
|
|
49
|
+
--wb-c-icon-button-activityIconButton-label-color-progressive: var(--wb-semanticColor-core-foreground-neutral-strong);}
|
|
48
50
|
|
|
49
51
|
[data-wb-theme='thunderblocks'] {--wb-c-icon-button-iconButton-root-border-offset-primary: var(--wb-border-width-medium);
|
|
50
52
|
--wb-c-icon-button-iconButton-root-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
|
|
@@ -68,4 +70,5 @@
|
|
|
68
70
|
--wb-c-icon-button-iconButton-icon-sizing-xsmall: var(--wb-sizing-size_120);
|
|
69
71
|
--wb-c-icon-button-iconButton-icon-sizing-small: var(--wb-sizing-size_120);
|
|
70
72
|
--wb-c-icon-button-iconButton-icon-sizing-medium: var(--wb-sizing-size_180);
|
|
71
|
-
--wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);
|
|
73
|
+
--wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);
|
|
74
|
+
--wb-c-icon-button-activityIconButton-label-color-progressive: var(--wb-semanticColor-core-foreground-instructive-default);}
|
package/dist/es/index.js
CHANGED
|
@@ -3,21 +3,21 @@ import * as React from 'react';
|
|
|
3
3
|
import { StyleSheet } from 'aphrodite';
|
|
4
4
|
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
5
5
|
import { focusStyles } from '@khanacademy/wonder-blocks-styles';
|
|
6
|
-
import { border, sizing,
|
|
6
|
+
import { border, sizing, semanticColor, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
|
|
7
7
|
import { Link, useInRouterContext } from 'react-router-dom-v5-compat';
|
|
8
8
|
import { addStyle, keys, View } from '@khanacademy/wonder-blocks-core';
|
|
9
9
|
import { isClientSideUrl } from '@khanacademy/wonder-blocks-clickable';
|
|
10
10
|
import { BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
11
11
|
|
|
12
|
-
var themeDefault = {iconButton:{root:{border:{offset:{primary:border.width.medium,secondary:`calc(-1 * ${border.width.medium})`,tertiary:`calc(-1 * ${border.width.medium})`},width:{primary:{default:border.width.none,hover:border.width.medium,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.medium,press:border.width.medium},tertiary:{default:border.width.none,hover:border.width.medium,press:border.width.medium}},radius:{default:border.radius.radius_040,hover:border.radius.radius_040,press:border.radius.radius_040}},sizing:{xsmall:sizing.size_240,small:sizing.size_320,medium:sizing.size_400,large:sizing.size_480}},icon:{sizing:{xsmall:sizing.size_160,small:sizing.size_240,medium:sizing.size_240,large:sizing.size_240}}}};
|
|
12
|
+
var themeDefault = {iconButton:{root:{border:{offset:{primary:border.width.medium,secondary:`calc(-1 * ${border.width.medium})`,tertiary:`calc(-1 * ${border.width.medium})`},width:{primary:{default:border.width.none,hover:border.width.medium,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.medium,press:border.width.medium},tertiary:{default:border.width.none,hover:border.width.medium,press:border.width.medium}},radius:{default:border.radius.radius_040,hover:border.radius.radius_040,press:border.radius.radius_040}},sizing:{xsmall:sizing.size_240,small:sizing.size_320,medium:sizing.size_400,large:sizing.size_480}},icon:{sizing:{xsmall:sizing.size_160,small:sizing.size_240,medium:sizing.size_240,large:sizing.size_240}}},activityIconButton:{label:{color:{progressive:semanticColor.core.foreground.instructive.default}}}};
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var themeTokens = mapValuesToCssVars(themeDefault,"--wb-c-icon-button-");
|
|
15
15
|
|
|
16
16
|
const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const IconButtonUnstyled=React.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,kind,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=useInRouterContext();const handleKeyDown=React.useCallback(e=>{const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){e.preventDefault();if(!disabled){onPress?.(true);}}},[disabled,href,onPress]);const handleKeyUp=React.useCallback(e=>{const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){if(!disabled&&restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[disabled,href,onPress,restProps]);const commonProps={"data-testid":testId,"data-kind":kind,style:[styles$4.shared,style],onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,...restProps};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,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:children})}});const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",padding:0,cursor:"pointer",border:"none",outline:"none",textDecoration:"none",background:"none",margin:0,touchAction:"manipulation"}});
|
|
17
17
|
|
|
18
|
-
const theme$2=
|
|
18
|
+
const theme$2=themeTokens.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,kind:kind,onPress:handlePress,ref:ref,style:styles,type:type,children:jsx(IconChooser,{size:size,icon:icon})})});const styles$3={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$3[buttonType]){return styles$3[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$3[buttonType]=StyleSheet.create(newStyles);return styles$3[buttonType]};
|
|
19
19
|
|
|
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,kind:kind,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:
|
|
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,kind:kind,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:themeTokens.activityIconButton.label.color.progressive,neutral:semanticColor.core.foreground.neutral.default,disabled:semanticColor.core.foreground.disabled.default},layout:{inlineSize:sizing.size_640}}};const styles$2={};const _generateStyles$1=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$2[buttonType]){return styles$2[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$2[buttonType]=StyleSheet.create(newStyles);return styles$2[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,kind:kind,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$1={};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$1[buttonType]){return styles$1[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$1[buttonType]=StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
23
23
|
|
package/dist/index.js
CHANGED
|
@@ -33,15 +33,15 @@ function _interopNamespace(e) {
|
|
|
33
33
|
|
|
34
34
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
35
35
|
|
|
36
|
-
var themeDefault = {iconButton:{root:{border:{offset:{primary:wonderBlocksTokens.border.width.medium,secondary:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`,tertiary:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`},width:{primary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},tertiary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium}},radius:{default:wonderBlocksTokens.border.radius.radius_040,hover:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},sizing:{xsmall:wonderBlocksTokens.sizing.size_240,small:wonderBlocksTokens.sizing.size_320,medium:wonderBlocksTokens.sizing.size_400,large:wonderBlocksTokens.sizing.size_480}},icon:{sizing:{xsmall:wonderBlocksTokens.sizing.size_160,small:wonderBlocksTokens.sizing.size_240,medium:wonderBlocksTokens.sizing.size_240,large:wonderBlocksTokens.sizing.size_240}}}};
|
|
36
|
+
var themeDefault = {iconButton:{root:{border:{offset:{primary:wonderBlocksTokens.border.width.medium,secondary:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`,tertiary:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`},width:{primary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},tertiary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium}},radius:{default:wonderBlocksTokens.border.radius.radius_040,hover:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},sizing:{xsmall:wonderBlocksTokens.sizing.size_240,small:wonderBlocksTokens.sizing.size_320,medium:wonderBlocksTokens.sizing.size_400,large:wonderBlocksTokens.sizing.size_480}},icon:{sizing:{xsmall:wonderBlocksTokens.sizing.size_160,small:wonderBlocksTokens.sizing.size_240,medium:wonderBlocksTokens.sizing.size_240,large:wonderBlocksTokens.sizing.size_240}}},activityIconButton:{label:{color:{progressive:wonderBlocksTokens.semanticColor.core.foreground.instructive.default}}}};
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var themeTokens = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-icon-button-");
|
|
39
39
|
|
|
40
40
|
const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const IconButtonUnstyled=React__namespace.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,kind,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const handleKeyDown=React__namespace.useCallback(e=>{const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){e.preventDefault();if(!disabled){onPress?.(true);}}},[disabled,href,onPress]);const handleKeyUp=React__namespace.useCallback(e=>{const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){if(!disabled&&restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[disabled,href,onPress,restProps]);const commonProps={"data-testid":testId,"data-kind":kind,style:[styles$4.shared,style],onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,...restProps};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,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:children})}});const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",padding:0,cursor:"pointer",border:"none",outline:"none",textDecoration:"none",background:"none",margin:0,touchAction:"manipulation"}});
|
|
41
41
|
|
|
42
|
-
const theme$2=
|
|
42
|
+
const theme$2=themeTokens.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,kind:kind,onPress:handlePress,ref:ref,style:styles,type:type,children:jsxRuntime.jsx(IconChooser,{size:size,icon:icon})})});const styles$3={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$3[buttonType]){return styles$3[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$3[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$3[buttonType]};
|
|
43
43
|
|
|
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,kind:kind,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:
|
|
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,kind:kind,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:themeTokens.activityIconButton.label.color.progressive,neutral:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:wonderBlocksTokens.semanticColor.core.foreground.disabled.default},layout:{inlineSize:wonderBlocksTokens.sizing.size_640}}};const styles$2={};const _generateStyles$1=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$2[buttonType]){return styles$2[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$2[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$2[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,kind:kind,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$1={};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$1[buttonType]){return styles$1[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$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
47
47
|
|
package/dist/theme/default.d.ts
CHANGED
package/dist/theme/index.d.ts
CHANGED
package/dist/theme/syl-dark.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "11.3.
|
|
6
|
+
"version": "11.3.5",
|
|
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.2.4",
|
|
31
32
|
"@khanacademy/wonder-blocks-core": "12.4.4",
|
|
32
|
-
"@khanacademy/wonder-blocks-
|
|
33
|
-
"@khanacademy/wonder-blocks-
|
|
34
|
-
"@khanacademy/wonder-blocks-styles": "0.2.46",
|
|
33
|
+
"@khanacademy/wonder-blocks-icon": "5.3.18",
|
|
34
|
+
"@khanacademy/wonder-blocks-styles": "0.2.48",
|
|
35
35
|
"@khanacademy/wonder-blocks-theming": "4.1.0",
|
|
36
|
-
"@khanacademy/wonder-blocks-
|
|
37
|
-
"@khanacademy/wonder-blocks-
|
|
36
|
+
"@khanacademy/wonder-blocks-tokens": "16.8.0",
|
|
37
|
+
"@khanacademy/wonder-blocks-typography": "4.3.8"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"aphrodite": "^1.2.5",
|