feat(foundation): added reaction ui color

sendbird · Dec 6, 2022 · 5b272e5 · 5b272e5
1 parent 805fce5
commit 5b272e5
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 6 deletions.
diff --git a/packages/uikit-react-native-foundation/src/styles/createStyleSheet.ts b/packages/uikit-react-native-foundation/src/styles/createStyleSheet.ts
@@ -12,7 +12,9 @@ const preProcessor: Partial<StylePreprocessor> = {
   'lineHeight': DEFAULT_SCALE_FACTOR,
   'borderRadius': DEFAULT_SCALE_FACTOR,
   'minWidth': SCALE_FACTOR_WITH_STR,
+  'maxWidth': SCALE_FACTOR_WITH_STR,
   'minHeight': SCALE_FACTOR_WITH_STR,
+  'maxHeight': SCALE_FACTOR_WITH_STR,
   'height': SCALE_FACTOR_WITH_STR,
   'width': SCALE_FACTOR_WITH_STR,
   'padding': SCALE_FACTOR_WITH_STR,

diff --git a/packages/uikit-react-native-foundation/src/theme/DarkUIKitTheme.ts b/packages/uikit-react-native-foundation/src/theme/DarkUIKitTheme.ts
@@ -179,6 +179,28 @@ const DarkUIKitTheme = createTheme({
           },
         },
       },
+      reaction: {
+        default: {
+          enabled: {
+            background: palette.transparent,
+            highlight: palette.onBackgroundDark03,
+          },
+          selected: {
+            background: palette.primary500,
+            highlight: palette.primary200,
+          },
+        },
+        rounded: {
+          enabled: {
+            background: palette.background400,
+            highlight: palette.transparent,
+          },
+          selected: {
+            background: palette.primary500,
+            highlight: palette.transparent,
+          },
+        },
+      },
     },
   }),
 });

diff --git a/packages/uikit-react-native-foundation/src/theme/LightUIKitTheme.ts b/packages/uikit-react-native-foundation/src/theme/LightUIKitTheme.ts
@@ -179,6 +179,28 @@ const LightUIKitTheme = createTheme({
           },
         },
       },
+      reaction: {
+        default: {
+          enabled: {
+            background: palette.transparent,
+            highlight: palette.onBackgroundLight03,
+          },
+          selected: {
+            background: palette.primary100,
+            highlight: palette.primary300,
+          },
+        },
+        rounded: {
+          enabled: {
+            background: palette.background100,
+            highlight: palette.transparent,
+          },
+          selected: {
+            background: palette.primary100,
+            highlight: palette.transparent,
+          },
+        },
+      },
     },
   }),
 });

diff --git a/packages/uikit-react-native-foundation/src/types.ts b/packages/uikit-react-native-foundation/src/types.ts
@@ -40,7 +40,8 @@ export type Component =
   | 'Message'
   | 'DateSeparator'
   | 'GroupChannelPreview'
-  | 'ProfileCard';
+  | 'ProfileCard'
+  | 'Reaction';
 
 export type GetColorTree<
   Tree extends {
@@ -68,6 +69,7 @@ export type ComponentColorTree = GetColorTree<{
     DateSeparator: 'default';
     GroupChannelPreview: 'default';
     ProfileCard: 'default';
+    Reaction: 'default' | 'rounded';
   };
   State: {
     Header: 'none';
@@ -80,6 +82,7 @@ export type ComponentColorTree = GetColorTree<{
     DateSeparator: 'none';
     GroupChannelPreview: 'none';
     ProfileCard: 'none';
+    Reaction: 'enabled' | 'selected';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -101,6 +104,7 @@ export type ComponentColorTree = GetColorTree<{
       | 'bodyIconBackground'
       | 'separator';
     ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
+    Reaction: 'background' | 'highlight';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -145,6 +149,7 @@ export interface UIKitColors {
     dateSeparator: ComponentColors<'DateSeparator'>;
     groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
     profileCard: ComponentColors<'ProfileCard'>;
+    reaction: ComponentColors<'Reaction'>;
   };
 }
 

diff --git a/packages/uikit-react-native-foundation/src/ui/Badge/index.tsx b/packages/uikit-react-native-foundation/src/ui/Badge/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Platform, StyleProp, View, ViewStyle } from 'react-native';
 
-import { truncatedBadgeCount } from '@sendbird/uikit-utils';
+import { truncatedCount } from '@sendbird/uikit-utils';
 
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
@@ -29,7 +29,7 @@ const Badge = ({ count, maxCount, badgeColor, textColor, style, size = 'default'
       ]}
     >
       <Text caption1 color={textColor ?? colors.ui.badge.default.none.text}>
-        {truncatedBadgeCount(count, maxCount)}
+        {truncatedCount(count, maxCount)}
       </Text>
     </View>
   );

diff --git a/packages/uikit-utils/src/ui-format/common.ts b/packages/uikit-utils/src/ui-format/common.ts
@@ -38,15 +38,16 @@ export const truncate = (str: string, opts: Partial<TruncateOption> = defaultOpt
 };
 
 /**
- * Badge count truncate util
+ * Count truncate util
  * If count exceed the limit, it comes in the form of "MAX+"
  *
  * @param {number} count
  * @param {number} MAX default 99
+ * @param {string} MAX_SUFFIX default +
  * @returns {string}
  * */
-export const truncatedBadgeCount = (count: number, MAX = 99) => {
-  if (count >= MAX) return `${MAX}+`;
+export const truncatedCount = (count: number, MAX = 99, MAX_SUFFIX = '+') => {
+  if (count >= MAX) return `${MAX}${MAX_SUFFIX}`;
   return `${count}`;
 };