Skip to content

Commit c1de024

Browse files
authored
Add named text size/weight lookups to @furn/design and switch Text component to use them (#4142)
* add common text concepts and remove theme-tokens reference from Text * update dependency profiles * add changeset
1 parent 01ed385 commit c1de024

9 files changed

Lines changed: 96 additions & 10 deletions

File tree

.changeset/spicy-camels-kick.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@fluentui-react-native/dependency-profiles": patch
3+
"@fluentui-react-native/text": patch
4+
"@fluentui-react-native/design": patch
5+
---
6+
7+
Add central font size/weight lookup by name to design package and consume in Text.tsx
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import {
2+
fontSize100,
3+
fontSize200,
4+
fontSize300,
5+
fontSize400,
6+
fontSize500,
7+
fontSize600,
8+
fontSize700,
9+
fontSize800,
10+
fontSize900,
11+
fontSize1000,
12+
fontWeightSemibold,
13+
fontWeightRegular,
14+
fontWeightMedium,
15+
fontWeightBold,
16+
} from '../tokens/global.generated';
17+
18+
/**
19+
* Represents the available font sizes for this platform. Available via key lookup
20+
*/
21+
export type FontSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
22+
23+
/**
24+
* Represents the available font weights for this platform. Available via key lookup
25+
*/
26+
export type FontWeight = 'bold' | 'medium' | 'regular' | 'semibold';
27+
28+
/**
29+
* Get the size value associated with a named font size for this platform
30+
* @param size The font size key to retrieve from the FONT_SIZES mapping.
31+
* @param defaultSize The default font size key to use if the specified size is not found.
32+
* @returns The corresponding font size value from the FONT_SIZES mapping.
33+
*/
34+
export const fontSize = (() => {
35+
let fontSizes: Record<FontSize, number>;
36+
return (size: FontSize, defaultSize: FontSize = 300) => {
37+
// initialize fontSizes one time when used
38+
fontSizes ??= {
39+
100: fontSize100,
40+
200: fontSize200,
41+
300: fontSize300,
42+
400: fontSize400,
43+
500: fontSize500,
44+
600: fontSize600,
45+
700: fontSize700,
46+
800: fontSize800,
47+
900: fontSize900,
48+
1000: fontSize1000,
49+
};
50+
return fontSizes[size] ?? fontSizes[defaultSize];
51+
};
52+
})();
53+
54+
/**
55+
* Get the weight value associated with a named font weight for this platform
56+
* @param weight The font weight key to retrieve from the FONT_WEIGHTS mapping.
57+
* @param defaultWeight The default font weight key to use if the specified weight is not found.
58+
* @returns The corresponding font weight value from the FONT_WEIGHTS mapping.
59+
*/
60+
export const fontWeight = (() => {
61+
let fontWeights: Record<FontWeight, string>;
62+
return (weight: FontWeight, defaultWeight: FontWeight = 'regular') => {
63+
// initialize fontWeights one time when used
64+
fontWeights ??= {
65+
bold: fontWeightBold,
66+
medium: fontWeightMedium,
67+
regular: fontWeightRegular,
68+
semibold: fontWeightSemibold,
69+
};
70+
return fontWeights[weight] ?? fontWeights[defaultWeight];
71+
};
72+
})();
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export type { FontSize, FontWeight } from './concepts/textAttributes';
2+
export { fontSize, fontWeight } from './concepts/textAttributes';

packages/components/Text/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@
3131
},
3232
"dependencies": {
3333
"@fluentui-react-native/adapters": "workspace:*",
34+
"@fluentui-react-native/design": "workspace:*",
3435
"@fluentui-react-native/framework": "workspace:*",
3536
"@fluentui-react-native/framework-base": "workspace:*",
3637
"@fluentui-react-native/interactive-hooks": "workspace:*",
37-
"@fluentui-react-native/theme-tokens": "workspace:*",
3838
"@fluentui-react-native/tokens": "workspace:*",
3939
"@uifabricshared/foundation-compose": "workspace:*"
4040
},

packages/components/Text/src/Text.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { UseTokens, FontWeightValue } from '@fluentui-react-native/framewor
66
import { fontStyles, useFluentTheme, compressible, patchTokens } from '@fluentui-react-native/framework';
77
import { mergeStyles } from '@fluentui-react-native/framework-base';
88
import { useKeyProps } from '@fluentui-react-native/interactive-hooks';
9-
import { globalTokens } from '@fluentui-react-native/theme-tokens';
9+
import { fontSize, fontWeight } from '@fluentui-react-native/design';
1010

1111
import type { TextProps, TextTokens } from './Text.types';
1212
import { textName } from './Text.types';
@@ -84,8 +84,8 @@ export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTo
8484
variant,
8585
fontFamily: font == 'base' ? 'primary' : font,
8686
fontMaximumSize: tokens.maximumFontSize,
87-
fontSize: globalTokens.font['size' + size],
88-
fontWeight: globalTokens.font.weight[weight] as FontWeightValue,
87+
fontSize: size !== undefined ? fontSize(size) : undefined,
88+
fontWeight: weight !== undefined ? (fontWeight(weight) as FontWeightValue) : undefined,
8989
// leave it undefined for tokens to be set by user
9090
fontStyle: italic ? 'italic' : undefined,
9191
textAlign: textAlign,

packages/components/Text/src/Text.types.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { ColorValue, Text, TextStyle } from 'react-native';
22

33
import type { ITextProps } from '@fluentui-react-native/adapters';
4+
import type { FontSize, FontWeight } from '@fluentui-react-native/design';
45
import type { FontTokens, FontVariantTokens, IForegroundColorTokens } from '@fluentui-react-native/framework';
56

67
export const textName = 'Text';
@@ -27,8 +28,8 @@ export type TextTokens = Omit<FontTokens, 'fontFamily'> &
2728

2829
export type TextAlign = 'start' | 'center' | 'end' | 'justify';
2930
export type TextFont = 'base' | 'monospace' | 'numeric';
30-
export type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
31-
export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
31+
export type TextSize = FontSize;
32+
export type TextWeight = FontWeight;
3233

3334
/**
3435
* Text props, based off of the standard react-native TextProps with some new extensions

packages/components/Text/tsconfig.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
{
1212
"path": "../../utils/adapters/tsconfig.json"
1313
},
14+
{
15+
"path": "../../agentic-design/tsconfig.json"
16+
},
1417
{
1518
"path": "../../framework-base/tsconfig.json"
1619
},
@@ -26,9 +29,6 @@
2629
{
2730
"path": "../../utils/test-tools/tsconfig.json"
2831
},
29-
{
30-
"path": "../../theming/theme-tokens/tsconfig.json"
31-
},
3232
{
3333
"path": "../../utils/tokens/tsconfig.json"
3434
},

packages/dependency-profiles/src/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ module.exports = {
66
"name": "@fluentui-react-native/tester",
77
"version": "0.170.53"
88
},
9+
"@fluentui-react-native/design": {
10+
"name": "@fluentui-react-native/design",
11+
"version": "0.1.0"
12+
},
913
"@fluentui-react-native/avatar": {
1014
"name": "@fluentui-react-native/avatar",
1115
"version": "1.13.5"

yarn.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5392,12 +5392,12 @@ __metadata:
53925392
dependencies:
53935393
"@babel/core": "catalog:"
53945394
"@fluentui-react-native/adapters": "workspace:*"
5395+
"@fluentui-react-native/design": "workspace:*"
53955396
"@fluentui-react-native/framework": "workspace:*"
53965397
"@fluentui-react-native/framework-base": "workspace:*"
53975398
"@fluentui-react-native/interactive-hooks": "workspace:*"
53985399
"@fluentui-react-native/scripts": "workspace:*"
53995400
"@fluentui-react-native/test-tools": "workspace:*"
5400-
"@fluentui-react-native/theme-tokens": "workspace:*"
54015401
"@fluentui-react-native/tokens": "workspace:*"
54025402
"@react-native-community/cli": "npm:^20.0.0"
54035403
"@react-native-community/cli-platform-android": "npm:^20.0.0"

0 commit comments

Comments
 (0)