From 15314de284c63aa48d0e2fc36669e658ddfa838a Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 30 Aug 2019 13:07:32 +0200
Subject: [PATCH 1/2] RFC: `enhanceName` and `replaceName` to customize styles

---
 .../react/src/lib/commonPropInterfaces.ts     |  6 ++++++
 packages/react/src/lib/renderComponent.tsx    | 20 +++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/lib/commonPropInterfaces.ts b/packages/react/src/lib/commonPropInterfaces.ts
index 200aef9ca6..3a1cb95223 100644
--- a/packages/react/src/lib/commonPropInterfaces.ts
+++ b/packages/react/src/lib/commonPropInterfaces.ts
@@ -3,6 +3,12 @@ import { ComponentVariablesInput, ComponentSlotStyle, AnimationProp } from '../t
 import { ReactChildren } from '../types'
 
 export interface StyledComponentProps<P = any, V = any> {
+  /** FIX ME */
+  enhanceName?: string
+
+  /** FIX ME */
+  replaceName?: string
+
   /** Additional CSS styles to apply to the component instance.  */
   styles?: ComponentSlotStyle<P, V>
 
diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx
index 73325ec83f..29f542b7cb 100644
--- a/packages/react/src/lib/renderComponent.tsx
+++ b/packages/react/src/lib/renderComponent.tsx
@@ -166,9 +166,24 @@ const renderComponent = <P extends {}>(
   const ElementType = getElementType({ defaultProps }, props) as React.ReactType<P>
   const stateAndProps = { ...state, ...props }
 
+  /** FIX ME */
+  if (props.enhanceName && props.replaceName) {
+    throw new Error('"enhanceName" and "replaceName" props can not be combined')
+  }
+
+  /** FIX ME */
+  if (props.enhanceName) {
+    if (!props.enhanceName.starsWith(`${displayName}:`)) {
+      throw new Error(
+        `"enhanceName" prop should start with "displayName" of matching component, i.e. "${displayName}:Variant"`,
+      )
+    }
+  }
+
   // Resolve variables for this component, allow props.variables to override
   const resolvedVariables: ComponentVariablesObject = mergeComponentVariables(
-    theme.componentVariables[displayName],
+    theme.componentVariables[props.replaceName || displayName],
+    theme.componentVariables[props.enhanceName],
     props.variables,
   )(theme.siteVariables)
 
@@ -178,7 +193,8 @@ const renderComponent = <P extends {}>(
 
   // Resolve styles using resolved variables, merge results, allow props.styles to override
   const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
-    theme.componentStyles[displayName],
+    theme.componentStyles[props.replaceName || displayName],
+    theme.componentStyles[props.enhanceName],
     { root: props.styles },
     { root: animationCSSProp },
   )

From 7e039691276827898057c6f9d6fba27ff6abd337 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 30 Aug 2019 13:39:11 +0200
Subject: [PATCH 2/2] fix bugs, add example

---
 .../Button/Types/ButtonExample.shorthand.tsx  | 84 ++++++++++++++++++-
 packages/react/src/lib/renderComponent.tsx    |  2 +-
 2 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
index d370431655..97b0936977 100644
--- a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
@@ -1,6 +1,86 @@
 import * as React from 'react'
-import { Button } from '@stardust-ui/react'
+import {
+  Button,
+  ButtonProps,
+  ComponentSlotStylesInput,
+  ComponentVariablesPrepared,
+  Flex,
+  Provider,
+  ThemeInput,
+} from '@stardust-ui/react'
 
-const ButtonExample = () => <Button content="Click here" />
+import { ButtonVariables } from 'src/themes/teams/components/Button/buttonVariables'
+
+type ButtonTertiaryVariables = {
+  backgroundColor: string
+  color: string
+  colorHover: string
+  fontWeight: string
+  fontWeightHover: string
+}
+
+type CustomTheme = ThemeInput & {
+  componentStyles: {
+    ButtonTertiary: ComponentSlotStylesInput<ButtonProps, ButtonTertiaryVariables>
+  }
+  componentVariables: { ButtonTertiary: ComponentVariablesPrepared }
+}
+
+const customTheme: CustomTheme = {
+  componentStyles: {
+    'Button:Disabled': {
+      root: { cursor: 'not-allowed' },
+    },
+    ButtonTertiary: {
+      root: ({ variables: v }) => ({
+        backgroundColor: v.backgroundColor,
+        border: 0,
+        color: v.color,
+        fontWeight: v.fontWeight,
+        textDecoration: 'underline',
+
+        ':hover': {
+          color: v.colorHover,
+          cursor: 'pointer',
+          fontWeight: v.fontWeightHover,
+        },
+      }),
+    },
+  },
+  componentVariables: {
+    'Button:Danger': (siteVariables): Partial<ButtonVariables> => ({
+      backgroundColor: siteVariables.colorScheme.red.background1,
+      backgroundColorHover: siteVariables.colorScheme.red.backgroundHover,
+      color: siteVariables.colorScheme.red.foreground,
+      colorHover: siteVariables.colorScheme.red.foregroundHover,
+      borderColorHover: siteVariables.colorScheme.red.background3,
+    }),
+    ButtonTertiary: (siteVariables): ButtonTertiaryVariables => ({
+      backgroundColor: 'transparent',
+      color: siteVariables.colorScheme.brand.foreground,
+      colorHover: siteVariables.colorScheme.brand.foregroundHover,
+      fontWeight: siteVariables.fontWeightRegular,
+      fontWeightHover: siteVariables.fontWeightSemibold,
+    }),
+  },
+}
+
+const ButtonExample = () => (
+  <>
+    <Provider theme={customTheme}>
+      <Flex gap="gap.medium">
+        <Button content="Button:Danger" enhanceName="Button:Danger" />
+        <Button content="Button:Disabled" disabled enhanceName="Button:Disabled" />
+
+        <Button content="ButtonTertiary" replaceName="ButtonTertiary" />
+      </Flex>
+    </Provider>
+    <div style={{ margin: 20 }}>
+      <button onClick={() => window.switchTheme('teams')}>Light theme</button>
+      <button onClick={() => window.switchTheme('teamsDark')}>Dark theme</button>
+      <button onClick={() => window.switchTheme('teamsHighContrast')}>HC theme</button>
+    </div>
+  </>
+)
 
 export default ButtonExample
diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx
index 29f542b7cb..37ca6ba16c 100644
--- a/packages/react/src/lib/renderComponent.tsx
+++ b/packages/react/src/lib/renderComponent.tsx
@@ -173,7 +173,7 @@ const renderComponent = <P extends {}>(
 
   /** FIX ME */
   if (props.enhanceName) {
-    if (!props.enhanceName.starsWith(`${displayName}:`)) {
+    if (!props.enhanceName.startsWith(`${displayName}:`)) {
       throw new Error(
         `"enhanceName" prop should start with "displayName" of matching component, i.e. "${displayName}:Variant"`,
       )