From 35901163dcc95e35c76ff386e43045e29d3cef15 Mon Sep 17 00:00:00 2001 From: gremlin529 <56889386+gremlin529@users.noreply.github.com> Date: Tue, 24 Oct 2023 11:17:12 -0700 Subject: [PATCH 1/4] finishing up button changes --- .../Button/src/ButtonTokens.android.ts | 5 +-- .../components/Button/src/ButtonTokens.ios.ts | 33 ++++++++++--------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/components/Button/src/ButtonTokens.android.ts b/packages/components/Button/src/ButtonTokens.android.ts index 61ba4c7600..3d7a7aa3c1 100644 --- a/packages/components/Button/src/ButtonTokens.android.ts +++ b/packages/components/Button/src/ButtonTokens.android.ts @@ -34,7 +34,6 @@ export const defaultButtonTokens: TokenSettings = () => }, large: { paddingHorizontal: globalTokens.size200, - paddingVertical: globalTokens.size120, borderRadius: globalTokens.corner.radius60, iconSize: 20, outline: { @@ -43,12 +42,11 @@ export const defaultButtonTokens: TokenSettings = () => }, spacingIconContentBefore: globalTokens.size80, spacingIconContentAfter: globalTokens.size80, - minHeight: 36, + minHeight: 48, minWidth: 36, }, medium: { paddingHorizontal: globalTokens.size120, - paddingVertical: globalTokens.size80, borderRadius: globalTokens.corner.radius40, iconSize: 20, outline: { @@ -62,7 +60,6 @@ export const defaultButtonTokens: TokenSettings = () => }, small: { paddingHorizontal: globalTokens.size80, - paddingVertical: globalTokens.size40, borderRadius: globalTokens.corner.radius40, iconSize: 16, outline: { diff --git a/packages/components/Button/src/ButtonTokens.ios.ts b/packages/components/Button/src/ButtonTokens.ios.ts index e37c0bd069..9601a52965 100644 --- a/packages/components/Button/src/ButtonTokens.ios.ts +++ b/packages/components/Button/src/ButtonTokens.ios.ts @@ -10,44 +10,46 @@ export const defaultButtonTokens: TokenSettings = () => width: '100%', }, medium: { - padding: globalTokens.size80, + paddingHorizontal: globalTokens.size120, borderWidth: globalTokens.stroke.width10, + minHeight: 40, iconSize: 16, focused: { borderWidth: 0, - padding: globalTokens.size100, + padding: globalTokens.size120, }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.size120, hasIconAfter: { - spacingIconContentAfter: globalTokens.size100, + spacingIconContentAfter: globalTokens.size80, }, hasIconBefore: { - spacingIconContentBefore: globalTokens.size100, + spacingIconContentBefore: globalTokens.size80, }, focused: { - paddingHorizontal: globalTokens.size160, + paddingHorizontal: globalTokens.size120, }, }, }, small: { - padding: globalTokens.size80 - globalTokens.stroke.width10, + padding: globalTokens.size60, borderWidth: globalTokens.stroke.width10, + minHeight: 28, iconSize: 16, focused: { borderWidth: 0, - padding: globalTokens.size80, + padding: globalTokens.size60, }, hasContent: { minWidth: 64, minHeight: 24, paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, hasIconAfter: { - spacingIconContentAfter: globalTokens.size80, + spacingIconContentAfter: globalTokens.size60, }, hasIconBefore: { - spacingIconContentBefore: globalTokens.size80, + spacingIconContentBefore: globalTokens.size60, }, focused: { paddingHorizontal: globalTokens.size120, @@ -55,21 +57,22 @@ export const defaultButtonTokens: TokenSettings = () => }, }, large: { - padding: globalTokens.size120 - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.size160, borderWidth: globalTokens.stroke.width10, + minHeight: 52, iconSize: 20, focused: { borderWidth: 0, - padding: globalTokens.size120, + padding: globalTokens.size160, }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.size160, hasIconAfter: { - spacingIconContentAfter: globalTokens.size100, + spacingIconContentAfter: globalTokens.size80, }, hasIconBefore: { - spacingIconContentBefore: globalTokens.size100, + spacingIconContentBefore: globalTokens.size80, }, focused: { paddingHorizontal: globalTokens.size160, From 1efa947f2886d9ff11655d7160f8df2fc630d8f4 Mon Sep 17 00:00:00 2001 From: gremlin529 <56889386+gremlin529@users.noreply.github.com> Date: Tue, 24 Oct 2023 11:33:57 -0700 Subject: [PATCH 2/4] Revert "finishing up button changes" This reverts commit 35901163dcc95e35c76ff386e43045e29d3cef15. --- .../Button/src/ButtonTokens.android.ts | 5 ++- .../components/Button/src/ButtonTokens.ios.ts | 33 +++++++++---------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/components/Button/src/ButtonTokens.android.ts b/packages/components/Button/src/ButtonTokens.android.ts index 3d7a7aa3c1..61ba4c7600 100644 --- a/packages/components/Button/src/ButtonTokens.android.ts +++ b/packages/components/Button/src/ButtonTokens.android.ts @@ -34,6 +34,7 @@ export const defaultButtonTokens: TokenSettings = () => }, large: { paddingHorizontal: globalTokens.size200, + paddingVertical: globalTokens.size120, borderRadius: globalTokens.corner.radius60, iconSize: 20, outline: { @@ -42,11 +43,12 @@ export const defaultButtonTokens: TokenSettings = () => }, spacingIconContentBefore: globalTokens.size80, spacingIconContentAfter: globalTokens.size80, - minHeight: 48, + minHeight: 36, minWidth: 36, }, medium: { paddingHorizontal: globalTokens.size120, + paddingVertical: globalTokens.size80, borderRadius: globalTokens.corner.radius40, iconSize: 20, outline: { @@ -60,6 +62,7 @@ export const defaultButtonTokens: TokenSettings = () => }, small: { paddingHorizontal: globalTokens.size80, + paddingVertical: globalTokens.size40, borderRadius: globalTokens.corner.radius40, iconSize: 16, outline: { diff --git a/packages/components/Button/src/ButtonTokens.ios.ts b/packages/components/Button/src/ButtonTokens.ios.ts index 9601a52965..e37c0bd069 100644 --- a/packages/components/Button/src/ButtonTokens.ios.ts +++ b/packages/components/Button/src/ButtonTokens.ios.ts @@ -10,46 +10,44 @@ export const defaultButtonTokens: TokenSettings = () => width: '100%', }, medium: { - paddingHorizontal: globalTokens.size120, + padding: globalTokens.size80, borderWidth: globalTokens.stroke.width10, - minHeight: 40, iconSize: 16, focused: { borderWidth: 0, - padding: globalTokens.size120, + padding: globalTokens.size100, }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.size120, + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, hasIconAfter: { - spacingIconContentAfter: globalTokens.size80, + spacingIconContentAfter: globalTokens.size100, }, hasIconBefore: { - spacingIconContentBefore: globalTokens.size80, + spacingIconContentBefore: globalTokens.size100, }, focused: { - paddingHorizontal: globalTokens.size120, + paddingHorizontal: globalTokens.size160, }, }, }, small: { - padding: globalTokens.size60, + padding: globalTokens.size80 - globalTokens.stroke.width10, borderWidth: globalTokens.stroke.width10, - minHeight: 28, iconSize: 16, focused: { borderWidth: 0, - padding: globalTokens.size60, + padding: globalTokens.size80, }, hasContent: { minWidth: 64, minHeight: 24, paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, hasIconAfter: { - spacingIconContentAfter: globalTokens.size60, + spacingIconContentAfter: globalTokens.size80, }, hasIconBefore: { - spacingIconContentBefore: globalTokens.size60, + spacingIconContentBefore: globalTokens.size80, }, focused: { paddingHorizontal: globalTokens.size120, @@ -57,22 +55,21 @@ export const defaultButtonTokens: TokenSettings = () => }, }, large: { - paddingHorizontal: globalTokens.size160, + padding: globalTokens.size120 - globalTokens.stroke.width10, borderWidth: globalTokens.stroke.width10, - minHeight: 52, iconSize: 20, focused: { borderWidth: 0, - padding: globalTokens.size160, + padding: globalTokens.size120, }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.size160, + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, hasIconAfter: { - spacingIconContentAfter: globalTokens.size80, + spacingIconContentAfter: globalTokens.size100, }, hasIconBefore: { - spacingIconContentBefore: globalTokens.size80, + spacingIconContentBefore: globalTokens.size100, }, focused: { paddingHorizontal: globalTokens.size160, From 90f276d096f3923a879ff4ba4bf3723ed8e88478 Mon Sep 17 00:00:00 2001 From: gremlin529 <56889386+gremlin529@users.noreply.github.com> Date: Wed, 15 Nov 2023 15:22:44 -0800 Subject: [PATCH 3/4] fixing some colortokens issues The color tokens file for iOS was missing, and the default one had a couple of types (icon: instead of iconColor:) --- .../Button/src/ButtonColorTokens.ios.ts | 96 +++++++++++++++++++ .../Button/src/ButtonColorTokens.ts | 6 +- 2 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 packages/components/Button/src/ButtonColorTokens.ios.ts diff --git a/packages/components/Button/src/ButtonColorTokens.ios.ts b/packages/components/Button/src/ButtonColorTokens.ios.ts new file mode 100644 index 0000000000..d79c826b09 --- /dev/null +++ b/packages/components/Button/src/ButtonColorTokens.ios.ts @@ -0,0 +1,96 @@ +import type { Theme } from '@fluentui-react-native/framework'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { ButtonTokens } from './Button.types'; + +export const defaultButtonColorTokens: TokenSettings = (t: Theme) => + ({ + backgroundColor: t.colors.buttonBackground, + color: t.colors.buttonText, + borderColor: t.colors.buttonBorder, + iconColor: t.colors.buttonIcon, + disabled: { + backgroundColor: t.colors.defaultDisabledBackground, + color: t.colors.defaultDisabledContent, + borderColor: t.colors.defaultDisabledBorder, + iconColor: t.colors.defaultDisabledIcon, + }, + hovered: { + backgroundColor: t.colors.defaultHoveredBackground, + color: t.colors.defaultHoveredContent, + borderColor: t.colors.defaultHoveredBorder, + iconColor: t.colors.defaultHoveredIcon, + }, + pressed: { + backgroundColor: t.colors.defaultPressedBackground, + color: t.colors.defaultPressedContent, + borderColor: t.colors.defaultPressedBorder, + iconColor: t.colors.defaultPressedIcon, + }, + focused: { + backgroundColor: t.colors.defaultFocusedBackground, + color: t.colors.defaultFocusedContent, + borderColor: t.colors.defaultFocusedBorder, + iconColor: t.colors.defaultFocusedIcon, + }, + primary: { + backgroundColor: t.colors.brandedBackground, + color: t.colors.brandedContent, + borderColor: t.colors.brandedBorder, + iconColor: t.colors.brandedIcon, + disabled: { + backgroundColor: t.colors.brandedDisabledBackground, + color: t.colors.brandedDisabledContent, + borderColor: t.colors.brandedDisabledBorder, + iconColor: t.colors.brandedDisabledIcon, + }, + hovered: { + backgroundColor: t.colors.brandedHoveredBackground, + color: t.colors.brandedHoveredContent, + borderColor: t.colors.brandedHoveredBorder, + iconColor: t.colors.brandedHoveredIcon, + }, + pressed: { + backgroundColor: t.colors.brandedPressedBackground, + color: t.colors.brandedPressedContent, + borderColor: t.colors.brandedPressedBorder, + iconColor: t.colors.brandedPressedIcon, + }, + focused: { + backgroundColor: t.colors.brandedFocusedBackground, + color: t.colors.brandedFocusedContent, + borderColor: t.colors.brandedFocusedBorder, + iconColor: t.colors.brandedFocusedIcon, + }, + }, + subtle: { + backgroundColor: t.colors.ghostBackground, + color: t.colors.ghostContent, + borderColor: t.colors.ghostBorder, + iconColor: t.colors.ghostIcon, + disabled: { + color: t.colors.ghostDisabledContent, + borderColor: t.colors.ghostDisabledBorder, + backgroundColor: t.colors.ghostDisabledBackground, + iconColor: t.colors.ghostDisabledIcon, + }, + hovered: { + backgroundColor: t.colors.ghostHoveredBackground, + color: t.colors.ghostHoveredContent, + borderColor: t.colors.ghostHoveredBorder, + iconColor: t.colors.ghostHoveredIcon, + }, + pressed: { + backgroundColor: t.colors.ghostPressedBackground, + borderColor: t.colors.ghostPressedBorder, + color: t.colors.ghostPressedContent, + iconColor: t.colors.ghostPressedIcon, + }, + focused: { + borderColor: t.colors.ghostFocusedBorder, + backgroundColor: t.colors.ghostFocusedBackground, + color: t.colors.ghostFocusedContent, + iconColor: t.colors.ghostFocusedIcon, + }, + }, + } as ButtonTokens); diff --git a/packages/components/Button/src/ButtonColorTokens.ts b/packages/components/Button/src/ButtonColorTokens.ts index b2a6f4461a..a056c45bc1 100644 --- a/packages/components/Button/src/ButtonColorTokens.ts +++ b/packages/components/Button/src/ButtonColorTokens.ts @@ -31,7 +31,7 @@ export const defaultButtonColorTokens: TokenSettings = (t: backgroundColor: t.colors.defaultFocusedBackground, color: t.colors.defaultFocusedContent, borderColor: t.colors.defaultFocusedBorder, - icon: t.colors.defaultFocusedIcon, + iconColor: t.colors.defaultFocusedIcon, }, primary: { backgroundColor: t.colors.brandBackground, @@ -76,13 +76,13 @@ export const defaultButtonColorTokens: TokenSettings = (t: backgroundColor: t.colors.ghostPressedBackground, borderColor: t.colors.ghostPressedBorder, color: t.colors.ghostPressedContent, - icon: t.colors.ghostPressedIcon, + iconColor: t.colors.ghostPressedIcon, }, focused: { borderColor: t.colors.ghostFocusedBorder, backgroundColor: t.colors.ghostFocusedBackground, color: t.colors.ghostFocusedContent, - icon: t.colors.ghostFocusedIcon, + iconColor: t.colors.ghostFocusedIcon, }, }, } as ButtonTokens); From 7d029b4518d9ccff60841265a796a575925014be Mon Sep 17 00:00:00 2001 From: gremlin529 <56889386+gremlin529@users.noreply.github.com> Date: Wed, 15 Nov 2023 15:24:34 -0800 Subject: [PATCH 4/4] Change files --- ...native-button-cd098f53-ab62-4a99-b044-0f34df7378fb.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-button-cd098f53-ab62-4a99-b044-0f34df7378fb.json diff --git a/change/@fluentui-react-native-button-cd098f53-ab62-4a99-b044-0f34df7378fb.json b/change/@fluentui-react-native-button-cd098f53-ab62-4a99-b044-0f34df7378fb.json new file mode 100644 index 0000000000..102ec13a81 --- /dev/null +++ b/change/@fluentui-react-native-button-cd098f53-ab62-4a99-b044-0f34df7378fb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fixing some colortokens issues", + "packageName": "@fluentui-react-native/button", + "email": "56889386+gremlin529@users.noreply.github.com", + "dependentChangeType": "patch" +}