@khanacademy/wonder-blocks-pill 3.1.16 → 3.1.17

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/es/index.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @khanacademy/wonder-blocks-pill
2
2
 
3
+ ## 3.1.17
4
+
5
+ ### Patch Changes
6
+
7
+ - 9bacc1a: Replaces all existing `semanticColor.border` references to use `semanticColor.core.border`
8
+ - 7abcccf: Replace call sites to use `core.background` instead of `action`.
9
+ - Updated dependencies [b1ee2b4]
10
+ - Updated dependencies [7abcccf]
11
+ - Updated dependencies [9bacc1a]
12
+ - Updated dependencies [1c3c335]
13
+ - Updated dependencies [9bacc1a]
14
+ - Updated dependencies [7abcccf]
15
+ - Updated dependencies [1c3c335]
16
+ - Updated dependencies [689f5d3]
17
+ - Updated dependencies [7d2a646]
18
+ - @khanacademy/wonder-blocks-tokens@10.4.0
19
+ - @khanacademy/wonder-blocks-link@9.1.5
20
+ - @khanacademy/wonder-blocks-clickable@7.1.5
21
+ - @khanacademy/wonder-blocks-typography@4.1.0
22
+
3
23
  ## 3.1.16
4
24
 
5
25
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -6,6 +6,6 @@ import { View } from '@khanacademy/wonder-blocks-core';
6
6
  import { LabelXSmall, Body, LabelSmall } from '@khanacademy/wonder-blocks-typography';
7
7
  import * as tokens from '@khanacademy/wonder-blocks-tokens';
8
8
 
9
- const{semanticColor}=tokens;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsx(LabelXSmall,{children:props.children})}if(size==="large"){return jsx(Body,{children:children})}return jsx(LabelSmall,{children:children})};const Pill=React.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsx(Clickable,{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsx(PillInner,{size:size,children:children})})}return jsx(View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsx(PillInner,{size:size,children:children})})});const pillStyles=StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:tokens.spacing.large_24},wrapperLarge:{paddingLeft:tokens.spacing.small_12,paddingRight:tokens.spacing.small_12,paddingTop:tokens.spacing.xxSmall_6,paddingBottom:tokens.spacing.xxSmall_6,borderRadius:tokens.sizing.size_240,height:tokens.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens.color.offBlack16:kind==="accent"?tokens.color.activeBlue:`color-mix(in srgb, ${tokens.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.border.primary}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.action.primary.progressive.hover.border},press:{border:semanticColor.action.primary.progressive.press.border,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`2px solid ${theme.hover.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens.spacing.xxxxSmall_2}}};styles[pillType]=StyleSheet.create(colorStyles);return styles[pillType]};
9
+ const{semanticColor}=tokens;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsx(LabelXSmall,{children:props.children})}if(size==="large"){return jsx(Body,{children:children})}return jsx(LabelSmall,{children:children})};const Pill=React.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsx(Clickable,{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsx(PillInner,{size:size,children:children})})}return jsx(View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsx(PillInner,{size:size,children:children})})});const pillStyles=StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:tokens.spacing.large_24},wrapperLarge:{paddingLeft:tokens.spacing.small_12,paddingRight:tokens.spacing.small_12,paddingTop:tokens.spacing.xxSmall_6,paddingBottom:tokens.spacing.xxSmall_6,borderRadius:tokens.sizing.size_240,height:tokens.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens.color.offBlack16:kind==="accent"?tokens.color.activeBlue:`color-mix(in srgb, ${tokens.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.core.border.neutral.subtle}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.core.border.instructive.default},press:{border:semanticColor.core.border.instructive.strong,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`2px solid ${theme.hover.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens.spacing.xxxxSmall_2}}};styles[pillType]=StyleSheet.create(colorStyles);return styles[pillType]};
10
10
 
11
11
  export { Pill as default };
package/dist/index.js CHANGED
@@ -32,6 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
32
32
  var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
33
33
  var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
34
34
 
35
- const{semanticColor}=tokens__namespace;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsxRuntime.jsx(wonderBlocksTypography.LabelXSmall,{children:props.children})}if(size==="large"){return jsxRuntime.jsx(wonderBlocksTypography.Body,{children:children})}return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{children:children})};const Pill=React__namespace.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsxRuntime.jsx(Clickable__default["default"],{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsxRuntime.jsx(PillInner,{size:size,children:children})})}return jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsxRuntime.jsx(PillInner,{size:size,children:children})})});const pillStyles=aphrodite.StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:tokens__namespace.spacing.large_24},wrapperLarge:{paddingLeft:tokens__namespace.spacing.small_12,paddingRight:tokens__namespace.spacing.small_12,paddingTop:tokens__namespace.spacing.xxSmall_6,paddingBottom:tokens__namespace.spacing.xxSmall_6,borderRadius:tokens__namespace.sizing.size_240,height:tokens__namespace.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens__namespace.color.offBlack16:kind==="accent"?tokens__namespace.color.activeBlue:`color-mix(in srgb, ${tokens__namespace.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.border.primary}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.action.primary.progressive.hover.border},press:{border:semanticColor.action.primary.progressive.press.border,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`2px solid ${theme.hover.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2}}};styles[pillType]=aphrodite.StyleSheet.create(colorStyles);return styles[pillType]};
35
+ const{semanticColor}=tokens__namespace;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsxRuntime.jsx(wonderBlocksTypography.LabelXSmall,{children:props.children})}if(size==="large"){return jsxRuntime.jsx(wonderBlocksTypography.Body,{children:children})}return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{children:children})};const Pill=React__namespace.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsxRuntime.jsx(Clickable__default["default"],{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsxRuntime.jsx(PillInner,{size:size,children:children})})}return jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsxRuntime.jsx(PillInner,{size:size,children:children})})});const pillStyles=aphrodite.StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:tokens__namespace.spacing.large_24},wrapperLarge:{paddingLeft:tokens__namespace.spacing.small_12,paddingRight:tokens__namespace.spacing.small_12,paddingTop:tokens__namespace.spacing.xxSmall_6,paddingBottom:tokens__namespace.spacing.xxSmall_6,borderRadius:tokens__namespace.sizing.size_240,height:tokens__namespace.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens__namespace.color.offBlack16:kind==="accent"?tokens__namespace.color.activeBlue:`color-mix(in srgb, ${tokens__namespace.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.core.border.neutral.subtle}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.core.border.instructive.default},press:{border:semanticColor.core.border.instructive.strong,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`2px solid ${theme.hover.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2}}};styles[pillType]=aphrodite.StyleSheet.create(colorStyles);return styles[pillType]};
36
36
 
37
37
  module.exports = Pill;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-pill",
3
- "version": "3.1.16",
3
+ "version": "3.1.17",
4
4
  "design": "v1",
5
5
  "description": "Pill components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -13,11 +13,11 @@
13
13
  "access": "public"
14
14
  },
15
15
  "dependencies": {
16
- "@khanacademy/wonder-blocks-clickable": "7.1.4",
16
+ "@khanacademy/wonder-blocks-clickable": "7.1.5",
17
17
  "@khanacademy/wonder-blocks-core": "12.3.0",
18
- "@khanacademy/wonder-blocks-link": "9.1.4",
19
- "@khanacademy/wonder-blocks-tokens": "10.3.0",
20
- "@khanacademy/wonder-blocks-typography": "4.0.0"
18
+ "@khanacademy/wonder-blocks-link": "9.1.5",
19
+ "@khanacademy/wonder-blocks-tokens": "10.4.0",
20
+ "@khanacademy/wonder-blocks-typography": "4.1.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "aphrodite": "^1.2.5",