From fe480f5cb36b2def44750aa62c2905b5a36d7869 Mon Sep 17 00:00:00 2001 From: Barry van Veen Date: Thu, 10 Sep 2026 16:36:01 +0200 Subject: [PATCH 1/3] Add new text styles --- package.json | 2 +- src/components/InputPanel.tsx | 5 +--- .../__snapshots__/InputPanel.test.tsx.snap | 24 +++++++++---------- src/theme/tokens/text.ts | 17 +++++++++++++ src/theme/types.ts | 4 ++++ 5 files changed, 35 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index e55bfea..ddc210f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@observation.org/react-native-components", - "version": "1.96.0", + "version": "1.97.0", "main": "src/index.ts", "exports": { ".": "./src/index.ts", diff --git a/src/components/InputPanel.tsx b/src/components/InputPanel.tsx index e94c7e5..df7e0e6 100644 --- a/src/components/InputPanel.tsx +++ b/src/components/InputPanel.tsx @@ -72,10 +72,7 @@ const createStyles = (theme: Theme) => { paddingHorizontal: theme.margin.common, }, headerTextStyle: { - ...theme.font.extraSmall, - lineHeight: theme.font.extraSmall.fontSize, - letterSpacing: 0.03 * theme.font.extraSmall.fontSize, - color: theme.color.text.system.subtler, + ...theme.text.inputPanelHeader, }, contentContainer: { flex: 1, diff --git a/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap b/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap index 04086f8..2ab5e88 100644 --- a/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap @@ -47,7 +47,7 @@ exports[`InputPanel Rendering Capitalize value 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 7, }, ] } @@ -63,7 +63,7 @@ exports[`InputPanel Rendering Capitalize value 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 14, } } > @@ -153,7 +153,7 @@ exports[`InputPanel Rendering Disabled 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 7, }, ] } @@ -169,7 +169,7 @@ exports[`InputPanel Rendering Disabled 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 14, } } > @@ -348,7 +348,7 @@ exports[`InputPanel Rendering No value 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 7, }, ] } @@ -364,7 +364,7 @@ exports[`InputPanel Rendering No value 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 14, } } > @@ -454,7 +454,7 @@ exports[`InputPanel Rendering With content 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 7, }, ] } @@ -470,7 +470,7 @@ exports[`InputPanel Rendering With content 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 14, } } > @@ -560,7 +560,7 @@ exports[`InputPanel Rendering With value style 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 7, }, ] } @@ -576,7 +576,7 @@ exports[`InputPanel Rendering With value style 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 14, } } > @@ -668,7 +668,7 @@ exports[`InputPanel Rendering Without chevron 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 7, }, ] } @@ -684,7 +684,7 @@ exports[`InputPanel Rendering Without chevron 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 14, } } > diff --git a/src/theme/tokens/text.ts b/src/theme/tokens/text.ts index 70bd06e..00df0b5 100644 --- a/src/theme/tokens/text.ts +++ b/src/theme/tokens/text.ts @@ -27,6 +27,14 @@ export const createTextStyles = (theme: Theme) => fontWeight: 'bold', color: theme.color.text.system.strong, }, + speciesLocalNameCompact: { + fontFamily: 'Ubuntu', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 22, + fontWeight: 'bold', + color: theme.color.text.system.strong, + }, speciesScientificName: { fontFamily: 'Ubuntu', fontStyle: 'italic', @@ -85,4 +93,13 @@ export const createTextStyles = (theme: Theme) => ...theme.font.extraSmall, color: theme.color.text.system.subtler, }, + inputPanelHeader: { + fontFamily: 'Ubuntu', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 14, + fontWeight: 'normal', + letterSpacing: 0.3, + color: theme.color.text.system.subtler, + }, }) satisfies Text diff --git a/src/theme/types.ts b/src/theme/types.ts index 6e6eb53..fd4504d 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -301,7 +301,9 @@ export type TextName = | 'thumbnail' | 'subLabel' | 'speciesLocalName' + | 'speciesLocalNameCompact' | 'speciesScientificName' + | 'inputPanelHeader' | keyof TextNameOverrides export interface Text { @@ -323,6 +325,8 @@ export interface Text { thumbnail: TextStyle subLabel: TextStyle speciesLocalName: TextStyle + speciesLocalNameCompact: TextStyle speciesScientificName: TextStyle + inputPanelHeader: TextStyle [name: string]: TextStyle } From 0f39f2ecaa55ac6800f7cc21d180a73509814dd1 Mon Sep 17 00:00:00 2001 From: Barry van Veen Date: Mon, 14 Sep 2026 10:17:31 +0200 Subject: [PATCH 2/3] Review comments --- .../__snapshots__/InputPanel.test.tsx.snap | 24 ++++++------- src/theme/tokens/text.ts | 35 ++++++++++--------- 2 files changed, 30 insertions(+), 29 deletions(-) diff --git a/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap b/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap index 2ab5e88..d71f7cb 100644 --- a/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap @@ -47,7 +47,7 @@ exports[`InputPanel Rendering Capitalize value 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 7, + "paddingVertical": 8, }, ] } @@ -63,7 +63,7 @@ exports[`InputPanel Rendering Capitalize value 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 14, + "lineHeight": 12, } } > @@ -153,7 +153,7 @@ exports[`InputPanel Rendering Disabled 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 7, + "paddingVertical": 8, }, ] } @@ -169,7 +169,7 @@ exports[`InputPanel Rendering Disabled 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 14, + "lineHeight": 12, } } > @@ -348,7 +348,7 @@ exports[`InputPanel Rendering No value 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 7, + "paddingVertical": 8, }, ] } @@ -364,7 +364,7 @@ exports[`InputPanel Rendering No value 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 14, + "lineHeight": 12, } } > @@ -454,7 +454,7 @@ exports[`InputPanel Rendering With content 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 7, + "paddingVertical": 8, }, ] } @@ -470,7 +470,7 @@ exports[`InputPanel Rendering With content 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 14, + "lineHeight": 12, } } > @@ -560,7 +560,7 @@ exports[`InputPanel Rendering With value style 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 7, + "paddingVertical": 8, }, ] } @@ -576,7 +576,7 @@ exports[`InputPanel Rendering With value style 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 14, + "lineHeight": 12, } } > @@ -668,7 +668,7 @@ exports[`InputPanel Rendering Without chevron 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 7, + "paddingVertical": 8, }, ] } @@ -684,7 +684,7 @@ exports[`InputPanel Rendering Without chevron 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 14, + "lineHeight": 12, } } > diff --git a/src/theme/tokens/text.ts b/src/theme/tokens/text.ts index 00df0b5..aa65232 100644 --- a/src/theme/tokens/text.ts +++ b/src/theme/tokens/text.ts @@ -1,7 +1,18 @@ import { Text, Theme } from '../types' -export const createTextStyles = (theme: Theme) => - ({ +/* eslint-disable observation/no-function-without-logging */ + +export const createTextStyles = (theme: Theme) => { + const speciesLocalName = { + fontFamily: 'Ubuntu', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 24, + fontWeight: 'bold', + color: theme.color.text.system.strong, + } satisfies Text['speciesLocalName'] + + return { iconLabel: { ...theme.font.extraSmall, color: theme.color.text.system.subtle, @@ -19,21 +30,10 @@ export const createTextStyles = (theme: Theme) => fontStyle: 'italic', color: theme.color.text.system.subtler, }, - speciesLocalName: { - fontFamily: 'Ubuntu', - fontStyle: 'normal', - fontSize: 16, - lineHeight: 24, - fontWeight: 'bold', - color: theme.color.text.system.strong, - }, + speciesLocalName, speciesLocalNameCompact: { - fontFamily: 'Ubuntu', - fontStyle: 'normal', - fontSize: 16, + ...speciesLocalName, lineHeight: 22, - fontWeight: 'bold', - color: theme.color.text.system.strong, }, speciesScientificName: { fontFamily: 'Ubuntu', @@ -97,9 +97,10 @@ export const createTextStyles = (theme: Theme) => fontFamily: 'Ubuntu', fontStyle: 'normal', fontSize: 10, - lineHeight: 14, + lineHeight: 12, fontWeight: 'normal', letterSpacing: 0.3, color: theme.color.text.system.subtler, }, - }) satisfies Text + } satisfies Text +} From 729ec64c9e32583b3aa21a0a981bd2a451b53029 Mon Sep 17 00:00:00 2001 From: Barry van Veen Date: Mon, 14 Sep 2026 13:57:49 +0200 Subject: [PATCH 3/3] Review comment --- eslint.config.mjs | 2 +- src/theme/tokens/text.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index dcf0086..38944bd 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -59,7 +59,7 @@ export default [ 'observation/no-function-without-logging': [ 'error', { - ignoreList: ['createStyles'], + ignoreList: ['createStyles', 'createTextStyles'], }, ], diff --git a/src/theme/tokens/text.ts b/src/theme/tokens/text.ts index aa65232..820ac0c 100644 --- a/src/theme/tokens/text.ts +++ b/src/theme/tokens/text.ts @@ -1,7 +1,5 @@ import { Text, Theme } from '../types' -/* eslint-disable observation/no-function-without-logging */ - export const createTextStyles = (theme: Theme) => { const speciesLocalName = { fontFamily: 'Ubuntu',