@yahoo/uds-mobile 2.20.0 → 2.20.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/dist/components/Pagination/paginationTheme.cjs +4 -2
- package/dist/components/Pagination/paginationTheme.d.cts +1 -1
- package/dist/components/Pagination/paginationTheme.d.ts +1 -1
- package/dist/components/Pagination/paginationTheme.js +4 -2
- package/dist/components/Pagination/paginationTheme.js.map +1 -1
- package/generated/styles.d.ts +1 -1
- package/package.json +1 -1
|
@@ -46,14 +46,16 @@ function getMergedPaginationIconStyle(theme, size, variant, active, state) {
|
|
|
46
46
|
function getPaginationRootGapStyle(theme, size) {
|
|
47
47
|
return getPaginationSizeLayerStyle(theme, size, "root");
|
|
48
48
|
}
|
|
49
|
-
/** Control height/width from item padding plus icon size, matching web
|
|
49
|
+
/** Control height/width from item padding plus max(icon size, text line-height), matching web. */
|
|
50
50
|
function getPaginationControlMetrics(theme, size) {
|
|
51
51
|
const itemStyle = getPaginationSizeLayerStyle(theme, size, "item");
|
|
52
52
|
const iconStyle = getPaginationSizeLayerStyle(theme, size, "icon");
|
|
53
|
+
const textStyle = getPaginationSizeLayerStyle(theme, size, "text");
|
|
53
54
|
const padding = (typeof itemStyle.padding === "number" ? itemStyle.padding : void 0) ?? (typeof itemStyle.paddingVertical === "number" ? itemStyle.paddingVertical : void 0) ?? 8;
|
|
54
55
|
const iconSize = (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0) ?? 16;
|
|
56
|
+
const lineHeight = typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0;
|
|
55
57
|
return {
|
|
56
|
-
controlSize: padding * 2 + iconSize,
|
|
58
|
+
controlSize: padding * 2 + Math.max(iconSize, lineHeight ?? iconSize),
|
|
57
59
|
borderRadius: itemStyle.borderRadius
|
|
58
60
|
};
|
|
59
61
|
}
|
|
@@ -18,7 +18,7 @@ declare function getMergedPaginationTextStyle(theme: PaginationTheme, size: Pagi
|
|
|
18
18
|
/** Icon sizing from size layer; color follows variant rootText. */
|
|
19
19
|
declare function getMergedPaginationIconStyle(theme: PaginationTheme, size: PaginationSize, variant: PaginationVariant, active: PaginationActiveState, state: InteractionState): TextStyle;
|
|
20
20
|
declare function getPaginationRootGapStyle(theme: PaginationTheme, size: PaginationSize): ViewStyle;
|
|
21
|
-
/** Control height/width from item padding plus icon size, matching web
|
|
21
|
+
/** Control height/width from item padding plus max(icon size, text line-height), matching web. */
|
|
22
22
|
declare function getPaginationControlMetrics(theme: PaginationTheme, size: PaginationSize): {
|
|
23
23
|
controlSize: number;
|
|
24
24
|
borderRadius: ViewStyle['borderRadius'];
|
|
@@ -18,7 +18,7 @@ declare function getMergedPaginationTextStyle(theme: PaginationTheme, size: Pagi
|
|
|
18
18
|
/** Icon sizing from size layer; color follows variant rootText. */
|
|
19
19
|
declare function getMergedPaginationIconStyle(theme: PaginationTheme, size: PaginationSize, variant: PaginationVariant, active: PaginationActiveState, state: InteractionState): TextStyle;
|
|
20
20
|
declare function getPaginationRootGapStyle(theme: PaginationTheme, size: PaginationSize): ViewStyle;
|
|
21
|
-
/** Control height/width from item padding plus icon size, matching web
|
|
21
|
+
/** Control height/width from item padding plus max(icon size, text line-height), matching web. */
|
|
22
22
|
declare function getPaginationControlMetrics(theme: PaginationTheme, size: PaginationSize): {
|
|
23
23
|
controlSize: number;
|
|
24
24
|
borderRadius: ViewStyle['borderRadius'];
|
|
@@ -45,14 +45,16 @@ function getMergedPaginationIconStyle(theme, size, variant, active, state) {
|
|
|
45
45
|
function getPaginationRootGapStyle(theme, size) {
|
|
46
46
|
return getPaginationSizeLayerStyle(theme, size, "root");
|
|
47
47
|
}
|
|
48
|
-
/** Control height/width from item padding plus icon size, matching web
|
|
48
|
+
/** Control height/width from item padding plus max(icon size, text line-height), matching web. */
|
|
49
49
|
function getPaginationControlMetrics(theme, size) {
|
|
50
50
|
const itemStyle = getPaginationSizeLayerStyle(theme, size, "item");
|
|
51
51
|
const iconStyle = getPaginationSizeLayerStyle(theme, size, "icon");
|
|
52
|
+
const textStyle = getPaginationSizeLayerStyle(theme, size, "text");
|
|
52
53
|
const padding = (typeof itemStyle.padding === "number" ? itemStyle.padding : void 0) ?? (typeof itemStyle.paddingVertical === "number" ? itemStyle.paddingVertical : void 0) ?? 8;
|
|
53
54
|
const iconSize = (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0) ?? 16;
|
|
55
|
+
const lineHeight = typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0;
|
|
54
56
|
return {
|
|
55
|
-
controlSize: padding * 2 + iconSize,
|
|
57
|
+
controlSize: padding * 2 + Math.max(iconSize, lineHeight ?? iconSize),
|
|
56
58
|
borderRadius: itemStyle.borderRadius
|
|
57
59
|
};
|
|
58
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginationTheme.js","names":[],"sources":["../../../src/components/Pagination/paginationTheme.ts"],"sourcesContent":["import type { PaginationSize, PaginationVariant } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\nimport { PAGINATION_DEFAULT_COMPONENTS } from './paginationDefaultComponents';\n\ntype PaginationActiveState = 'on' | 'off';\ntype PaginationVariantLayer = 'root' | 'rootText';\ntype InteractionState = 'rest' | 'pressed';\n\ntype PaginationTheme = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n components: Record<string, any>;\n};\n\nfunction paginationSizePath(\n size: PaginationSize,\n layer: 'root' | 'item' | 'icon' | 'text',\n): string {\n return `pagination/size/${size}/${layer}/rest`;\n}\n\nfunction paginationVariantPath(\n variant: PaginationVariant,\n active: PaginationActiveState,\n layer: PaginationVariantLayer,\n state: InteractionState,\n): string {\n return `pagination/variant/${variant}/active/${active}/${layer}/${state}`;\n}\n\nfunction getLayerStyle(theme: PaginationTheme, path: string): ViewStyle | TextStyle {\n const style = theme.components[path];\n if (style && typeof style === 'object' && Object.keys(style).length > 0) {\n return style;\n }\n\n const fallback = PAGINATION_DEFAULT_COMPONENTS[path];\n return fallback && typeof fallback === 'object' ? fallback : {};\n}\n\nexport function getPaginationSizeLayerStyle(\n theme: PaginationTheme,\n size: PaginationSize,\n layer: 'root' | 'item' | 'icon' | 'text',\n): ViewStyle | TextStyle {\n return getLayerStyle(theme, paginationSizePath(size, layer));\n}\n\nexport function getPaginationVariantLayerStyle(\n theme: PaginationTheme,\n variant: PaginationVariant,\n active: PaginationActiveState,\n layer: PaginationVariantLayer,\n state: InteractionState,\n): ViewStyle | TextStyle {\n return getLayerStyle(theme, paginationVariantPath(variant, active, layer, state));\n}\n\n/** Page control container: size item + variant root (matches web stacking). */\nexport function getMergedPaginationControlRootStyle(\n theme: PaginationTheme,\n size: PaginationSize,\n variant: PaginationVariant,\n active: PaginationActiveState,\n state: InteractionState,\n): ViewStyle {\n return {\n ...(getPaginationSizeLayerStyle(theme, size, 'item') as object),\n ...(getPaginationVariantLayerStyle(theme, variant, active, 'root', state) as object),\n } as ViewStyle;\n}\n\n/** Label typography + color: size text + variant rootText. */\nexport function getMergedPaginationTextStyle(\n theme: PaginationTheme,\n size: PaginationSize,\n variant: PaginationVariant,\n active: PaginationActiveState,\n state: InteractionState,\n): TextStyle {\n return {\n ...(getPaginationSizeLayerStyle(theme, size, 'text') as object),\n ...(getPaginationVariantLayerStyle(theme, variant, active, 'rootText', state) as object),\n } as TextStyle;\n}\n\n/** Icon sizing from size layer; color follows variant rootText. */\nexport function getMergedPaginationIconStyle(\n theme: PaginationTheme,\n size: PaginationSize,\n variant: PaginationVariant,\n active: PaginationActiveState,\n state: InteractionState,\n): TextStyle {\n const iconStyle = getPaginationSizeLayerStyle(theme, size, 'icon') as TextStyle;\n const textStyle = getPaginationVariantLayerStyle(\n theme,\n variant,\n active,\n 'rootText',\n state,\n ) as TextStyle;\n\n return {\n ...iconStyle,\n ...(textStyle.color !== undefined ? { color: textStyle.color } : undefined),\n } as TextStyle;\n}\n\nexport function getPaginationRootGapStyle(theme: PaginationTheme, size: PaginationSize): ViewStyle {\n return getPaginationSizeLayerStyle(theme, size, 'root') as ViewStyle;\n}\n\n/** Control height/width from item padding plus icon size, matching web
|
|
1
|
+
{"version":3,"file":"paginationTheme.js","names":[],"sources":["../../../src/components/Pagination/paginationTheme.ts"],"sourcesContent":["import type { PaginationSize, PaginationVariant } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\nimport { PAGINATION_DEFAULT_COMPONENTS } from './paginationDefaultComponents';\n\ntype PaginationActiveState = 'on' | 'off';\ntype PaginationVariantLayer = 'root' | 'rootText';\ntype InteractionState = 'rest' | 'pressed';\n\ntype PaginationTheme = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n components: Record<string, any>;\n};\n\nfunction paginationSizePath(\n size: PaginationSize,\n layer: 'root' | 'item' | 'icon' | 'text',\n): string {\n return `pagination/size/${size}/${layer}/rest`;\n}\n\nfunction paginationVariantPath(\n variant: PaginationVariant,\n active: PaginationActiveState,\n layer: PaginationVariantLayer,\n state: InteractionState,\n): string {\n return `pagination/variant/${variant}/active/${active}/${layer}/${state}`;\n}\n\nfunction getLayerStyle(theme: PaginationTheme, path: string): ViewStyle | TextStyle {\n const style = theme.components[path];\n if (style && typeof style === 'object' && Object.keys(style).length > 0) {\n return style;\n }\n\n const fallback = PAGINATION_DEFAULT_COMPONENTS[path];\n return fallback && typeof fallback === 'object' ? fallback : {};\n}\n\nexport function getPaginationSizeLayerStyle(\n theme: PaginationTheme,\n size: PaginationSize,\n layer: 'root' | 'item' | 'icon' | 'text',\n): ViewStyle | TextStyle {\n return getLayerStyle(theme, paginationSizePath(size, layer));\n}\n\nexport function getPaginationVariantLayerStyle(\n theme: PaginationTheme,\n variant: PaginationVariant,\n active: PaginationActiveState,\n layer: PaginationVariantLayer,\n state: InteractionState,\n): ViewStyle | TextStyle {\n return getLayerStyle(theme, paginationVariantPath(variant, active, layer, state));\n}\n\n/** Page control container: size item + variant root (matches web stacking). */\nexport function getMergedPaginationControlRootStyle(\n theme: PaginationTheme,\n size: PaginationSize,\n variant: PaginationVariant,\n active: PaginationActiveState,\n state: InteractionState,\n): ViewStyle {\n return {\n ...(getPaginationSizeLayerStyle(theme, size, 'item') as object),\n ...(getPaginationVariantLayerStyle(theme, variant, active, 'root', state) as object),\n } as ViewStyle;\n}\n\n/** Label typography + color: size text + variant rootText. */\nexport function getMergedPaginationTextStyle(\n theme: PaginationTheme,\n size: PaginationSize,\n variant: PaginationVariant,\n active: PaginationActiveState,\n state: InteractionState,\n): TextStyle {\n return {\n ...(getPaginationSizeLayerStyle(theme, size, 'text') as object),\n ...(getPaginationVariantLayerStyle(theme, variant, active, 'rootText', state) as object),\n } as TextStyle;\n}\n\n/** Icon sizing from size layer; color follows variant rootText. */\nexport function getMergedPaginationIconStyle(\n theme: PaginationTheme,\n size: PaginationSize,\n variant: PaginationVariant,\n active: PaginationActiveState,\n state: InteractionState,\n): TextStyle {\n const iconStyle = getPaginationSizeLayerStyle(theme, size, 'icon') as TextStyle;\n const textStyle = getPaginationVariantLayerStyle(\n theme,\n variant,\n active,\n 'rootText',\n state,\n ) as TextStyle;\n\n return {\n ...iconStyle,\n ...(textStyle.color !== undefined ? { color: textStyle.color } : undefined),\n } as TextStyle;\n}\n\nexport function getPaginationRootGapStyle(theme: PaginationTheme, size: PaginationSize): ViewStyle {\n return getPaginationSizeLayerStyle(theme, size, 'root') as ViewStyle;\n}\n\n/** Control height/width from item padding plus max(icon size, text line-height), matching web. */\nexport function getPaginationControlMetrics(\n theme: PaginationTheme,\n size: PaginationSize,\n): { controlSize: number; borderRadius: ViewStyle['borderRadius'] } {\n const itemStyle = getPaginationSizeLayerStyle(theme, size, 'item') as ViewStyle;\n const iconStyle = getPaginationSizeLayerStyle(theme, size, 'icon') as TextStyle;\n const textStyle = getPaginationSizeLayerStyle(theme, size, 'text') as TextStyle;\n\n const padding =\n (typeof itemStyle.padding === 'number' ? itemStyle.padding : undefined) ??\n (typeof itemStyle.paddingVertical === 'number' ? itemStyle.paddingVertical : undefined) ??\n 8;\n\n const iconSize =\n (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined) ??\n 16;\n\n const lineHeight = typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined;\n\n return {\n controlSize: padding * 2 + Math.max(iconSize, lineHeight ?? iconSize),\n borderRadius: itemStyle.borderRadius,\n };\n}\n"],"mappings":";;;AAcA,SAAS,mBACP,MACA,OACQ;CACR,OAAO,mBAAmB,KAAK,GAAG,MAAM;;AAG1C,SAAS,sBACP,SACA,QACA,OACA,OACQ;CACR,OAAO,sBAAsB,QAAQ,UAAU,OAAO,GAAG,MAAM,GAAG;;AAGpE,SAAS,cAAc,OAAwB,MAAqC;CAClF,MAAM,QAAQ,MAAM,WAAW;CAC/B,IAAI,SAAS,OAAO,UAAU,YAAY,OAAO,KAAK,MAAM,CAAC,SAAS,GACpE,OAAO;CAGT,MAAM,WAAW,8BAA8B;CAC/C,OAAO,YAAY,OAAO,aAAa,WAAW,WAAW,EAAE;;AAGjE,SAAgB,4BACd,OACA,MACA,OACuB;CACvB,OAAO,cAAc,OAAO,mBAAmB,MAAM,MAAM,CAAC;;AAG9D,SAAgB,+BACd,OACA,SACA,QACA,OACA,OACuB;CACvB,OAAO,cAAc,OAAO,sBAAsB,SAAS,QAAQ,OAAO,MAAM,CAAC;;;AAInF,SAAgB,oCACd,OACA,MACA,SACA,QACA,OACW;CACX,OAAO;EACL,GAAI,4BAA4B,OAAO,MAAM,OAAO;EACpD,GAAI,+BAA+B,OAAO,SAAS,QAAQ,QAAQ,MAAM;EAC1E;;;AAIH,SAAgB,6BACd,OACA,MACA,SACA,QACA,OACW;CACX,OAAO;EACL,GAAI,4BAA4B,OAAO,MAAM,OAAO;EACpD,GAAI,+BAA+B,OAAO,SAAS,QAAQ,YAAY,MAAM;EAC9E;;;AAIH,SAAgB,6BACd,OACA,MACA,SACA,QACA,OACW;CACX,MAAM,YAAY,4BAA4B,OAAO,MAAM,OAAO;CAClE,MAAM,YAAY,+BAChB,OACA,SACA,QACA,YACA,MACD;CAED,OAAO;EACL,GAAG;EACH,GAAI,UAAU,UAAU,KAAA,IAAY,EAAE,OAAO,UAAU,OAAO,GAAG,KAAA;EAClE;;AAGH,SAAgB,0BAA0B,OAAwB,MAAiC;CACjG,OAAO,4BAA4B,OAAO,MAAM,OAAO;;;AAIzD,SAAgB,4BACd,OACA,MACkE;CAClE,MAAM,YAAY,4BAA4B,OAAO,MAAM,OAAO;CAClE,MAAM,YAAY,4BAA4B,OAAO,MAAM,OAAO;CAClE,MAAM,YAAY,4BAA4B,OAAO,MAAM,OAAO;CAElE,MAAM,WACH,OAAO,UAAU,YAAY,WAAW,UAAU,UAAU,KAAA,OAC5D,OAAO,UAAU,oBAAoB,WAAW,UAAU,kBAAkB,KAAA,MAC7E;CAEF,MAAM,YACH,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW,KAAA,OAC9D,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA,MACnE;CAEF,MAAM,aAAa,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA;CAErF,OAAO;EACL,aAAa,UAAU,IAAI,KAAK,IAAI,UAAU,cAAc,SAAS;EACrE,cAAc,UAAU;EACzB"}
|
package/generated/styles.d.ts
CHANGED
|
@@ -2156,7 +2156,7 @@ export declare const switchStyles: {
|
|
|
2156
2156
|
color: string;
|
|
2157
2157
|
};
|
|
2158
2158
|
handle: { height: number; width: number; backgroundColor: string; boxShadow: string };
|
|
2159
|
-
handleIcon: { fontSize: number; iconSizeToken: 'sm'; lineHeight: number; color: string };
|
|
2159
|
+
handleIcon: { fontSize: number; iconSizeToken: 'sm' | 'xs'; lineHeight: number; color: string };
|
|
2160
2160
|
switch: {
|
|
2161
2161
|
borderWidth: number;
|
|
2162
2162
|
height: number;
|