feat: add InvertedMode component for color mode inversion (#759)

* feat: add `InvertedMode` component for color mode inversion * docs: update icons in sidebar routes * docs: update color mode and color style sections * docs: update tooltip.mdx * feat: add inverted background to color style * docs: update useColorMode.mdx * test: update tests for color mode and color style
trendmicro-frontend · May 14, 2023 · aa21259 · aa21259
1 parent 82ff62f
commit aa21259
Show file tree

Hide file tree

Showing 20 changed files with 418 additions and 137 deletions.
diff --git a/packages/react-docs/config/sidebar-routes.js b/packages/react-docs/config/sidebar-routes.js
@@ -114,10 +114,14 @@ export const routes = [
     ),
     routes: [
       { title: 'Getting Started', path: 'components' },
-      { title: 'COLORS', heading: true },
-      { title: 'Color Mode', path: 'components/color-mode' },
+      { title: 'COLOR MODE', heading: true },
+      { title: 'ColorModeProvider', path: 'components/color-mode' },
+      { title: 'DarkMode', path: 'components/color-mode/darkmode' },
+      { title: 'LightMode', path: 'components/color-mode/lightmode' },
+      { title: 'InvertedMode', path: 'components/color-mode/invertedmode' },
       { title: 'useColorMode', path: 'components/color-mode/useColorMode' },
-      { title: 'Color Style', path: 'components/color-style' },
+      { title: 'COLOR STYLE', heading: true },
+      { title: 'ColorStyleProvider', path: 'components/color-style' },
       { title: 'useColorStyle', path: 'components/color-style/useColorStyle' },
 
       { title: 'LAYOUT', heading: true },
@@ -359,7 +363,17 @@ export const routes = [
       { title: 'Zoom', path: 'components/transitions/zoom' },
 
       { title: 'TYPOGRAPHY', heading: true },
-      { title: 'Code', path: 'components/code' },
+      {
+        title: 'Code',
+        path: 'components/code',
+        render: () => {
+          return (
+            <Tooltip label={<Subtitle>{`tag: code`}</Subtitle>}>
+              <Icon icon="code" cursor="default" />
+            </Tooltip>
+          );
+        },
+      },
       { title: 'Text', path: 'components/text' },
       {
         title: 'TextLabel',

diff --git a/packages/react-docs/pages/components/color-mode/darkmode.mdx b/packages/react-docs/pages/components/color-mode/darkmode.mdx
@@ -0,0 +1,43 @@
+# DarkMode
+
+The `DarkMode` component enables you to render its children in dark mode. It will override current color mode and set the color scheme to `dark`.
+
+## Import
+
+```js
+import { DarkMode } from '@tonic-ui/react';
+```
+
+## Usage
+
+```jsx noInline
+function Example() {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The color mode is set to {colorMode}
+      </Text>
+    </Box>
+  );
+}
+
+render(
+  <DarkMode>
+    <Example />
+  </DarkMode>
+);
+```
+
+## Props
+
+### DarkMode
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | | |
diff --git a/packages/react-docs/pages/components/color-mode/index.mdx b/packages/react-docs/pages/components/color-mode/index.mdx
@@ -1,4 +1,4 @@
-# Color Mode
+# ColorModeProvider
 
 Tonic UI comes with built-in support for managing color modes in your app.
 
@@ -130,23 +130,3 @@ function App({ children }) {
 ## Managing Color Mode
 
 To manage color mode in your application, you can use the [useColorMode](color-mode/useColorMode) hook.
-
-## Forcing a Specific Color Mode
-
-To force a specific color mode, wrap your component in `LightMode` or `DarkMode`, it will override the global color mode and set the color scheme to `dark` or `light` respectively.
-
-```jsx
-<Flex>
-  <DarkMode bg="gray:90" color="white:primary">
-    <Text px="4x" py="3x">
-      This is dark mode
-    </Text>
-  </DarkMode>
-  <Space width="4x" />
-  <LightMode bg="gray:10" color="black:primary">
-    <Text px="4x" py="3x">
-      This is light mode
-    </Text>
-  </LightMode>
-</Flex>
-```
diff --git a/packages/react-docs/pages/components/color-mode/invertedmode.mdx b/packages/react-docs/pages/components/color-mode/invertedmode.mdx
@@ -0,0 +1,61 @@
+# InvertedMode
+
+The `InvertedMode` component is used to invert the color mode of its children.
+
+## Import
+
+```js
+import { InvertedMode } from '@tonic-ui/react';
+```
+
+## Usage
+
+```jsx noInline
+function Example() {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The current color mode is inverted to {colorMode} mode
+      </Text>
+    </Box>
+  );
+}
+
+render(
+  <InvertedMode>
+    <Example />
+  </InvetedMode>
+);
+```
+
+### Rendering tooltip label
+
+The `InvertedMode` component is useful when you want to render a tooltip label in inverted mode.
+
+```jsx
+<Tooltip
+  label={(
+    <InvertedMode width={80} py="1x">
+      <Text>Title</Text>
+      <Divider my="2x" />
+      <Text>Content</Text>
+    </InvertedMode>
+  )}
+>
+  <Text display="inline-block">Hover Me</Text>
+</Tooltip>
+```
+
+## Props
+
+### InvertedMode
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | | |
diff --git a/packages/react-docs/pages/components/color-mode/lightmode.mdx b/packages/react-docs/pages/components/color-mode/lightmode.mdx
@@ -0,0 +1,43 @@
+# LightMode
+
+The `LightMode` component enables you to render its children in light mode. It will override current color mode and set the color scheme to `light`.
+
+## Import
+
+```js
+import { LightMode } from '@tonic-ui/react';
+```
+
+## Usage
+
+```jsx noInline
+function Example() {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The color mode is set to {colorMode}
+      </Text>
+    </Box>
+  );
+}
+
+render(
+  <LightMode>
+    <Example />
+  </LightMode>
+);
+```
+
+## Props
+
+### LightMode
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | | |
diff --git a/packages/react-docs/pages/components/color-style/index.mdx b/packages/react-docs/pages/components/color-style/index.mdx
@@ -16,7 +16,7 @@ import ColorStyleContent from '../../../components/ColorStyleContent';
 import ColorStyleHeader from '../../../components/ColorStyleHeader';
 import jsonPrettify from "../../../utils/json-prettify";
 
-# Color Style
+# ColorStyleProvider
 
 Tonic UI comes with a color style system that defines functional color values.
 

diff --git a/packages/react-docs/pages/components/color-style/useColorStyle.mdx b/packages/react-docs/pages/components/color-style/useColorStyle.mdx
@@ -46,34 +46,78 @@ Returns an array with the color style object and a function to set the color sty
 function Example() {
   const [colorMode] = useColorMode();
   const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
-  const [colorVariant, setColorVariant] = React.useState('primary');
-  const backgroundColor = colorStyle.background[colorVariant];
-  const color = colorStyle.color[colorVariant];
-  const changeColorVariant = (colorVariant) => (event) => {
-    setColorVariant(colorVariant);
-  };
+  const invertedPrimaryColor = {
+    dark: 'black:primary',
+    light: 'white:primary',
+  }[colorMode];
 
   return (
-    <>
-      <Box mb="4x">
-        <Button onClick={changeColorVariant('primary')}>
-          Set primary background color
-        </Button>
-        <Space width="2x" />
-        <Button onClick={changeColorVariant('secondary')}>
-          Set secondary background color
-        </Button>
-        <Space width="2x" />
-        <Button onClick={changeColorVariant('tertiary')}>
-          Set tertiary background color
-        </Button>
+    <Stack spacing="4x" fontFamily="mono">
+      Background
+      <Box
+        sx={{
+          '> *': {
+            px: '3x',
+            py: '2x',
+          },
+        }}
+      >
+        <Box backgroundColor={colorStyle.background.primary}>
+          colorStyle.background.primary
+        </Box>
+        <Box backgroundColor={colorStyle.background.secondary}>
+          colorStyle.background.secondary
+        </Box>
+        <Box backgroundColor={colorStyle.background.tertiary}>
+          colorStyle.background.tertiary
+        </Box>
+        <Box backgroundColor={colorStyle.background.inverted} color={invertedPrimaryColor}>
+          colorStyle.background.inverted
+        </Box>
+        <Box backgroundColor={colorStyle.background.highlighted}>
+          colorStyle.background.highlighted
+        </Box>
+        <Box backgroundColor={colorStyle.background.selected}>
+          colorStyle.background.selected
+        </Box>
       </Box>
-      <Box backgroundColor={backgroundColor} p="4x">
-        <Text color={color} size="lg">
-          To change the color mode, click the <b>toggle color mode</b> button at the top right corner.
-        </Text>
+      <Divider />
+      <Box
+        sx={{
+          '> *': {
+            px: '3x',
+          },
+          '> *:not(:last-child)': {
+            pb: '2x',
+          },
+        }}
+      >
+        <Box color={colorStyle.color.primary}>
+          colorStyle.color.primary
+        </Box>
+        <Box color={colorStyle.color.secondary}>
+          colorStyle.color.secondary
+        </Box>
+        <Box color={colorStyle.color.tertiary}>
+          colorStyle.color.tertiary
+        </Box>
+        <Box color={colorStyle.color.disabled}>
+          colorStyle.color.disabled
+        </Box>
+        <Box color={colorStyle.color.success}>
+          colorStyle.color.success
+        </Box>
+        <Box color={colorStyle.color.info}>
+          colorStyle.color.info
+        </Box>
+        <Box color={colorStyle.color.warning}>
+          colorStyle.color.warning
+        </Box>
+        <Box color={colorStyle.color.error}>
+          colorStyle.color.error
+        </Box>
       </Box>
-    </>
+    </Stack>
   );
-};
+}
 ```
diff --git a/packages/react-docs/pages/components/tooltip.mdx b/packages/react-docs/pages/components/tooltip.mdx
@@ -243,22 +243,22 @@ function Example() {
         backgroundColor={backgroundColor}
         color={color}
       >
-        <Text display="inline-block">Hover me</Text>
+        <Text display="inline-block">Hover Me</Text>
       </Tooltip>
       <Divider orientation="vertical" />
       <Tooltip
         arrow={false}
         label={(
-          <Box px="1x" py="2x">
-            <Text>Tooltip Title</Text>
+          <Box py="1x">
+            <Text>Title</Text>
             <Divider my="2x" />
-            <Text>This is a tooltip</Text>
+            <Text>Content</Text>
           </Box>
         )}
         backgroundColor={backgroundColor}
         color={color}
       >
-        <Text display="inline-block">Hover me</Text>
+        <Text display="inline-block">Hover Me</Text>
       </Tooltip>
     </Flex>
   );
@@ -385,7 +385,7 @@ To mitigate this issue, you can pass `PopperProps={{ usePortal: true }}` to `Too
   PopperProps={{ usePortal: true }}
   label="This is a tooltip"
 >
-  <Text display="inline-block">Hover me</Text>
+  <Text display="inline-block">Hover Me</Text>
 </Tooltip>
 ```
 

diff --git a/packages/react/__tests__/index.js b/packages/react/__tests__/index.js
@@ -52,6 +52,7 @@ test('should match expected exports', () => {
     // color-mode
     'ColorModeProvider',
     'DarkMode',
+    'InvertedMode',
     'LightMode',
     'useColorMode',
 

diff --git a/packages/react/src/color-mode/DarkMode.js b/packages/react/src/color-mode/DarkMode.js
@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Box } from '../box';
 import ColorModeProvider from './ColorModeProvider';
 
-const DarkMode = (props) => (
+const DarkMode = forwardRef((props, ref) => (
   <ColorModeProvider value="dark">
-    <Box colorScheme="dark" {...props} />
+    <Box
+      ref={ref}
+      colorScheme="dark"
+      {...props}
+    />
   </ColorModeProvider>
-);
+));
 
 DarkMode.displayName = 'DarkMode';