From 170dfab6be5dcd662acc5c8aac58f3cc562695cd Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 14:57:47 +0800
Subject: [PATCH 01/12] feat: add initial Toolbar and subcomponent declarations

---
 react/src/Toolbar/Toolbar.stories.tsx | 14 +++++++++++
 react/src/Toolbar/Toolbar.tsx         | 35 +++++++++++++++++++++++++++
 react/src/Toolbar/index.ts            |  1 +
 3 files changed, 50 insertions(+)
 create mode 100644 react/src/Toolbar/Toolbar.stories.tsx
 create mode 100644 react/src/Toolbar/Toolbar.tsx
 create mode 100644 react/src/Toolbar/index.ts

diff --git a/react/src/Toolbar/Toolbar.stories.tsx b/react/src/Toolbar/Toolbar.stories.tsx
new file mode 100644
index 00000000..b90464e3
--- /dev/null
+++ b/react/src/Toolbar/Toolbar.stories.tsx
@@ -0,0 +1,14 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { Toolbar, ToolbarProps } from './Toolbar'
+
+export default {
+  title: 'Components/Toolbar',
+  component: Toolbar,
+  decorators: [],
+  tags: ['autodocs'],
+} as Meta<ToolbarProps>
+
+const Template: StoryFn<ToolbarProps> = (args) => <Toolbar {...args} />
+export const Default = Template.bind({})
+Default.args = {}
diff --git a/react/src/Toolbar/Toolbar.tsx b/react/src/Toolbar/Toolbar.tsx
new file mode 100644
index 00000000..e5199551
--- /dev/null
+++ b/react/src/Toolbar/Toolbar.tsx
@@ -0,0 +1,35 @@
+import { Flex } from '@chakra-ui/react'
+
+import { Button } from '~/Button'
+import { IconButton } from '~/IconButton'
+
+export interface ToolbarProps {}
+
+/**
+ * Container for the toolbar.
+ */
+export const Toolbar = ({}: ToolbarProps): JSX.Element => {
+  return <Flex></Flex>
+}
+
+/**
+ * Component to group togglable buttons to allow selection of only one in a group.
+ */
+export const ToolbarToggleGroup = () => {
+  return <Flex></Flex>
+}
+
+export const ToolbarGroup = () => {
+  return <Flex></Flex>
+}
+
+export const ToolbarToggleButton = () => {
+  return <Flex></Flex>
+}
+
+export const ToolbarDivider = () => {
+  return <Flex></Flex>
+}
+
+export const ToolbarButton = Button
+export const ToolbarIconButton = IconButton
diff --git a/react/src/Toolbar/index.ts b/react/src/Toolbar/index.ts
new file mode 100644
index 00000000..d24a005a
--- /dev/null
+++ b/react/src/Toolbar/index.ts
@@ -0,0 +1 @@
+export * from './Toolbar'

From a0faf4216ee45a97c2b1c20ebfd44ee561332657 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 15:01:04 +0800
Subject: [PATCH 02/12] feat: add initial Toolbar styles structure

---
 react/src/Toolbar/Toolbar.tsx         | 6 +++++-
 react/src/theme/components/Toolbar.ts | 8 ++++++++
 react/src/theme/components/index.ts   | 2 ++
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 react/src/theme/components/Toolbar.ts

diff --git a/react/src/Toolbar/Toolbar.tsx b/react/src/Toolbar/Toolbar.tsx
index e5199551..bb6f2fd9 100644
--- a/react/src/Toolbar/Toolbar.tsx
+++ b/react/src/Toolbar/Toolbar.tsx
@@ -1,8 +1,12 @@
-import { Flex } from '@chakra-ui/react'
+import { createStylesContext, Flex } from '@chakra-ui/react'
 
 import { Button } from '~/Button'
 import { IconButton } from '~/IconButton'
 
+const [ToolbarStylesProvider, useToolbarStyles] = createStylesContext('Toolbar')
+
+export { useToolbarStyles }
+
 export interface ToolbarProps {}
 
 /**
diff --git a/react/src/theme/components/Toolbar.ts b/react/src/theme/components/Toolbar.ts
new file mode 100644
index 00000000..f76b5ba2
--- /dev/null
+++ b/react/src/theme/components/Toolbar.ts
@@ -0,0 +1,8 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { anatomy } from '@chakra-ui/theme-tools'
+
+const parts = anatomy('toolbar').parts('container')
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys)
+
+export const Toolbar = defineMultiStyleConfig({})
diff --git a/react/src/theme/components/index.ts b/react/src/theme/components/index.ts
index f31432f8..56e9a8c8 100644
--- a/react/src/theme/components/index.ts
+++ b/react/src/theme/components/index.ts
@@ -38,6 +38,7 @@ import { Textarea } from './Textarea'
 import { Tile } from './Tile'
 import { Toast } from './Toast'
 import { Toggle } from './Toggle'
+import { Toolbar } from './Toolbar'
 import { Tooltip } from './Tooltip'
 
 export const components = {
@@ -81,5 +82,6 @@ export const components = {
   Tile,
   Toast,
   Toggle,
+  Toolbar,
   Tooltip,
 }

From d7d0aaeb87b9bf48621dc24f194238b7dfc004fc Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 15:13:59 +0800
Subject: [PATCH 03/12] feat: add getContrastColor util fn to simplify setting
 colours

---
 react/src/theme/components/Badge.ts  |  7 ++-----
 react/src/theme/components/Button.ts | 11 +++++------
 react/src/theme/utils/contrast.ts    | 11 +++++++++++
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/react/src/theme/components/Badge.ts b/react/src/theme/components/Badge.ts
index 11d6ae8e..da0a1a39 100644
--- a/react/src/theme/components/Badge.ts
+++ b/react/src/theme/components/Badge.ts
@@ -1,7 +1,7 @@
 import { defineStyle } from '@chakra-ui/react'
 import { getColor, SystemStyleObject } from '@chakra-ui/theme-tools'
 
-import { meetsWcagAaRatio } from '~/theme/utils/contrast'
+import { getContrastColor } from '~/theme/utils/contrast'
 
 import { textStyles } from '../textStyles'
 
@@ -27,10 +27,7 @@ const variantSolid = defineStyle((props) => {
   const bgColor = getColor(theme, solidBgTokenMap[c] ?? `${c}.500`)
   let textColor = getColor(theme, 'base.content.inverse')
 
-  const hasSufficientContrast = meetsWcagAaRatio(textColor, bgColor)
-  if (!hasSufficientContrast) {
-    textColor = 'base.content.default'
-  }
+  textColor = getContrastColor(textColor, bgColor, 'base.content.default')
 
   return {
     bg: bgColor,
diff --git a/react/src/theme/components/Button.ts b/react/src/theme/components/Button.ts
index 4ada464b..e3907c01 100644
--- a/react/src/theme/components/Button.ts
+++ b/react/src/theme/components/Button.ts
@@ -4,7 +4,7 @@ import { merge } from 'lodash'
 
 import { layerStyles } from '../layerStyles'
 import { textStyles } from '../textStyles'
-import { meetsWcagAaRatio } from '../utils'
+import { getContrastColor } from '../utils'
 import { hexToRgba } from '../utils/hexToRgba'
 
 import { Link } from './Link'
@@ -53,14 +53,13 @@ const genVariantSolidColours = ({
       }
     }
   }
-  const hasSufficientContrast = meetsWcagAaRatio(
+  // Note that using the fallback content colour for the button text could still result in bad contrast.
+  color = getContrastColor(
     getColor(theme, color),
     getColor(theme, solidVariantProps.bg),
+    'base.content.default',
   )
-  // Note that using the default content colour for the button text could still result in bad contrast.
-  if (!hasSufficientContrast) {
-    color = 'base.content.default'
-  }
+
   return { ...solidVariantProps, color }
 }
 
diff --git a/react/src/theme/utils/contrast.ts b/react/src/theme/utils/contrast.ts
index f0dc38d6..1d57938c 100644
--- a/react/src/theme/utils/contrast.ts
+++ b/react/src/theme/utils/contrast.ts
@@ -94,3 +94,14 @@ export const getContrast = (
 
   return (Math.max(lum1, lum2) + LUM_FLARE) / (Math.min(lum1, lum2) + LUM_FLARE)
 }
+
+export const getContrastColor = (
+  fg: string,
+  bg: string,
+  fallback: string,
+): string => {
+  if (meetsWcagAaRatio(fg, bg)) {
+    return fg
+  }
+  return fallback
+}

From 88f5f81fd0a951e52076a900a0e77ced0088e5b7 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 15:19:54 +0800
Subject: [PATCH 04/12] feat: add Toolbar container styles

---
 react/src/Toolbar/Toolbar.stories.tsx |  6 ++-
 react/src/Toolbar/Toolbar.tsx         | 25 +++++++++--
 react/src/theme/components/Toolbar.ts | 60 +++++++++++++++++++++++++--
 3 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/react/src/Toolbar/Toolbar.stories.tsx b/react/src/Toolbar/Toolbar.stories.tsx
index b90464e3..7031e405 100644
--- a/react/src/Toolbar/Toolbar.stories.tsx
+++ b/react/src/Toolbar/Toolbar.stories.tsx
@@ -1,3 +1,4 @@
+import { Text } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
 import { Toolbar, ToolbarProps } from './Toolbar'
@@ -11,4 +12,7 @@ export default {
 
 const Template: StoryFn<ToolbarProps> = (args) => <Toolbar {...args} />
 export const Default = Template.bind({})
-Default.args = {}
+Default.args = {
+  children: <Text>Hello</Text>,
+  colorScheme: 'main',
+}
diff --git a/react/src/Toolbar/Toolbar.tsx b/react/src/Toolbar/Toolbar.tsx
index bb6f2fd9..cfc3be87 100644
--- a/react/src/Toolbar/Toolbar.tsx
+++ b/react/src/Toolbar/Toolbar.tsx
@@ -1,4 +1,12 @@
-import { createStylesContext, Flex } from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
+import {
+  Box,
+  BoxProps,
+  createStylesContext,
+  Flex,
+  ThemingProps,
+  useMultiStyleConfig,
+} from '@chakra-ui/react'
 
 import { Button } from '~/Button'
 import { IconButton } from '~/IconButton'
@@ -7,13 +15,22 @@ const [ToolbarStylesProvider, useToolbarStyles] = createStylesContext('Toolbar')
 
 export { useToolbarStyles }
 
-export interface ToolbarProps {}
+export interface ToolbarProps extends PropsWithChildren, BoxProps {
+  colorScheme: ThemingProps<'Toolbar'>['colorScheme']
+}
 
 /**
  * Container for the toolbar.
  */
-export const Toolbar = ({}: ToolbarProps): JSX.Element => {
-  return <Flex></Flex>
+export const Toolbar = ({ children, ...props }: ToolbarProps): JSX.Element => {
+  const styles = useMultiStyleConfig('Toolbar', props)
+  return (
+    <ToolbarStylesProvider value={styles}>
+      <Box __css={styles.container} {...props}>
+        {children}
+      </Box>
+    </ToolbarStylesProvider>
+  )
 }
 
 /**
diff --git a/react/src/theme/components/Toolbar.ts b/react/src/theme/components/Toolbar.ts
index f76b5ba2..fd9f604c 100644
--- a/react/src/theme/components/Toolbar.ts
+++ b/react/src/theme/components/Toolbar.ts
@@ -1,8 +1,62 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
-import { anatomy } from '@chakra-ui/theme-tools'
+import { anatomy, SystemStyleObject } from '@chakra-ui/theme-tools'
 
 const parts = anatomy('toolbar').parts('container')
 
-const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys)
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys)
 
-export const Toolbar = defineMultiStyleConfig({})
+const baseStyle = definePartsStyle({
+  container: {
+    textStyle: 'subhead-2',
+  },
+})
+
+const getSolidVariantContainerStyles = (c: string): SystemStyleObject => {
+  switch (c) {
+    case 'main':
+      return {
+        bg: 'interaction.main.default',
+        color: 'white',
+      }
+    case 'neutral':
+      return {
+        bg: 'interaction.neutral-subtle.default',
+        color: 'base.content.default',
+      }
+    default:
+      return {
+        bg: 'base.bg.default',
+      }
+  }
+}
+
+const variantSolid = definePartsStyle(({ colorScheme: c }) => {
+  return {
+    container: getSolidVariantContainerStyles(c),
+  }
+})
+
+const variants = {
+  solid: variantSolid,
+}
+
+const sizes = {
+  md: definePartsStyle({
+    container: {
+      py: '0.625rem',
+      px: '1rem',
+    },
+  }),
+}
+
+export const Toolbar = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  sizes,
+  defaultProps: {
+    colorScheme: 'main',
+    variant: 'solid',
+    size: 'md',
+  },
+})

From 248c030fac97ea2f798b8e9126bd39e5b93d2ba0 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 15:40:38 +0800
Subject: [PATCH 05/12] fix: correct fontSizes of Buttons at various sizes

---
 react/src/theme/components/Button.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/react/src/theme/components/Button.ts b/react/src/theme/components/Button.ts
index e3907c01..74e02ead 100644
--- a/react/src/theme/components/Button.ts
+++ b/react/src/theme/components/Button.ts
@@ -295,18 +295,22 @@ const baseStyle = defineStyle({
 
 const sizes = {
   xs: defineStyle({
+    ...textStyles['subhead-2'],
     minH: '2.25rem',
     minW: '2.25rem',
   }),
   sm: defineStyle({
+    ...textStyles['subhead-1'],
     minH: '2.5rem',
     minW: '2.5rem',
   }),
   md: defineStyle({
+    ...textStyles['subhead-1'],
     minH: '2.75rem',
     minW: '2.75rem',
   }),
   lg: defineStyle({
+    ...textStyles['subhead-1'],
     minH: '3rem',
     minW: '3rem',
   }),

From 3b31e089f897d63a472f2b5c72ea9363c32825e9 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 15:57:01 +0800
Subject: [PATCH 06/12] feat: add ToolbarButton component and styles

---
 react/src/Toolbar/Toolbar.stories.tsx | 19 +++++++++++--
 react/src/Toolbar/Toolbar.tsx         | 14 ++++------
 react/src/Toolbar/ToolbarButton.tsx   | 18 ++++++++++++
 react/src/Toolbar/index.ts            |  1 +
 react/src/index.ts                    |  1 +
 react/src/theme/components/Toolbar.ts | 40 +++++++++++++++++++++++----
 6 files changed, 76 insertions(+), 17 deletions(-)
 create mode 100644 react/src/Toolbar/ToolbarButton.tsx

diff --git a/react/src/Toolbar/Toolbar.stories.tsx b/react/src/Toolbar/Toolbar.stories.tsx
index 7031e405..d70d794d 100644
--- a/react/src/Toolbar/Toolbar.stories.tsx
+++ b/react/src/Toolbar/Toolbar.stories.tsx
@@ -1,7 +1,10 @@
-import { Text } from '@chakra-ui/react'
+import { Spacer, Text } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
+import { BxUpload } from '..'
+
 import { Toolbar, ToolbarProps } from './Toolbar'
+import { ToolbarButton } from './ToolbarButton'
 
 export default {
   title: 'Components/Toolbar',
@@ -10,9 +13,19 @@ export default {
   tags: ['autodocs'],
 } as Meta<ToolbarProps>
 
-const Template: StoryFn<ToolbarProps> = (args) => <Toolbar {...args} />
+const Template: StoryFn<ToolbarProps> = ({ children, ...args }) => {
+  return (
+    <Toolbar {...args}>
+      <Text>1 item selected</Text>
+      <Spacer />
+      {children}
+      <ToolbarButton leftIcon={<BxUpload fontSize="1.25rem" />}>
+        Button
+      </ToolbarButton>
+    </Toolbar>
+  )
+}
 export const Default = Template.bind({})
 Default.args = {
-  children: <Text>Hello</Text>,
   colorScheme: 'main',
 }
diff --git a/react/src/Toolbar/Toolbar.tsx b/react/src/Toolbar/Toolbar.tsx
index cfc3be87..0eed3446 100644
--- a/react/src/Toolbar/Toolbar.tsx
+++ b/react/src/Toolbar/Toolbar.tsx
@@ -1,22 +1,19 @@
 import { PropsWithChildren } from 'react'
 import {
-  Box,
-  BoxProps,
   createStylesContext,
   Flex,
-  ThemingProps,
+  FlexProps,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
-import { Button } from '~/Button'
 import { IconButton } from '~/IconButton'
 
 const [ToolbarStylesProvider, useToolbarStyles] = createStylesContext('Toolbar')
 
 export { useToolbarStyles }
 
-export interface ToolbarProps extends PropsWithChildren, BoxProps {
-  colorScheme: ThemingProps<'Toolbar'>['colorScheme']
+export interface ToolbarProps extends PropsWithChildren, FlexProps {
+  colorScheme: 'main' | 'neutral'
 }
 
 /**
@@ -26,9 +23,9 @@ export const Toolbar = ({ children, ...props }: ToolbarProps): JSX.Element => {
   const styles = useMultiStyleConfig('Toolbar', props)
   return (
     <ToolbarStylesProvider value={styles}>
-      <Box __css={styles.container} {...props}>
+      <Flex __css={styles.container} {...props}>
         {children}
-      </Box>
+      </Flex>
     </ToolbarStylesProvider>
   )
 }
@@ -52,5 +49,4 @@ export const ToolbarDivider = () => {
   return <Flex></Flex>
 }
 
-export const ToolbarButton = Button
 export const ToolbarIconButton = IconButton
diff --git a/react/src/Toolbar/ToolbarButton.tsx b/react/src/Toolbar/ToolbarButton.tsx
new file mode 100644
index 00000000..eb28a977
--- /dev/null
+++ b/react/src/Toolbar/ToolbarButton.tsx
@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+import { merge } from 'lodash'
+
+import { Button, ButtonProps } from '~/Button'
+
+import { useToolbarStyles } from './Toolbar'
+
+export type ToolbarButtonProps = ButtonProps
+
+export const ToolbarButton = (props: ToolbarButtonProps): JSX.Element => {
+  const styles = useToolbarStyles()
+  const buttonStyles = useMemo(
+    () => merge({}, styles.button, props.sx),
+    [styles.button, props.sx],
+  )
+
+  return <Button size="xs" {...props} sx={buttonStyles} />
+}
diff --git a/react/src/Toolbar/index.ts b/react/src/Toolbar/index.ts
index d24a005a..d244e7cf 100644
--- a/react/src/Toolbar/index.ts
+++ b/react/src/Toolbar/index.ts
@@ -1 +1,2 @@
 export * from './Toolbar'
+export * from './ToolbarButton'
diff --git a/react/src/index.ts b/react/src/index.ts
index 662e4d25..5dd692e6 100644
--- a/react/src/index.ts
+++ b/react/src/index.ts
@@ -37,4 +37,5 @@ export * from './theme'
 export * from './Tile'
 export * from './Toast'
 export * from './Toggle'
+export * from './Toolbar'
 export * from './Tooltip'
diff --git a/react/src/theme/components/Toolbar.ts b/react/src/theme/components/Toolbar.ts
index fd9f604c..5f9209d5 100644
--- a/react/src/theme/components/Toolbar.ts
+++ b/react/src/theme/components/Toolbar.ts
@@ -1,7 +1,11 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
-import { anatomy, SystemStyleObject } from '@chakra-ui/theme-tools'
+import { anatomy } from '@chakra-ui/theme-tools'
 
-const parts = anatomy('toolbar').parts('container')
+import { layerStyles } from '../layerStyles'
+
+import { Button } from './Button'
+
+const parts = anatomy('toolbar').parts('container', 'button', 'group')
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys)
@@ -12,7 +16,7 @@ const baseStyle = definePartsStyle({
   },
 })
 
-const getSolidVariantContainerStyles = (c: string): SystemStyleObject => {
+const getSolidVariantContainerStyles = (c: string) => {
   switch (c) {
     case 'main':
       return {
@@ -31,9 +35,32 @@ const getSolidVariantContainerStyles = (c: string): SystemStyleObject => {
   }
 }
 
-const variantSolid = definePartsStyle(({ colorScheme: c }) => {
+const getSolidVariantButtonStyles = (c: string) => {
+  if (c === 'main') {
+    return {
+      // @ts-expect-error type mismatch
+      ...Button.variants?.clear({
+        colorScheme: 'inverse',
+      }),
+      _focusVisible: layerStyles.focusRing.inverse._focusVisible,
+    }
+  }
+
+  // @ts-expect-error type mismatch
+  return Button.variants?.clear({ colorScheme: c })
+}
+
+const variantSolid = definePartsStyle((props) => {
+  const { colorScheme: c } = props
+
   return {
-    container: getSolidVariantContainerStyles(c),
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      ...getSolidVariantContainerStyles(c),
+    },
+    button: getSolidVariantButtonStyles(c),
   }
 })
 
@@ -47,6 +74,9 @@ const sizes = {
       py: '0.625rem',
       px: '1rem',
     },
+    group: {
+      gap: '0.5rem',
+    },
   }),
 }
 

From 5bd8b1ec2cac1a4f5148662207b58a04a7d3a8bc Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 16:08:04 +0800
Subject: [PATCH 07/12] feat: add ToolbarGroup component and styles

---
 react/src/Toolbar/Toolbar.stories.tsx | 14 ++++++++++----
 react/src/Toolbar/Toolbar.tsx         |  4 ----
 react/src/Toolbar/ToolbarGroup.tsx    | 19 +++++++++++++++++++
 react/src/Toolbar/index.ts            |  1 +
 react/src/theme/components/Toolbar.ts |  3 ---
 5 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 react/src/Toolbar/ToolbarGroup.tsx

diff --git a/react/src/Toolbar/Toolbar.stories.tsx b/react/src/Toolbar/Toolbar.stories.tsx
index d70d794d..17092d66 100644
--- a/react/src/Toolbar/Toolbar.stories.tsx
+++ b/react/src/Toolbar/Toolbar.stories.tsx
@@ -1,10 +1,11 @@
-import { Spacer, Text } from '@chakra-ui/react'
+import { Spacer, Stack, Text } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
 import { BxUpload } from '..'
 
 import { Toolbar, ToolbarProps } from './Toolbar'
 import { ToolbarButton } from './ToolbarButton'
+import { ToolbarGroup } from './ToolbarGroup'
 
 export default {
   title: 'Components/Toolbar',
@@ -19,9 +20,14 @@ const Template: StoryFn<ToolbarProps> = ({ children, ...args }) => {
       <Text>1 item selected</Text>
       <Spacer />
       {children}
-      <ToolbarButton leftIcon={<BxUpload fontSize="1.25rem" />}>
-        Button
-      </ToolbarButton>
+      <ToolbarGroup>
+        <ToolbarButton leftIcon={<BxUpload fontSize="1.25rem" />}>
+          Button
+        </ToolbarButton>
+        <ToolbarButton leftIcon={<BxUpload fontSize="1.25rem" />}>
+          Button
+        </ToolbarButton>
+      </ToolbarGroup>
     </Toolbar>
   )
 }
diff --git a/react/src/Toolbar/Toolbar.tsx b/react/src/Toolbar/Toolbar.tsx
index 0eed3446..f777fc5d 100644
--- a/react/src/Toolbar/Toolbar.tsx
+++ b/react/src/Toolbar/Toolbar.tsx
@@ -37,10 +37,6 @@ export const ToolbarToggleGroup = () => {
   return <Flex></Flex>
 }
 
-export const ToolbarGroup = () => {
-  return <Flex></Flex>
-}
-
 export const ToolbarToggleButton = () => {
   return <Flex></Flex>
 }
diff --git a/react/src/Toolbar/ToolbarGroup.tsx b/react/src/Toolbar/ToolbarGroup.tsx
new file mode 100644
index 00000000..b09e6e69
--- /dev/null
+++ b/react/src/Toolbar/ToolbarGroup.tsx
@@ -0,0 +1,19 @@
+import { Wrap, WrapProps } from '@chakra-ui/react'
+
+import { useToolbarStyles } from './Toolbar'
+
+export type ToolbarGroupProps = WrapProps
+
+export const ToolbarGroup = (props: ToolbarGroupProps): JSX.Element => {
+  const styles = useToolbarStyles()
+  return (
+    <Wrap
+      shouldWrapChildren
+      overflow="initial"
+      flexDir="row"
+      __css={styles.group}
+      spacing="0.5rem"
+      {...props}
+    />
+  )
+}
diff --git a/react/src/Toolbar/index.ts b/react/src/Toolbar/index.ts
index d244e7cf..665abf10 100644
--- a/react/src/Toolbar/index.ts
+++ b/react/src/Toolbar/index.ts
@@ -1,2 +1,3 @@
 export * from './Toolbar'
 export * from './ToolbarButton'
+export * from './ToolbarGroup'
diff --git a/react/src/theme/components/Toolbar.ts b/react/src/theme/components/Toolbar.ts
index 5f9209d5..5ab64a37 100644
--- a/react/src/theme/components/Toolbar.ts
+++ b/react/src/theme/components/Toolbar.ts
@@ -74,9 +74,6 @@ const sizes = {
       py: '0.625rem',
       px: '1rem',
     },
-    group: {
-      gap: '0.5rem',
-    },
   }),
 }
 

From aee277a271ea56022e07d45dee8e9573f15cb53c Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 16:29:08 +0800
Subject: [PATCH 08/12] feat: pass colorScheme in context instead of theme

---
 react/src/Toolbar/Toolbar.stories.tsx |  3 +++
 react/src/Toolbar/Toolbar.tsx         | 16 ++++++++------
 react/src/Toolbar/ToolbarButton.tsx   | 22 +++++++++++++-------
 react/src/Toolbar/ToolbarContext.tsx  | 30 +++++++++++++++++++++++++++
 react/src/Toolbar/ToolbarDivider.tsx  | 11 ++++++++++
 react/src/theme/components/Toolbar.ts | 25 +++++++---------------
 6 files changed, 75 insertions(+), 32 deletions(-)
 create mode 100644 react/src/Toolbar/ToolbarContext.tsx
 create mode 100644 react/src/Toolbar/ToolbarDivider.tsx

diff --git a/react/src/Toolbar/Toolbar.stories.tsx b/react/src/Toolbar/Toolbar.stories.tsx
index 17092d66..cd05f2ff 100644
--- a/react/src/Toolbar/Toolbar.stories.tsx
+++ b/react/src/Toolbar/Toolbar.stories.tsx
@@ -5,6 +5,7 @@ import { BxUpload } from '..'
 
 import { Toolbar, ToolbarProps } from './Toolbar'
 import { ToolbarButton } from './ToolbarButton'
+import { ToolbarDivider } from './ToolbarDivider'
 import { ToolbarGroup } from './ToolbarGroup'
 
 export default {
@@ -28,6 +29,8 @@ const Template: StoryFn<ToolbarProps> = ({ children, ...args }) => {
           Button
         </ToolbarButton>
       </ToolbarGroup>
+      <ToolbarDivider />
+      <ToolbarButton>Cancel</ToolbarButton>
     </Toolbar>
   )
 }
diff --git a/react/src/Toolbar/Toolbar.tsx b/react/src/Toolbar/Toolbar.tsx
index f777fc5d..97dbec64 100644
--- a/react/src/Toolbar/Toolbar.tsx
+++ b/react/src/Toolbar/Toolbar.tsx
@@ -8,12 +8,14 @@ import {
 
 import { IconButton } from '~/IconButton'
 
+import { ToolbarProvider } from './ToolbarContext'
+
 const [ToolbarStylesProvider, useToolbarStyles] = createStylesContext('Toolbar')
 
 export { useToolbarStyles }
 
 export interface ToolbarProps extends PropsWithChildren, FlexProps {
-  colorScheme: 'main' | 'neutral'
+  colorScheme?: 'main' | 'neutral'
 }
 
 /**
@@ -22,11 +24,13 @@ export interface ToolbarProps extends PropsWithChildren, FlexProps {
 export const Toolbar = ({ children, ...props }: ToolbarProps): JSX.Element => {
   const styles = useMultiStyleConfig('Toolbar', props)
   return (
-    <ToolbarStylesProvider value={styles}>
-      <Flex __css={styles.container} {...props}>
-        {children}
-      </Flex>
-    </ToolbarStylesProvider>
+    <ToolbarProvider colorScheme={props.colorScheme}>
+      <ToolbarStylesProvider value={styles}>
+        <Flex __css={styles.container} {...props}>
+          {children}
+        </Flex>
+      </ToolbarStylesProvider>
+    </ToolbarProvider>
   )
 }
 
diff --git a/react/src/Toolbar/ToolbarButton.tsx b/react/src/Toolbar/ToolbarButton.tsx
index eb28a977..b62be02d 100644
--- a/react/src/Toolbar/ToolbarButton.tsx
+++ b/react/src/Toolbar/ToolbarButton.tsx
@@ -1,18 +1,24 @@
 import { useMemo } from 'react'
-import { merge } from 'lodash'
 
 import { Button, ButtonProps } from '~/Button'
+import { layerStyles } from '~/theme/layerStyles'
 
-import { useToolbarStyles } from './Toolbar'
+import { useToolbarContext } from './ToolbarContext'
 
 export type ToolbarButtonProps = ButtonProps
 
 export const ToolbarButton = (props: ToolbarButtonProps): JSX.Element => {
-  const styles = useToolbarStyles()
-  const buttonStyles = useMemo(
-    () => merge({}, styles.button, props.sx),
-    [styles.button, props.sx],
-  )
+  const { colorScheme } = useToolbarContext()
 
-  return <Button size="xs" {...props} sx={buttonStyles} />
+  const toolbarButtonProps: Partial<ButtonProps> = useMemo(() => {
+    if (colorScheme === 'main') {
+      return {
+        colorScheme: 'inverse',
+        _focusVisible: layerStyles.focusRing.inverse._focusVisible,
+      }
+    }
+    return { colorScheme }
+  }, [colorScheme])
+
+  return <Button size="xs" variant="clear" {...toolbarButtonProps} {...props} />
 }
diff --git a/react/src/Toolbar/ToolbarContext.tsx b/react/src/Toolbar/ToolbarContext.tsx
new file mode 100644
index 00000000..47f12643
--- /dev/null
+++ b/react/src/Toolbar/ToolbarContext.tsx
@@ -0,0 +1,30 @@
+import { createContext, FC, PropsWithChildren, useContext } from 'react'
+
+export interface ToolbarContextProps {
+  colorScheme?: 'main' | 'neutral'
+}
+
+export type ToolbarContextReturn = Required<ToolbarContextProps>
+
+const ToolbarContext = createContext<ToolbarContextReturn | undefined>(
+  undefined,
+)
+
+export const ToolbarProvider: FC<PropsWithChildren<ToolbarContextProps>> = ({
+  children,
+  colorScheme = 'main',
+}) => {
+  return (
+    <ToolbarContext.Provider value={{ colorScheme }}>
+      {children}
+    </ToolbarContext.Provider>
+  )
+}
+
+export const useToolbarContext = () => {
+  const context = useContext(ToolbarContext)
+  if (!context) {
+    throw new Error('useToolbar must be used within a ToolbarProvider')
+  }
+  return context
+}
diff --git a/react/src/Toolbar/ToolbarDivider.tsx b/react/src/Toolbar/ToolbarDivider.tsx
new file mode 100644
index 00000000..d9c662d8
--- /dev/null
+++ b/react/src/Toolbar/ToolbarDivider.tsx
@@ -0,0 +1,11 @@
+import { Divider, DividerProps } from '@chakra-ui/react'
+
+import { useToolbarStyles } from './Toolbar'
+
+export type ToolbarDividerProps = DividerProps
+
+export const ToolbarDivider = (props: ToolbarDividerProps): JSX.Element => {
+  const styles = useToolbarStyles()
+
+  return <Divider orientation="vertical" __css={styles.divider} {...props} />
+}
diff --git a/react/src/theme/components/Toolbar.ts b/react/src/theme/components/Toolbar.ts
index 5ab64a37..fce454e9 100644
--- a/react/src/theme/components/Toolbar.ts
+++ b/react/src/theme/components/Toolbar.ts
@@ -5,7 +5,7 @@ import { layerStyles } from '../layerStyles'
 
 import { Button } from './Button'
 
-const parts = anatomy('toolbar').parts('container', 'button', 'group')
+const parts = anatomy('toolbar').parts('container', 'group', 'divider')
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys)
@@ -14,6 +14,9 @@ const baseStyle = definePartsStyle({
   container: {
     textStyle: 'subhead-2',
   },
+  divider: {
+    borderColor: 'base.divider.medium',
+  },
 })
 
 const getSolidVariantContainerStyles = (c: string) => {
@@ -35,21 +38,6 @@ const getSolidVariantContainerStyles = (c: string) => {
   }
 }
 
-const getSolidVariantButtonStyles = (c: string) => {
-  if (c === 'main') {
-    return {
-      // @ts-expect-error type mismatch
-      ...Button.variants?.clear({
-        colorScheme: 'inverse',
-      }),
-      _focusVisible: layerStyles.focusRing.inverse._focusVisible,
-    }
-  }
-
-  // @ts-expect-error type mismatch
-  return Button.variants?.clear({ colorScheme: c })
-}
-
 const variantSolid = definePartsStyle((props) => {
   const { colorScheme: c } = props
 
@@ -60,7 +48,6 @@ const variantSolid = definePartsStyle((props) => {
       alignItems: 'center',
       ...getSolidVariantContainerStyles(c),
     },
-    button: getSolidVariantButtonStyles(c),
   }
 })
 
@@ -71,8 +58,10 @@ const variants = {
 const sizes = {
   md: definePartsStyle({
     container: {
+      h: '3rem',
       py: '0.625rem',
-      px: '1rem',
+      pl: '1rem',
+      pr: '0.25rem',
     },
   }),
 }

From 21b1c4dd7814ae12d199fff7f7c7aa14a9bdc9a5 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 16:58:36 +0800
Subject: [PATCH 09/12] feat: map ToolbarIcon size depending on size prop
 passed into Toolbar

---
 react/src/Toolbar/Toolbar.stories.tsx |  3 ++-
 react/src/Toolbar/Toolbar.tsx         |  4 +++-
 react/src/Toolbar/ToolbarButton.tsx   | 25 +++++++++++++++++++++++--
 react/src/Toolbar/ToolbarContext.tsx  |  5 ++++-
 react/src/theme/components/Toolbar.ts | 21 ++++++++++++++++++++-
 5 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/react/src/Toolbar/Toolbar.stories.tsx b/react/src/Toolbar/Toolbar.stories.tsx
index cd05f2ff..fc8f9a2a 100644
--- a/react/src/Toolbar/Toolbar.stories.tsx
+++ b/react/src/Toolbar/Toolbar.stories.tsx
@@ -1,4 +1,4 @@
-import { Spacer, Stack, Text } from '@chakra-ui/react'
+import { Spacer, Text } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
 import { BxUpload } from '..'
@@ -37,4 +37,5 @@ const Template: StoryFn<ToolbarProps> = ({ children, ...args }) => {
 export const Default = Template.bind({})
 Default.args = {
   colorScheme: 'main',
+  size: 'md',
 }
diff --git a/react/src/Toolbar/Toolbar.tsx b/react/src/Toolbar/Toolbar.tsx
index 97dbec64..c6a8acc2 100644
--- a/react/src/Toolbar/Toolbar.tsx
+++ b/react/src/Toolbar/Toolbar.tsx
@@ -3,6 +3,7 @@ import {
   createStylesContext,
   Flex,
   FlexProps,
+  ThemingProps,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
@@ -16,6 +17,7 @@ export { useToolbarStyles }
 
 export interface ToolbarProps extends PropsWithChildren, FlexProps {
   colorScheme?: 'main' | 'neutral'
+  size?: ThemingProps<'Toolbar'>['size']
 }
 
 /**
@@ -24,7 +26,7 @@ export interface ToolbarProps extends PropsWithChildren, FlexProps {
 export const Toolbar = ({ children, ...props }: ToolbarProps): JSX.Element => {
   const styles = useMultiStyleConfig('Toolbar', props)
   return (
-    <ToolbarProvider colorScheme={props.colorScheme}>
+    <ToolbarProvider {...props}>
       <ToolbarStylesProvider value={styles}>
         <Flex __css={styles.container} {...props}>
           {children}
diff --git a/react/src/Toolbar/ToolbarButton.tsx b/react/src/Toolbar/ToolbarButton.tsx
index b62be02d..2e401a77 100644
--- a/react/src/Toolbar/ToolbarButton.tsx
+++ b/react/src/Toolbar/ToolbarButton.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { useBreakpointValue } from '@chakra-ui/react'
 
 import { Button, ButtonProps } from '~/Button'
 import { layerStyles } from '~/theme/layerStyles'
@@ -8,7 +9,20 @@ import { useToolbarContext } from './ToolbarContext'
 export type ToolbarButtonProps = ButtonProps
 
 export const ToolbarButton = (props: ToolbarButtonProps): JSX.Element => {
-  const { colorScheme } = useToolbarContext()
+  const { colorScheme, size } = useToolbarContext()
+
+  const toolbarBreakpointSize = useBreakpointValue(
+    typeof size === 'string' ? { base: size } : size,
+  )
+
+  const toolbarSize = useMemo(() => {
+    switch (toolbarBreakpointSize) {
+      case 'xs':
+        return 'xs'
+      default:
+        return 'sm'
+    }
+  }, [toolbarBreakpointSize])
 
   const toolbarButtonProps: Partial<ButtonProps> = useMemo(() => {
     if (colorScheme === 'main') {
@@ -20,5 +34,12 @@ export const ToolbarButton = (props: ToolbarButtonProps): JSX.Element => {
     return { colorScheme }
   }, [colorScheme])
 
-  return <Button size="xs" variant="clear" {...toolbarButtonProps} {...props} />
+  return (
+    <Button
+      size={toolbarSize}
+      variant="clear"
+      {...toolbarButtonProps}
+      {...props}
+    />
+  )
 }
diff --git a/react/src/Toolbar/ToolbarContext.tsx b/react/src/Toolbar/ToolbarContext.tsx
index 47f12643..16af96d2 100644
--- a/react/src/Toolbar/ToolbarContext.tsx
+++ b/react/src/Toolbar/ToolbarContext.tsx
@@ -1,7 +1,9 @@
 import { createContext, FC, PropsWithChildren, useContext } from 'react'
+import { ThemingProps } from '@chakra-ui/react'
 
 export interface ToolbarContextProps {
   colorScheme?: 'main' | 'neutral'
+  size?: ThemingProps<'Toolbar'>['size']
 }
 
 export type ToolbarContextReturn = Required<ToolbarContextProps>
@@ -13,9 +15,10 @@ const ToolbarContext = createContext<ToolbarContextReturn | undefined>(
 export const ToolbarProvider: FC<PropsWithChildren<ToolbarContextProps>> = ({
   children,
   colorScheme = 'main',
+  size = 'md',
 }) => {
   return (
-    <ToolbarContext.Provider value={{ colorScheme }}>
+    <ToolbarContext.Provider value={{ colorScheme, size }}>
       {children}
     </ToolbarContext.Provider>
   )
diff --git a/react/src/theme/components/Toolbar.ts b/react/src/theme/components/Toolbar.ts
index fce454e9..408712cc 100644
--- a/react/src/theme/components/Toolbar.ts
+++ b/react/src/theme/components/Toolbar.ts
@@ -56,9 +56,28 @@ const variants = {
 }
 
 const sizes = {
-  md: definePartsStyle({
+  xs: definePartsStyle({
     container: {
+      gap: '0.5rem',
       h: '3rem',
+      py: '0.375rem',
+      pl: '1rem',
+      pr: '0.25rem',
+    },
+  }),
+  sm: definePartsStyle({
+    container: {
+      gap: '0.5rem',
+      h: '3.5rem',
+      py: '0.625rem',
+      pl: '1rem',
+      pr: '0.25rem',
+    },
+  }),
+  md: definePartsStyle({
+    container: {
+      gap: '0.5rem',
+      h: '3.5rem',
       py: '0.625rem',
       pl: '1rem',
       pr: '0.25rem',

From 8155e9b077477ea2a3e8616c0f37bdc6acb13fe4 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 17:14:34 +0800
Subject: [PATCH 10/12] feat: add ToolbarIconButton component

---
 react/src/Toolbar/Toolbar.tsx                 | 21 +---------
 react/src/Toolbar/ToolbarButton.tsx           | 40 ++----------------
 react/src/Toolbar/ToolbarContext.tsx          |  4 +-
 react/src/Toolbar/ToolbarIconButton.tsx       | 13 ++++++
 react/src/Toolbar/index.ts                    |  2 +
 .../Toolbar/utils/useToolbarButtonProps.ts    | 42 +++++++++++++++++++
 react/src/theme/components/Toolbar.ts         |  9 ++--
 7 files changed, 66 insertions(+), 65 deletions(-)
 create mode 100644 react/src/Toolbar/ToolbarIconButton.tsx
 create mode 100644 react/src/Toolbar/utils/useToolbarButtonProps.ts

diff --git a/react/src/Toolbar/Toolbar.tsx b/react/src/Toolbar/Toolbar.tsx
index c6a8acc2..5e231515 100644
--- a/react/src/Toolbar/Toolbar.tsx
+++ b/react/src/Toolbar/Toolbar.tsx
@@ -7,8 +7,6 @@ import {
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
-import { IconButton } from '~/IconButton'
-
 import { ToolbarProvider } from './ToolbarContext'
 
 const [ToolbarStylesProvider, useToolbarStyles] = createStylesContext('Toolbar')
@@ -16,7 +14,7 @@ const [ToolbarStylesProvider, useToolbarStyles] = createStylesContext('Toolbar')
 export { useToolbarStyles }
 
 export interface ToolbarProps extends PropsWithChildren, FlexProps {
-  colorScheme?: 'main' | 'neutral'
+  colorScheme?: 'main' | 'neutral' | 'sub'
   size?: ThemingProps<'Toolbar'>['size']
 }
 
@@ -35,20 +33,3 @@ export const Toolbar = ({ children, ...props }: ToolbarProps): JSX.Element => {
     </ToolbarProvider>
   )
 }
-
-/**
- * Component to group togglable buttons to allow selection of only one in a group.
- */
-export const ToolbarToggleGroup = () => {
-  return <Flex></Flex>
-}
-
-export const ToolbarToggleButton = () => {
-  return <Flex></Flex>
-}
-
-export const ToolbarDivider = () => {
-  return <Flex></Flex>
-}
-
-export const ToolbarIconButton = IconButton
diff --git a/react/src/Toolbar/ToolbarButton.tsx b/react/src/Toolbar/ToolbarButton.tsx
index 2e401a77..e782718c 100644
--- a/react/src/Toolbar/ToolbarButton.tsx
+++ b/react/src/Toolbar/ToolbarButton.tsx
@@ -1,45 +1,11 @@
-import { useMemo } from 'react'
-import { useBreakpointValue } from '@chakra-ui/react'
-
 import { Button, ButtonProps } from '~/Button'
-import { layerStyles } from '~/theme/layerStyles'
 
-import { useToolbarContext } from './ToolbarContext'
+import { useToolbarButtonProps } from './utils/useToolbarButtonProps'
 
 export type ToolbarButtonProps = ButtonProps
 
 export const ToolbarButton = (props: ToolbarButtonProps): JSX.Element => {
-  const { colorScheme, size } = useToolbarContext()
-
-  const toolbarBreakpointSize = useBreakpointValue(
-    typeof size === 'string' ? { base: size } : size,
-  )
-
-  const toolbarSize = useMemo(() => {
-    switch (toolbarBreakpointSize) {
-      case 'xs':
-        return 'xs'
-      default:
-        return 'sm'
-    }
-  }, [toolbarBreakpointSize])
-
-  const toolbarButtonProps: Partial<ButtonProps> = useMemo(() => {
-    if (colorScheme === 'main') {
-      return {
-        colorScheme: 'inverse',
-        _focusVisible: layerStyles.focusRing.inverse._focusVisible,
-      }
-    }
-    return { colorScheme }
-  }, [colorScheme])
+  const toolbarButtonProps = useToolbarButtonProps()
 
-  return (
-    <Button
-      size={toolbarSize}
-      variant="clear"
-      {...toolbarButtonProps}
-      {...props}
-    />
-  )
+  return <Button variant="clear" {...toolbarButtonProps} {...props} />
 }
diff --git a/react/src/Toolbar/ToolbarContext.tsx b/react/src/Toolbar/ToolbarContext.tsx
index 16af96d2..c6a242e7 100644
--- a/react/src/Toolbar/ToolbarContext.tsx
+++ b/react/src/Toolbar/ToolbarContext.tsx
@@ -2,7 +2,7 @@ import { createContext, FC, PropsWithChildren, useContext } from 'react'
 import { ThemingProps } from '@chakra-ui/react'
 
 export interface ToolbarContextProps {
-  colorScheme?: 'main' | 'neutral'
+  colorScheme?: 'main' | 'neutral' | 'sub'
   size?: ThemingProps<'Toolbar'>['size']
 }
 
@@ -14,7 +14,7 @@ const ToolbarContext = createContext<ToolbarContextReturn | undefined>(
 
 export const ToolbarProvider: FC<PropsWithChildren<ToolbarContextProps>> = ({
   children,
-  colorScheme = 'main',
+  colorScheme = 'sub',
   size = 'md',
 }) => {
   return (
diff --git a/react/src/Toolbar/ToolbarIconButton.tsx b/react/src/Toolbar/ToolbarIconButton.tsx
new file mode 100644
index 00000000..57fde50e
--- /dev/null
+++ b/react/src/Toolbar/ToolbarIconButton.tsx
@@ -0,0 +1,13 @@
+import { IconButton, IconButtonProps } from '~/IconButton'
+
+import { useToolbarButtonProps } from './utils/useToolbarButtonProps'
+
+export type ToolbarIconButtonProps = IconButtonProps
+
+export const ToolbarIconButton = (
+  props: ToolbarIconButtonProps,
+): JSX.Element => {
+  const toolbarButtonProps = useToolbarButtonProps()
+
+  return <IconButton variant="clear" {...toolbarButtonProps} {...props} />
+}
diff --git a/react/src/Toolbar/index.ts b/react/src/Toolbar/index.ts
index 665abf10..03b48f98 100644
--- a/react/src/Toolbar/index.ts
+++ b/react/src/Toolbar/index.ts
@@ -1,3 +1,5 @@
 export * from './Toolbar'
 export * from './ToolbarButton'
+export * from './ToolbarDivider'
 export * from './ToolbarGroup'
+export * from './ToolbarIconButton'
diff --git a/react/src/Toolbar/utils/useToolbarButtonProps.ts b/react/src/Toolbar/utils/useToolbarButtonProps.ts
new file mode 100644
index 00000000..8994e015
--- /dev/null
+++ b/react/src/Toolbar/utils/useToolbarButtonProps.ts
@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+import { useBreakpointValue } from '@chakra-ui/react'
+
+import { ButtonProps } from '~/Button'
+import { layerStyles } from '~/theme/layerStyles'
+
+import { useToolbarContext } from '../ToolbarContext'
+
+export const useToolbarButtonProps = (): ButtonProps => {
+  const { colorScheme, size } = useToolbarContext()
+
+  const toolbarBreakpointSize = useBreakpointValue(
+    typeof size === 'string' ? { base: size } : size,
+  )
+
+  const toolbarSize = useMemo(() => {
+    switch (toolbarBreakpointSize) {
+      case 'xs':
+        return 'xs'
+      default:
+        return 'sm'
+    }
+  }, [toolbarBreakpointSize])
+
+  const toolbarButtonStyleProps: Partial<ButtonProps> = useMemo(() => {
+    switch (colorScheme) {
+      case 'main':
+      case 'sub':
+        return {
+          colorScheme: 'inverse',
+          _focusVisible: layerStyles.focusRing.inverse._focusVisible,
+        }
+      default:
+        return { colorScheme }
+    }
+  }, [colorScheme])
+
+  return {
+    ...toolbarButtonStyleProps,
+    size: toolbarSize,
+  }
+}
diff --git a/react/src/theme/components/Toolbar.ts b/react/src/theme/components/Toolbar.ts
index 408712cc..0c4a7a69 100644
--- a/react/src/theme/components/Toolbar.ts
+++ b/react/src/theme/components/Toolbar.ts
@@ -1,10 +1,6 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
 import { anatomy } from '@chakra-ui/theme-tools'
 
-import { layerStyles } from '../layerStyles'
-
-import { Button } from './Button'
-
 const parts = anatomy('toolbar').parts('container', 'group', 'divider')
 
 const { defineMultiStyleConfig, definePartsStyle } =
@@ -21,9 +17,10 @@ const baseStyle = definePartsStyle({
 
 const getSolidVariantContainerStyles = (c: string) => {
   switch (c) {
+    case 'sub':
     case 'main':
       return {
-        bg: 'interaction.main.default',
+        bg: `interaction.${c}.default`,
         color: 'white',
       }
     case 'neutral':
@@ -90,7 +87,7 @@ export const Toolbar = defineMultiStyleConfig({
   variants,
   sizes,
   defaultProps: {
-    colorScheme: 'main',
+    colorScheme: 'sub',
     variant: 'solid',
     size: 'md',
   },

From e9f497615e8dfdb7ea9bde4c4950fa4ed5958e64 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 17:15:45 +0800
Subject: [PATCH 11/12] feat: update Toolbar stories

---
 react/src/Toolbar/Toolbar.stories.tsx | 29 ++++++++++++++++++---------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/react/src/Toolbar/Toolbar.stories.tsx b/react/src/Toolbar/Toolbar.stories.tsx
index fc8f9a2a..59d65423 100644
--- a/react/src/Toolbar/Toolbar.stories.tsx
+++ b/react/src/Toolbar/Toolbar.stories.tsx
@@ -1,12 +1,13 @@
 import { Spacer, Text } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
-import { BxUpload } from '..'
+import { BxsTimeFive, BxUpload } from '~/icons'
 
 import { Toolbar, ToolbarProps } from './Toolbar'
 import { ToolbarButton } from './ToolbarButton'
 import { ToolbarDivider } from './ToolbarDivider'
 import { ToolbarGroup } from './ToolbarGroup'
+import { ToolbarIconButton } from './ToolbarIconButton'
 
 export default {
   title: 'Components/Toolbar',
@@ -23,19 +24,27 @@ const Template: StoryFn<ToolbarProps> = ({ children, ...args }) => {
       {children}
       <ToolbarGroup>
         <ToolbarButton leftIcon={<BxUpload fontSize="1.25rem" />}>
-          Button
+          Download
         </ToolbarButton>
-        <ToolbarButton leftIcon={<BxUpload fontSize="1.25rem" />}>
-          Button
+        <ToolbarButton leftIcon={<BxsTimeFive fontSize="1.25rem" />}>
+          Move
         </ToolbarButton>
+        <ToolbarDivider />
+        <ToolbarIconButton icon={<BxUpload />} aria-label="Upload" />
+        <ToolbarDivider />
+        <ToolbarButton>Cancel</ToolbarButton>
       </ToolbarGroup>
-      <ToolbarDivider />
-      <ToolbarButton>Cancel</ToolbarButton>
     </Toolbar>
   )
 }
-export const Default = Template.bind({})
-Default.args = {
-  colorScheme: 'main',
-  size: 'md',
+export const TemplateExample = Template.bind({})
+
+export const NeutralColorScheme = Template.bind({})
+NeutralColorScheme.args = {
+  colorScheme: 'neutral',
+}
+
+export const SizeXs = Template.bind({})
+SizeXs.args = {
+  size: 'xs',
 }

From 2fff7c8120079b5e8ea3e959755da850b3628286 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 15 Feb 2023 17:31:28 +0800
Subject: [PATCH 12/12] fix: add Button stories for sizing

---
 react/src/Button/Button.stories.tsx | 57 +++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/react/src/Button/Button.stories.tsx b/react/src/Button/Button.stories.tsx
index 3020d802..1139c67d 100644
--- a/react/src/Button/Button.stories.tsx
+++ b/react/src/Button/Button.stories.tsx
@@ -191,3 +191,60 @@ LinkPrimary.args = {
   variant: 'link',
   colorScheme: 'brand.primary',
 }
+
+export const Sizes = () => (
+  <SimpleGrid columns={4} gap="1rem" textAlign="center">
+    <Text>Solid</Text>
+    <Text>Outline</Text>
+    <Text>Clear</Text>
+    <Text>Reverse</Text>
+    <Button size="xs" variant="solid">
+      extra small
+    </Button>
+    <Button size="xs" variant="outline">
+      extra small
+    </Button>
+    <Button size="xs" variant="clear" colorScheme="neutral">
+      extra small
+    </Button>
+    <Button size="xs" variant="reverse">
+      extra small
+    </Button>
+    <Button size="sm" variant="solid">
+      small
+    </Button>
+    <Button size="sm" variant="outline">
+      small
+    </Button>
+    <Button size="sm" variant="clear" colorScheme="neutral">
+      small
+    </Button>
+    <Button size="sm" variant="reverse">
+      small
+    </Button>
+    <Button size="md" variant="solid">
+      medium
+    </Button>
+    <Button size="md" variant="outline">
+      medium
+    </Button>
+    <Button size="md" variant="clear" colorScheme="neutral">
+      medium
+    </Button>
+    <Button size="md" variant="reverse">
+      medium
+    </Button>
+    <Button size="lg" variant="solid">
+      large
+    </Button>
+    <Button size="lg" variant="outline">
+      large
+    </Button>
+    <Button size="lg" variant="clear" colorScheme="neutral">
+      large
+    </Button>
+    <Button size="lg" variant="reverse">
+      large
+    </Button>
+  </SimpleGrid>
+)