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 = () => + + + + +) export default ButtonExample 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

{ + /** FIX ME */ + enhanceName?: string + + /** FIX ME */ + replaceName?: string + /** Additional CSS styles to apply to the component instance. */ styles?: ComponentSlotStyle diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx index 73325ec83f..37ca6ba16c 100644 --- a/packages/react/src/lib/renderComponent.tsx +++ b/packages/react/src/lib/renderComponent.tsx @@ -166,9 +166,24 @@ const renderComponent =

( const ElementType = getElementType({ defaultProps }, props) as React.ReactType

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.startsWith(`${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 =

( // 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 }, )