@khanacademy/wonder-blocks-button 11.5.4 → 11.6.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.
- package/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +32 -0
- package/dist/css/vars.css +44 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/theme/syl-dark.d.ts +100 -0
- package/package.json +8 -8
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-button@11.
|
|
2
|
+
> @khanacademy/wonder-blocks-button@11.6.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-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-button/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-button
|
|
2
2
|
|
|
3
|
+
## 11.6.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 40cb70f: Add `require-logical-properties-for-rtl` ESLint rule to `eslint-plugin-wonder-blocks` recommended config, and migrate all Wonder Blocks component source files to use CSS logical properties for improved RTL layout support.
|
|
8
|
+
- 40cb70f: Enable RTL logical-properties ESLint rule in recommended config
|
|
9
|
+
- Updated dependencies [40cb70f]
|
|
10
|
+
- Updated dependencies [40cb70f]
|
|
11
|
+
- Updated dependencies [c97ece4]
|
|
12
|
+
- @khanacademy/wonder-blocks-core@12.4.4
|
|
13
|
+
- @khanacademy/wonder-blocks-clickable@8.2.0
|
|
14
|
+
- @khanacademy/wonder-blocks-icon@5.3.15
|
|
15
|
+
- @khanacademy/wonder-blocks-progress-spinner@3.1.52
|
|
16
|
+
- @khanacademy/wonder-blocks-typography@4.3.5
|
|
17
|
+
|
|
18
|
+
## 11.6.0
|
|
19
|
+
|
|
20
|
+
### Minor Changes
|
|
21
|
+
|
|
22
|
+
- 27a211d: Add support for SYL Dark theme
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- Updated dependencies [44bde5e]
|
|
27
|
+
- Updated dependencies [27a211d]
|
|
28
|
+
- @khanacademy/wonder-blocks-tokens@16.5.0
|
|
29
|
+
- @khanacademy/wonder-blocks-clickable@8.1.10
|
|
30
|
+
- @khanacademy/wonder-blocks-icon@5.3.14
|
|
31
|
+
- @khanacademy/wonder-blocks-progress-spinner@3.1.51
|
|
32
|
+
- @khanacademy/wonder-blocks-styles@0.2.45
|
|
33
|
+
- @khanacademy/wonder-blocks-typography@4.3.4
|
|
34
|
+
|
|
3
35
|
## 11.5.4
|
|
4
36
|
|
|
5
37
|
### Patch Changes
|
package/dist/css/vars.css
CHANGED
|
@@ -42,6 +42,50 @@
|
|
|
42
42
|
--wb-c-button-icon-sizing-medium: var(--wb-sizing-size_240);
|
|
43
43
|
--wb-c-button-icon-sizing-large: var(--wb-sizing-size_240);}
|
|
44
44
|
|
|
45
|
+
[data-wb-theme='syl-dark'] {--wb-c-button-root-border-width-primary-default: var(--wb-border-width-none);
|
|
46
|
+
--wb-c-button-root-border-width-primary-hover: var(--wb-border-width-none);
|
|
47
|
+
--wb-c-button-root-border-width-primary-press: var(--wb-border-width-none);
|
|
48
|
+
--wb-c-button-root-border-width-secondary-default: var(--wb-border-width-thin);
|
|
49
|
+
--wb-c-button-root-border-width-secondary-hover: var(--wb-border-width-thin);
|
|
50
|
+
--wb-c-button-root-border-width-secondary-press: var(--wb-border-width-thin);
|
|
51
|
+
--wb-c-button-root-border-width-tertiary-default: var(--wb-border-width-none);
|
|
52
|
+
--wb-c-button-root-border-width-tertiary-hover: var(--wb-border-width-medium);
|
|
53
|
+
--wb-c-button-root-border-width-tertiary-press: var(--wb-border-width-medium);
|
|
54
|
+
--wb-c-button-root-border-offset-primary: var(--wb-border-width-medium);
|
|
55
|
+
--wb-c-button-root-border-offset-secondary: 0;
|
|
56
|
+
--wb-c-button-root-border-offset-tertiary: 0;
|
|
57
|
+
--wb-c-button-root-border-radius-default: var(--wb-border-radius-radius_080);
|
|
58
|
+
--wb-c-button-root-border-radius-hover: var(--wb-border-radius-radius_080);
|
|
59
|
+
--wb-c-button-root-border-radius-press: var(--wb-border-radius-radius_120);
|
|
60
|
+
--wb-c-button-root-sizing-height-small: var(--wb-sizing-size_260);
|
|
61
|
+
--wb-c-button-root-sizing-height-medium: var(--wb-sizing-size_400);
|
|
62
|
+
--wb-c-button-root-sizing-height-large: var(--wb-sizing-size_440);
|
|
63
|
+
--wb-c-button-root-sizing-underline-hover: var(--wb-sizing-size_0);
|
|
64
|
+
--wb-c-button-root-sizing-underline-press: var(--wb-sizing-size_0);
|
|
65
|
+
--wb-c-button-root-layout-padding-inline-primary-small: var(--wb-sizing-size_080);
|
|
66
|
+
--wb-c-button-root-layout-padding-inline-primary-medium: var(--wb-sizing-size_160);
|
|
67
|
+
--wb-c-button-root-layout-padding-inline-primary-large: var(--wb-sizing-size_180);
|
|
68
|
+
--wb-c-button-root-layout-padding-inline-secondary-small: var(--wb-sizing-size_080);
|
|
69
|
+
--wb-c-button-root-layout-padding-inline-secondary-medium: var(--wb-sizing-size_160);
|
|
70
|
+
--wb-c-button-root-layout-padding-inline-secondary-large: var(--wb-sizing-size_180);
|
|
71
|
+
--wb-c-button-root-layout-padding-inline-tertiary-small: var(--wb-sizing-size_080);
|
|
72
|
+
--wb-c-button-root-layout-padding-inline-tertiary-medium: var(--wb-sizing-size_160);
|
|
73
|
+
--wb-c-button-root-layout-padding-inline-tertiary-large: var(--wb-sizing-size_180);
|
|
74
|
+
--wb-c-button-root-font-size-large: 1.8rem;
|
|
75
|
+
--wb-c-button-root-font-lineHeight-small: var(--wb-font-lineHeight-xMedium);
|
|
76
|
+
--wb-c-button-root-font-lineHeight-default: var(--wb-font-lineHeight-large);
|
|
77
|
+
--wb-c-button-root-font-lineHeight-large: 2.6rem;
|
|
78
|
+
--wb-c-button-root-font-weight-default: var(--wb-font-weight-bold);
|
|
79
|
+
--wb-c-button-root-font-decoration-hover: none;
|
|
80
|
+
--wb-c-button-root-font-decoration-press: none;
|
|
81
|
+
--wb-c-button-root-font-offset-default: var(--wb-sizing-size_0);
|
|
82
|
+
--wb-c-button-icon-margin-inline-inner: var(--wb-sizing-size_060);
|
|
83
|
+
--wb-c-button-icon-margin-inline-outer: calc(-1 * var(--wb-border-width-medium));
|
|
84
|
+
--wb-c-button-icon-padding: var(--wb-sizing-size_020);
|
|
85
|
+
--wb-c-button-icon-sizing-small: var(--wb-sizing-size_120);
|
|
86
|
+
--wb-c-button-icon-sizing-medium: var(--wb-sizing-size_180);
|
|
87
|
+
--wb-c-button-icon-sizing-large: var(--wb-sizing-size_200);}
|
|
88
|
+
|
|
45
89
|
[data-wb-theme='thunderblocks'] {--wb-c-button-root-border-width-primary-default: var(--wb-border-width-none);
|
|
46
90
|
--wb-c-button-root-border-width-primary-hover: var(--wb-border-width-none);
|
|
47
91
|
--wb-c-button-root-border-width-primary-press: var(--wb-border-width-none);
|
package/dist/es/index.js
CHANGED
|
@@ -18,7 +18,7 @@ function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.ico
|
|
|
18
18
|
|
|
19
19
|
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,kind,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,"data-kind":kind,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)"}}});
|
|
20
20
|
|
|
21
|
-
const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsx(BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,
|
|
21
|
+
const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsx(BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minInlineSize:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1[buttonType]){return styles$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",["@media (hover: hover)"]:{":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined}},":active":pressStyles,...focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1[buttonType]=StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
22
22
|
|
|
23
23
|
const Button=React.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});
|
|
24
24
|
|
package/dist/index.js
CHANGED
|
@@ -42,7 +42,7 @@ function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.ico
|
|
|
42
42
|
|
|
43
43
|
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,kind,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,"data-kind":kind,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)"}}});
|
|
44
44
|
|
|
45
|
-
const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=aphrodite.StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,
|
|
45
|
+
const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=aphrodite.StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minInlineSize:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1[buttonType]){return styles$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.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,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",["@media (hover: hover)"]:{":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
46
46
|
|
|
47
47
|
const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});
|
|
48
48
|
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
width: {
|
|
5
|
+
primary: {
|
|
6
|
+
default: string;
|
|
7
|
+
hover: string;
|
|
8
|
+
press: string;
|
|
9
|
+
};
|
|
10
|
+
secondary: {
|
|
11
|
+
default: string;
|
|
12
|
+
hover: string;
|
|
13
|
+
press: string;
|
|
14
|
+
};
|
|
15
|
+
tertiary: {
|
|
16
|
+
default: string;
|
|
17
|
+
hover: string;
|
|
18
|
+
press: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
offset: {
|
|
22
|
+
primary: string;
|
|
23
|
+
secondary: number;
|
|
24
|
+
tertiary: number;
|
|
25
|
+
};
|
|
26
|
+
radius: {
|
|
27
|
+
default: string;
|
|
28
|
+
hover: string;
|
|
29
|
+
press: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
sizing: {
|
|
33
|
+
height: {
|
|
34
|
+
small: string;
|
|
35
|
+
medium: string;
|
|
36
|
+
large: string;
|
|
37
|
+
};
|
|
38
|
+
underline: {
|
|
39
|
+
hover: string;
|
|
40
|
+
press: string;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
layout: {
|
|
44
|
+
padding: {
|
|
45
|
+
inline: {
|
|
46
|
+
primary: {
|
|
47
|
+
small: string;
|
|
48
|
+
medium: string;
|
|
49
|
+
large: string;
|
|
50
|
+
};
|
|
51
|
+
secondary: {
|
|
52
|
+
small: string;
|
|
53
|
+
medium: string;
|
|
54
|
+
large: string;
|
|
55
|
+
};
|
|
56
|
+
tertiary: {
|
|
57
|
+
small: string;
|
|
58
|
+
medium: string;
|
|
59
|
+
large: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
font: {
|
|
65
|
+
size: {
|
|
66
|
+
large: string;
|
|
67
|
+
};
|
|
68
|
+
lineHeight: {
|
|
69
|
+
small: string;
|
|
70
|
+
default: string;
|
|
71
|
+
large: string;
|
|
72
|
+
};
|
|
73
|
+
weight: {
|
|
74
|
+
default: number;
|
|
75
|
+
};
|
|
76
|
+
decoration: {
|
|
77
|
+
hover: string;
|
|
78
|
+
press: string;
|
|
79
|
+
};
|
|
80
|
+
offset: {
|
|
81
|
+
default: string;
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
icon: {
|
|
86
|
+
margin: {
|
|
87
|
+
inline: {
|
|
88
|
+
inner: string;
|
|
89
|
+
outer: string;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
padding: string;
|
|
93
|
+
sizing: {
|
|
94
|
+
small: string;
|
|
95
|
+
medium: string;
|
|
96
|
+
large: string;
|
|
97
|
+
};
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "11.
|
|
6
|
+
"version": "11.6.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.
|
|
32
|
-
"@khanacademy/wonder-blocks-core": "12.4.
|
|
33
|
-
"@khanacademy/wonder-blocks-icon": "5.3.
|
|
34
|
-
"@khanacademy/wonder-blocks-progress-spinner": "3.1.
|
|
35
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
36
|
-
"@khanacademy/wonder-blocks-tokens": "16.
|
|
37
|
-
"@khanacademy/wonder-blocks-typography": "4.3.
|
|
31
|
+
"@khanacademy/wonder-blocks-clickable": "8.2.0",
|
|
32
|
+
"@khanacademy/wonder-blocks-core": "12.4.4",
|
|
33
|
+
"@khanacademy/wonder-blocks-icon": "5.3.15",
|
|
34
|
+
"@khanacademy/wonder-blocks-progress-spinner": "3.1.52",
|
|
35
|
+
"@khanacademy/wonder-blocks-styles": "0.2.45",
|
|
36
|
+
"@khanacademy/wonder-blocks-tokens": "16.5.0",
|
|
37
|
+
"@khanacademy/wonder-blocks-typography": "4.3.5"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"aphrodite": "^1.2.5",
|