@khanacademy/wonder-blocks-cell 5.0.15 → 6.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +13 -0
- package/dist/components/internal/cell-core.d.ts +5 -0
- package/dist/es/index.js +2 -2
- package/dist/index.js +2 -2
- package/dist/util/types.d.ts +8 -47
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-cell@
|
|
2
|
+
> @khanacademy/wonder-blocks-cell@6.0.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell
|
|
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-cell/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-cell
|
|
2
2
|
|
|
3
|
+
## 6.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 79ea5ab: Updates styles to support RTL
|
|
8
|
+
- 79ea5ab: Updates styles to support RTL
|
|
9
|
+
|
|
10
|
+
## 6.0.0
|
|
11
|
+
|
|
12
|
+
### Major Changes
|
|
13
|
+
|
|
14
|
+
- a558788: Removes `contentStyle`, `leftAccessoryStyle`, `rightAccessoryStyle` and `style` to consolidate it into a single `styles` prop object that contains all keys.
|
|
15
|
+
|
|
3
16
|
## 5.0.15
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -6,6 +6,11 @@ type CellCoreProps = Partial<Omit<CellProps, "title">> & {
|
|
|
6
6
|
* The content of the cell.
|
|
7
7
|
*/
|
|
8
8
|
children: React.ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Optional custom styles applied to the content wrapper. For example, it
|
|
11
|
+
* can be used to set a custom minWidth or a custom alignment.
|
|
12
|
+
*/
|
|
13
|
+
contentStyle?: StyleType;
|
|
9
14
|
/**
|
|
10
15
|
* The optional styles applied to the inner wrapper.
|
|
11
16
|
*
|
package/dist/es/index.js
CHANGED
|
@@ -13,10 +13,10 @@ var theme = mapValuesToCssVars(themeDefault,"--wb-c-cell-");
|
|
|
13
13
|
|
|
14
14
|
const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",bottom:0,right:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
|
|
15
15
|
|
|
16
|
-
const LeftAccessory=({leftAccessory,
|
|
16
|
+
const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsx(Clickable,{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minWidth:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:semanticColor.core.background.instructive.subtle},":active":{background:semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:theme.accessoryRight.color.selected.foreground},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
|
|
17
17
|
|
|
18
18
|
const CompactCell=function(props){const{title,...coreProps}=props;return jsx(CellCore,{...coreProps,children:typeof title==="string"?jsx(BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title})};
|
|
19
19
|
|
|
20
|
-
const Subtitle=({subtitle,disabled})=>{if(!subtitle){return null}if(typeof subtitle==="string"){return jsx(BodyText,{size:"small",tag:"span",style:[!disabled&&styles.subtitle,{fontSize:theme.subtitle.font.size,lineHeight:theme.subtitle.font.lineHeight}],children:subtitle})}return subtitle};const DetailCell=function(props){const{
|
|
20
|
+
const Subtitle=({subtitle,disabled})=>{if(!subtitle){return null}if(typeof subtitle==="string"){return jsx(BodyText,{size:"small",tag:"span",style:[!disabled&&styles.subtitle,{fontSize:theme.subtitle.font.size,lineHeight:theme.subtitle.font.lineHeight}],children:subtitle})}return subtitle};const DetailCell=function(props){const{title,subtitle1,subtitle2,...coreProps}=props;return jsxs(CellCore,{...coreProps,innerStyle:styles.innerWrapper,contentStyle:{gap:theme.root.layout.gap.detail},children:[jsx(Subtitle,{subtitle:subtitle1,disabled:coreProps.disabled}),typeof title==="string"?jsx(BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title,jsx(Subtitle,{subtitle:subtitle2,disabled:coreProps.disabled})]})};const styles=StyleSheet.create({subtitle:{color:theme.subtitle.color.foreground},innerWrapper:{paddingBlock:theme.root.layout.padding.block.detail,paddingInline:theme.root.layout.padding.inline.detail}});
|
|
21
21
|
|
|
22
22
|
export { CompactCell, DetailCell };
|
package/dist/index.js
CHANGED
|
@@ -21,11 +21,11 @@ var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-cell-");
|
|
|
21
21
|
|
|
22
22
|
const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=aphrodite.StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",bottom:0,right:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
|
|
23
23
|
|
|
24
|
-
const LeftAccessory=({leftAccessory,
|
|
24
|
+
const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsxRuntime.jsx(Clickable__default["default"],{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minWidth:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle},":active":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:wonderBlocksTokens.semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:theme.accessoryRight.color.selected.foreground},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
|
|
25
25
|
|
|
26
26
|
const CompactCell=function(props){const{title,...coreProps}=props;return jsxRuntime.jsx(CellCore,{...coreProps,children:typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title})};
|
|
27
27
|
|
|
28
|
-
const Subtitle=({subtitle,disabled})=>{if(!subtitle){return null}if(typeof subtitle==="string"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:[!disabled&&styles.subtitle,{fontSize:theme.subtitle.font.size,lineHeight:theme.subtitle.font.lineHeight}],children:subtitle})}return subtitle};const DetailCell=function(props){const{
|
|
28
|
+
const Subtitle=({subtitle,disabled})=>{if(!subtitle){return null}if(typeof subtitle==="string"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:[!disabled&&styles.subtitle,{fontSize:theme.subtitle.font.size,lineHeight:theme.subtitle.font.lineHeight}],children:subtitle})}return subtitle};const DetailCell=function(props){const{title,subtitle1,subtitle2,...coreProps}=props;return jsxRuntime.jsxs(CellCore,{...coreProps,innerStyle:styles.innerWrapper,contentStyle:{gap:theme.root.layout.gap.detail},children:[jsxRuntime.jsx(Subtitle,{subtitle:subtitle1,disabled:coreProps.disabled}),typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title,jsxRuntime.jsx(Subtitle,{subtitle:subtitle2,disabled:coreProps.disabled})]})};const styles=aphrodite.StyleSheet.create({subtitle:{color:theme.subtitle.color.foreground},innerWrapper:{paddingBlock:theme.root.layout.padding.block.detail,paddingInline:theme.root.layout.padding.inline.detail}});
|
|
29
29
|
|
|
30
30
|
exports.CompactCell = CompactCell;
|
|
31
31
|
exports.DetailCell = DetailCell;
|
package/dist/util/types.d.ts
CHANGED
|
@@ -10,28 +10,6 @@ export type HorizontalRuleVariant = "full-width" | "inset" | "none";
|
|
|
10
10
|
* An element or component that represents an accessory within a cell.
|
|
11
11
|
*/
|
|
12
12
|
type Accessory = React.ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* A subset of CSS Properties to allow overriding some of the default styles set
|
|
15
|
-
* on the accessory wrapper (loosely based on StyleType).
|
|
16
|
-
*/
|
|
17
|
-
export type AccessoryStyle = {
|
|
18
|
-
/**
|
|
19
|
-
* A subset of valid Spacing values.
|
|
20
|
-
*/
|
|
21
|
-
minWidth?: 16 | 24 | 32 | 48;
|
|
22
|
-
/**
|
|
23
|
-
* To vertically align the accessory.
|
|
24
|
-
*/
|
|
25
|
-
alignSelf?: "flex-start" | "flex-end" | "center";
|
|
26
|
-
/**
|
|
27
|
-
* To horizontally align the accessory.
|
|
28
|
-
*/
|
|
29
|
-
alignItems?: "flex-start" | "flex-end" | "center";
|
|
30
|
-
/**
|
|
31
|
-
* To set spacing between child elements.
|
|
32
|
-
*/
|
|
33
|
-
gap?: number | string;
|
|
34
|
-
};
|
|
35
13
|
/**
|
|
36
14
|
* A union that allows using plain text or WB Typography elements.
|
|
37
15
|
*/
|
|
@@ -46,12 +24,6 @@ export type CellProps = {
|
|
|
46
24
|
* LabelLarge.
|
|
47
25
|
*/
|
|
48
26
|
title: TypographyText;
|
|
49
|
-
/**
|
|
50
|
-
* Optional custom styles applied to the content wrapper. For
|
|
51
|
-
* example, it can be used to set a custom minWidth or a custom
|
|
52
|
-
* alignment.
|
|
53
|
-
*/
|
|
54
|
-
contentStyle?: AccessoryStyle;
|
|
55
27
|
/**
|
|
56
28
|
* If provided, this adds a left accessory to the cell. Left
|
|
57
29
|
* Accessories can be defined using WB components such as Icon,
|
|
@@ -60,14 +32,6 @@ export type CellProps = {
|
|
|
60
32
|
* of the Cell.
|
|
61
33
|
*/
|
|
62
34
|
leftAccessory?: Accessory;
|
|
63
|
-
/**
|
|
64
|
-
* Optional custom styles applied to the leftAccessory wrapper. For
|
|
65
|
-
* example, it can be used to set a custom minWidth or a custom
|
|
66
|
-
* alignment.
|
|
67
|
-
*
|
|
68
|
-
* NOTE: leftAccessoryStyle can only be used if leftAccessory is set.
|
|
69
|
-
*/
|
|
70
|
-
leftAccessoryStyle?: AccessoryStyle;
|
|
71
35
|
/**
|
|
72
36
|
* If provided, this adds a right accessory to the cell. Right
|
|
73
37
|
* Accessories can be defined using WB components such as Icon,
|
|
@@ -76,15 +40,6 @@ export type CellProps = {
|
|
|
76
40
|
* area of the Cell.
|
|
77
41
|
*/
|
|
78
42
|
rightAccessory?: Accessory;
|
|
79
|
-
/**
|
|
80
|
-
* Optional custom styles applied to the rightAccessory wrapper. For
|
|
81
|
-
* example, it can be used to set a custom minWidth or a custom
|
|
82
|
-
* alignment.
|
|
83
|
-
*
|
|
84
|
-
* NOTE: rightAccessoryStyle can only be used if rightAccessory is
|
|
85
|
-
* set.
|
|
86
|
-
*/
|
|
87
|
-
rightAccessoryStyle?: AccessoryStyle;
|
|
88
43
|
/**
|
|
89
44
|
* Adds a horizontal rule at the bottom of the cell that can be used to
|
|
90
45
|
* separate cells within groups such as lists. Defaults to `inset`.
|
|
@@ -95,9 +50,15 @@ export type CellProps = {
|
|
|
95
50
|
*/
|
|
96
51
|
role?: ClickableRole;
|
|
97
52
|
/**
|
|
98
|
-
*
|
|
53
|
+
* Custom styles for the elements of Cell. Useful if there are
|
|
54
|
+
* specific cases where spacing between elements needs to be customized.
|
|
99
55
|
*/
|
|
100
|
-
|
|
56
|
+
styles?: {
|
|
57
|
+
root?: StyleType;
|
|
58
|
+
content?: StyleType;
|
|
59
|
+
leftAccessory?: StyleType;
|
|
60
|
+
rightAccessory?: StyleType;
|
|
61
|
+
};
|
|
101
62
|
/**
|
|
102
63
|
* Optional test ID for e2e testing.
|
|
103
64
|
*/
|