@khanacademy/wonder-blocks-badge 0.0.0-PR2640-20250603181559 → 0.1.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @khanacademy/wonder-blocks-badge
 
-## 0.0.0-PR2640-20250603181559
+## 0.1.0
 
 ### Minor Changes
 
@@ -12,7 +12,8 @@
 - dc34e0c: Adds `StreakBadge` component
 - a755cf9: Set up wonder-blocks-badge package
 - aa6468d: Adds `DueBadge` component
-- c232721: Update tsconfig-build for types
+- 4fe538b: Badge components: Set max width on badge component so long labels are truncated. Also, adds a `label` key to the `styles` prop so styles applied to the label can be overridden
+- a42c677: Update tsconfig-build for types
 
 ### Patch Changes
 
@@ -23,7 +24,7 @@
 - Updated dependencies [2cace08]
 - Updated dependencies [f714517]
 - Updated dependencies [8468d8d]
-    - @khanacademy/wonder-blocks-tokens@0.0.0-PR2640-20250603181559
-    - @khanacademy/wonder-blocks-icon@0.0.0-PR2640-20250603181559
-    - @khanacademy/wonder-blocks-styles@0.0.0-PR2640-20250603181559
-    - @khanacademy/wonder-blocks-typography@0.0.0-PR2640-20250603181559
+    - @khanacademy/wonder-blocks-tokens@10.5.0
+    - @khanacademy/wonder-blocks-icon@5.2.0
+    - @khanacademy/wonder-blocks-styles@0.2.13
+    - @khanacademy/wonder-blocks-typography@4.2.1

package/dist/es/index.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 import { Icon, GemIcon, StreakIcon } from '@khanacademy/wonder-blocks-icon';
 
-const StyledSpan=addStyle("span");const Badge=React.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",...otherProps}=props;const StyledTag=React.useMemo(()=>addStyle(tag,styles$4.default),[tag]);if(!label&&!icon){return jsx(React.Fragment,{})}return jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$4.badge,styles$4.badgeTypography,styles$4.defaultBadgeStyling,icon&&!label?styles$4.iconOnly:{},stylesProp?.root],...otherProps,children:[icon&&jsx(StyledSpan,{style:[styles$4.icon,styles$4.defaultIconStyling,stylesProp?.icon],children:icon}),label]})});const badgeTokens$1={root:{layout:{default:{paddingBlock:sizing.size_040,paddingInline:sizing.size_080,gap:sizing.size_040},iconOnly:{padding:sizing.size_040}},border:{width:border.width.thin,style:"solid",radius:border.radius.radius_080},color:{background:semanticColor.surface.secondary,foreground:semanticColor.text.primary,border:semanticColor.border.subtle}},icon:{sizing:{width:sizing.size_160,height:sizing.size_160},color:{foreground:semanticColor.icon.primary}}};const styles$4=StyleSheet.create({badge:{display:"inline-flex",alignItems:"center",gap:badgeTokens$1.root.layout.default.gap,width:"fit-content",textWrap:"nowrap",borderWidth:badgeTokens$1.root.border.width,borderStyle:badgeTokens$1.root.border.style,paddingBlock:badgeTokens$1.root.layout.default.paddingBlock,paddingInline:badgeTokens$1.root.layout.default.paddingInline,borderRadius:badgeTokens$1.root.border.radius,...focusStyles.focus},badgeTypography:{fontFamily:font.family.sans,fontSize:font.body.size.xsmall,fontWeight:font.weight.bold,lineHeight:font.body.lineHeight.xsmall},defaultBadgeStyling:{backgroundColor:badgeTokens$1.root.color.background,borderColor:badgeTokens$1.root.color.border,color:badgeTokens$1.root.color.foreground},icon:{minWidth:badgeTokens$1.icon.sizing.width,minHeight:badgeTokens$1.icon.sizing.height,display:"flex",alignItems:"center",justifyContent:"center"},defaultIconStyling:{color:badgeTokens$1.icon.color.foreground},iconOnly:{padding:badgeTokens$1.root.layout.iconOnly.padding}});
+const StyledSpan=addStyle("span");const Badge=React.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",...otherProps}=props;const StyledTag=React.useMemo(()=>addStyle(tag,styles$4.default),[tag]);if(!label&&!icon){return jsx(React.Fragment,{})}return jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$4.badge,styles$4.badgeTypography,styles$4.defaultBadgeStyling,icon&&!label?styles$4.iconOnly:{},stylesProp?.root],...otherProps,children:[icon&&jsx(StyledSpan,{style:[styles$4.icon,styles$4.defaultIconStyling,stylesProp?.icon],children:icon}),label&&jsx(StyledSpan,{style:[styles$4.label,stylesProp?.label],children:label})]})});const badgeTokens$1={root:{layout:{default:{paddingBlock:sizing.size_040,paddingInline:sizing.size_080,gap:sizing.size_040},iconOnly:{padding:sizing.size_040}},border:{width:border.width.thin,style:"solid",radius:border.radius.radius_080},color:{background:semanticColor.surface.secondary,foreground:semanticColor.text.primary,border:semanticColor.border.subtle}},icon:{sizing:{width:sizing.size_160,height:sizing.size_160},color:{foreground:semanticColor.icon.primary}}};const styles$4=StyleSheet.create({badge:{display:"inline-flex",alignItems:"center",gap:badgeTokens$1.root.layout.default.gap,width:"fit-content",textWrap:"nowrap",borderWidth:badgeTokens$1.root.border.width,borderStyle:badgeTokens$1.root.border.style,paddingBlock:badgeTokens$1.root.layout.default.paddingBlock,paddingInline:badgeTokens$1.root.layout.default.paddingInline,borderRadius:badgeTokens$1.root.border.radius,...focusStyles.focus},label:{maxWidth:"30ch",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},badgeTypography:{fontFamily:font.family.sans,fontSize:font.body.size.xsmall,fontWeight:font.weight.bold,lineHeight:font.body.lineHeight.xsmall},defaultBadgeStyling:{backgroundColor:badgeTokens$1.root.color.background,borderColor:badgeTokens$1.root.color.border,color:badgeTokens$1.root.color.foreground},icon:{minWidth:badgeTokens$1.icon.sizing.width,minHeight:badgeTokens$1.icon.sizing.height,display:"flex",alignItems:"center",justifyContent:"center"},defaultIconStyling:{color:badgeTokens$1.icon.color.foreground},iconOnly:{padding:badgeTokens$1.root.layout.iconOnly.padding}});
 
 const StatusBadge=React.forwardRef((props,ref)=>{const{kind="info",...otherProps}=props;return jsx(Badge,{ref:ref,...otherProps,styles:{...otherProps.styles,root:[getKindStyle(kind),otherProps.styles?.root],icon:[getIconKindStyle(kind),otherProps.styles?.icon]}})});function getKindStyle(kind){switch(kind){case"info":return styles$3.info;case"success":return styles$3.success;case"warning":return styles$3.warning;case"critical":return styles$3.critical;default:return {}}}function getIconKindStyle(kind){switch(kind){case"info":return styles$3.infoIcon;case"success":return styles$3.successIcon;case"warning":return styles$3.warningIcon;case"critical":return styles$3.criticalIcon;default:return {}}}const badgeTokens={root:{color:{info:{background:semanticColor.feedback.info.subtle.background,border:semanticColor.feedback.info.subtle.border,foreground:semanticColor.feedback.info.subtle.text},success:{background:semanticColor.feedback.success.subtle.background,border:semanticColor.feedback.success.subtle.border,foreground:semanticColor.feedback.success.subtle.text},warning:{background:semanticColor.feedback.warning.subtle.background,border:semanticColor.feedback.warning.subtle.border,foreground:semanticColor.feedback.warning.subtle.text},critical:{background:semanticColor.feedback.critical.subtle.background,border:semanticColor.feedback.critical.subtle.border,foreground:semanticColor.feedback.critical.subtle.text}}},icon:{color:{info:{foreground:semanticColor.feedback.info.subtle.icon},success:{foreground:semanticColor.feedback.success.subtle.icon},warning:{foreground:semanticColor.feedback.warning.subtle.icon},critical:{foreground:semanticColor.feedback.critical.subtle.icon}}}};const styles$3=StyleSheet.create({info:{backgroundColor:badgeTokens.root.color.info.background,color:badgeTokens.root.color.info.foreground,borderColor:badgeTokens.root.color.info.border},success:{backgroundColor:badgeTokens.root.color.success.background,color:badgeTokens.root.color.success.foreground,borderColor:badgeTokens.root.color.success.border},warning:{backgroundColor:badgeTokens.root.color.warning.background,color:badgeTokens.root.color.warning.foreground,borderColor:badgeTokens.root.color.warning.border},critical:{backgroundColor:badgeTokens.root.color.critical.background,color:badgeTokens.root.color.critical.foreground,borderColor:badgeTokens.root.color.critical.border},infoIcon:{color:badgeTokens.icon.color.info.foreground},successIcon:{color:badgeTokens.icon.color.success.foreground},warningIcon:{color:badgeTokens.icon.color.warning.foreground},criticalIcon:{color:badgeTokens.icon.color.critical.foreground}});
 

package/dist/index.js

@@ -30,7 +30,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const StyledSpan=wonderBlocksCore.addStyle("span");const Badge=React__namespace.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",...otherProps}=props;const StyledTag=React__namespace.useMemo(()=>wonderBlocksCore.addStyle(tag,styles$4.default),[tag]);if(!label&&!icon){return jsxRuntime.jsx(React__namespace.Fragment,{})}return jsxRuntime.jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$4.badge,styles$4.badgeTypography,styles$4.defaultBadgeStyling,icon&&!label?styles$4.iconOnly:{},stylesProp?.root],...otherProps,children:[icon&&jsxRuntime.jsx(StyledSpan,{style:[styles$4.icon,styles$4.defaultIconStyling,stylesProp?.icon],children:icon}),label]})});const badgeTokens$1={root:{layout:{default:{paddingBlock:wonderBlocksTokens.sizing.size_040,paddingInline:wonderBlocksTokens.sizing.size_080,gap:wonderBlocksTokens.sizing.size_040},iconOnly:{padding:wonderBlocksTokens.sizing.size_040}},border:{width:wonderBlocksTokens.border.width.thin,style:"solid",radius:wonderBlocksTokens.border.radius.radius_080},color:{background:wonderBlocksTokens.semanticColor.surface.secondary,foreground:wonderBlocksTokens.semanticColor.text.primary,border:wonderBlocksTokens.semanticColor.border.subtle}},icon:{sizing:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},color:{foreground:wonderBlocksTokens.semanticColor.icon.primary}}};const styles$4=aphrodite.StyleSheet.create({badge:{display:"inline-flex",alignItems:"center",gap:badgeTokens$1.root.layout.default.gap,width:"fit-content",textWrap:"nowrap",borderWidth:badgeTokens$1.root.border.width,borderStyle:badgeTokens$1.root.border.style,paddingBlock:badgeTokens$1.root.layout.default.paddingBlock,paddingInline:badgeTokens$1.root.layout.default.paddingInline,borderRadius:badgeTokens$1.root.border.radius,...wonderBlocksStyles.focusStyles.focus},badgeTypography:{fontFamily:wonderBlocksTokens.font.family.sans,fontSize:wonderBlocksTokens.font.body.size.xsmall,fontWeight:wonderBlocksTokens.font.weight.bold,lineHeight:wonderBlocksTokens.font.body.lineHeight.xsmall},defaultBadgeStyling:{backgroundColor:badgeTokens$1.root.color.background,borderColor:badgeTokens$1.root.color.border,color:badgeTokens$1.root.color.foreground},icon:{minWidth:badgeTokens$1.icon.sizing.width,minHeight:badgeTokens$1.icon.sizing.height,display:"flex",alignItems:"center",justifyContent:"center"},defaultIconStyling:{color:badgeTokens$1.icon.color.foreground},iconOnly:{padding:badgeTokens$1.root.layout.iconOnly.padding}});
+const StyledSpan=wonderBlocksCore.addStyle("span");const Badge=React__namespace.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",...otherProps}=props;const StyledTag=React__namespace.useMemo(()=>wonderBlocksCore.addStyle(tag,styles$4.default),[tag]);if(!label&&!icon){return jsxRuntime.jsx(React__namespace.Fragment,{})}return jsxRuntime.jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$4.badge,styles$4.badgeTypography,styles$4.defaultBadgeStyling,icon&&!label?styles$4.iconOnly:{},stylesProp?.root],...otherProps,children:[icon&&jsxRuntime.jsx(StyledSpan,{style:[styles$4.icon,styles$4.defaultIconStyling,stylesProp?.icon],children:icon}),label&&jsxRuntime.jsx(StyledSpan,{style:[styles$4.label,stylesProp?.label],children:label})]})});const badgeTokens$1={root:{layout:{default:{paddingBlock:wonderBlocksTokens.sizing.size_040,paddingInline:wonderBlocksTokens.sizing.size_080,gap:wonderBlocksTokens.sizing.size_040},iconOnly:{padding:wonderBlocksTokens.sizing.size_040}},border:{width:wonderBlocksTokens.border.width.thin,style:"solid",radius:wonderBlocksTokens.border.radius.radius_080},color:{background:wonderBlocksTokens.semanticColor.surface.secondary,foreground:wonderBlocksTokens.semanticColor.text.primary,border:wonderBlocksTokens.semanticColor.border.subtle}},icon:{sizing:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},color:{foreground:wonderBlocksTokens.semanticColor.icon.primary}}};const styles$4=aphrodite.StyleSheet.create({badge:{display:"inline-flex",alignItems:"center",gap:badgeTokens$1.root.layout.default.gap,width:"fit-content",textWrap:"nowrap",borderWidth:badgeTokens$1.root.border.width,borderStyle:badgeTokens$1.root.border.style,paddingBlock:badgeTokens$1.root.layout.default.paddingBlock,paddingInline:badgeTokens$1.root.layout.default.paddingInline,borderRadius:badgeTokens$1.root.border.radius,...wonderBlocksStyles.focusStyles.focus},label:{maxWidth:"30ch",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},badgeTypography:{fontFamily:wonderBlocksTokens.font.family.sans,fontSize:wonderBlocksTokens.font.body.size.xsmall,fontWeight:wonderBlocksTokens.font.weight.bold,lineHeight:wonderBlocksTokens.font.body.lineHeight.xsmall},defaultBadgeStyling:{backgroundColor:badgeTokens$1.root.color.background,borderColor:badgeTokens$1.root.color.border,color:badgeTokens$1.root.color.foreground},icon:{minWidth:badgeTokens$1.icon.sizing.width,minHeight:badgeTokens$1.icon.sizing.height,display:"flex",alignItems:"center",justifyContent:"center"},defaultIconStyling:{color:badgeTokens$1.icon.color.foreground},iconOnly:{padding:badgeTokens$1.root.layout.iconOnly.padding}});
 
 const StatusBadge=React__namespace.forwardRef((props,ref)=>{const{kind="info",...otherProps}=props;return jsxRuntime.jsx(Badge,{ref:ref,...otherProps,styles:{...otherProps.styles,root:[getKindStyle(kind),otherProps.styles?.root],icon:[getIconKindStyle(kind),otherProps.styles?.icon]}})});function getKindStyle(kind){switch(kind){case"info":return styles$3.info;case"success":return styles$3.success;case"warning":return styles$3.warning;case"critical":return styles$3.critical;default:return {}}}function getIconKindStyle(kind){switch(kind){case"info":return styles$3.infoIcon;case"success":return styles$3.successIcon;case"warning":return styles$3.warningIcon;case"critical":return styles$3.criticalIcon;default:return {}}}const badgeTokens={root:{color:{info:{background:wonderBlocksTokens.semanticColor.feedback.info.subtle.background,border:wonderBlocksTokens.semanticColor.feedback.info.subtle.border,foreground:wonderBlocksTokens.semanticColor.feedback.info.subtle.text},success:{background:wonderBlocksTokens.semanticColor.feedback.success.subtle.background,border:wonderBlocksTokens.semanticColor.feedback.success.subtle.border,foreground:wonderBlocksTokens.semanticColor.feedback.success.subtle.text},warning:{background:wonderBlocksTokens.semanticColor.feedback.warning.subtle.background,border:wonderBlocksTokens.semanticColor.feedback.warning.subtle.border,foreground:wonderBlocksTokens.semanticColor.feedback.warning.subtle.text},critical:{background:wonderBlocksTokens.semanticColor.feedback.critical.subtle.background,border:wonderBlocksTokens.semanticColor.feedback.critical.subtle.border,foreground:wonderBlocksTokens.semanticColor.feedback.critical.subtle.text}}},icon:{color:{info:{foreground:wonderBlocksTokens.semanticColor.feedback.info.subtle.icon},success:{foreground:wonderBlocksTokens.semanticColor.feedback.success.subtle.icon},warning:{foreground:wonderBlocksTokens.semanticColor.feedback.warning.subtle.icon},critical:{foreground:wonderBlocksTokens.semanticColor.feedback.critical.subtle.icon}}}};const styles$3=aphrodite.StyleSheet.create({info:{backgroundColor:badgeTokens.root.color.info.background,color:badgeTokens.root.color.info.foreground,borderColor:badgeTokens.root.color.info.border},success:{backgroundColor:badgeTokens.root.color.success.background,color:badgeTokens.root.color.success.foreground,borderColor:badgeTokens.root.color.success.border},warning:{backgroundColor:badgeTokens.root.color.warning.background,color:badgeTokens.root.color.warning.foreground,borderColor:badgeTokens.root.color.warning.border},critical:{backgroundColor:badgeTokens.root.color.critical.background,color:badgeTokens.root.color.critical.foreground,borderColor:badgeTokens.root.color.critical.border},infoIcon:{color:badgeTokens.icon.color.info.foreground},successIcon:{color:badgeTokens.icon.color.success.foreground},warningIcon:{color:badgeTokens.icon.color.warning.foreground},criticalIcon:{color:badgeTokens.icon.color.critical.foreground}});
 

package/dist/types.d.ts

@@ -67,10 +67,12 @@ export type BaseBadgeProps = AriaProps & {
      * Custom styles for the elements in the Badge component.
      * - `root`: Styles the root element
      * - `icon`: Styles the icon element
+     * - `label`: Styles the text in the badge
      */
     styles?: {
         root?: StyleType;
         icon?: StyleType;
+        label?: StyleType;
     };
     /**
      * The HTML tag to render. Defaults to `div`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-badge",
-  "version": "0.0.0-PR2640-20250603181559",
+  "version": "0.1.0",
   "design": "v1",
   "description": "Badges are used to display information",
   "main": "dist/index.js",
@@ -13,10 +13,10 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-icon": "0.0.0-PR2640-20250603181559",
-    "@khanacademy/wonder-blocks-styles": "0.0.0-PR2640-20250603181559",
-    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2640-20250603181559",
-    "@khanacademy/wonder-blocks-typography": "0.0.0-PR2640-20250603181559"
+    "@khanacademy/wonder-blocks-icon": "5.2.0",
+    "@khanacademy/wonder-blocks-styles": "0.2.13",
+    "@khanacademy/wonder-blocks-tokens": "10.5.0",
+    "@khanacademy/wonder-blocks-typography": "4.2.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",