fix(secondary-button): split button additional secondary style

added additional secondary style to the split button

Author: mihai-albu-sage

src/components/button/button-types.style.ts

@@ -37,7 +37,11 @@ const gradientSharedStyle = `
   }
 `;
 
-export default (isDisabled?: boolean, destructive?: boolean) => ({
+export default (
+  isDisabled?: boolean,
+  destructive?: boolean,
+  isWhite?: boolean,
+) => ({
   primary: `
     background: var(--colorsActionMajor500);
     border-color: transparent;
@@ -93,6 +97,20 @@ export default (isDisabled?: boolean, destructive?: boolean) => ({
         ${makeColors("var(--colorsActionMajorYang100)")};
       }
 
+      ${
+        isWhite && !isDisabled && !destructive
+          ? `
+          border-color: var(--colorsActionMajorYang100);
+          ${makeColors("var(--colorsActionMajorYang100)")};
+          &:hover {
+            background: var(--colorsActionMajorYang100);
+            border-color: var(--colorsActionMajorYang100);
+            ${makeColors("var(--colorsYin100)")};
+          }
+          `
+          : ""
+      }
+
       ${
         destructive
           ? `

src/components/button/button.component.tsx

@@ -92,6 +92,7 @@ export interface ButtonProps extends SpaceProps, TagProps {
    * Set a class name on the button element. INTERNAL USE ONLY.
    */
   className?: string;
+  isWhite?: boolean;
 }
 
 interface RenderChildrenProps
@@ -195,6 +196,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       destructive = false,
       disabled = false,
+      isWhite = false,
       fullWidth: fullWidthProp = false,
       href,
       iconPosition: iconPositionProp = "before",
@@ -292,6 +294,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         buttonType={buttonType}
         disabled={isDisabled}
         destructive={destructive}
+        isWhite={isWhite}
         type={href ? undefined : "button"}
         iconType={iconType}
         size={size}

src/components/button/button.style.ts

@@ -37,12 +37,13 @@ function stylingForType({
   buttonType,
   size,
   destructive,
-}: Pick<ButtonProps, "disabled" | "size" | "destructive"> & {
+  isWhite,
+}: Pick<ButtonProps, "disabled" | "size" | "destructive" | "isWhite"> & {
   iconOnly?: boolean;
   buttonType: Required<ButtonProps>["buttonType"];
 }) {
   return css`
-    ${buttonTypes(disabled, destructive)[buttonType]};
+    ${buttonTypes(disabled, destructive, isWhite)[buttonType]};
 
     ${size === "small" &&
     css`

src/components/split-button/split-button-toggle.style.ts

@@ -14,16 +14,17 @@ type StyledSplitButtonToggleProps = {
   disabled: boolean;
   displayed: boolean;
   size: "small" | "medium" | "large";
+  isWhite?: boolean;
 };
 
 const StyledSplitButtonToggle = styled(
   StyledButton,
 )<StyledSplitButtonToggleProps>`
-  ${({ buttonType, disabled, displayed, size }) => css`
+  ${({ buttonType, disabled, displayed, size, isWhite }) => css`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
 
-    ${!disabled && displayed
+    ${!disabled && displayed && !isWhite
       ? css`
           background-color: var(--colorsActionMajor500);
           border-color: var(--colorsActionMajor500);
@@ -73,6 +74,20 @@ const StyledSplitButtonToggle = styled(
         color: var(--colorsActionMajorYang100);
       }
     }
+
+    ${!disabled &&
+    isWhite &&
+    `
+      &:focus {
+        background-color: var(--colorsActionMajorYang100);
+        border-color: var(--colorsActionMajorYang100);
+
+        &,
+        ${StyledIcon} {
+          color: var(--colorsYin100);
+        }
+      }
+    `}
   `}
 `;
 

src/components/split-button/split-button.component.tsx

@@ -57,6 +57,8 @@ export interface SplitButtonProps
   text: string;
   /** Sets rendering position of menu */
   position?: "left" | "right";
+  /** Renders the white variant of the secondary split button */
+  isWhite?: boolean;
 }
 
 export type SplitButtonHandle = {
@@ -83,6 +85,7 @@ export const SplitButton = forwardRef<SplitButtonHandle, SplitButtonProps>(
       "data-element": dataElement,
       "data-role": dataRole,
       "aria-label": ariaLabel,
+      isWhite = false,
       ...rest
     },
     ref,
@@ -97,6 +100,8 @@ export const SplitButton = forwardRef<SplitButtonHandle, SplitButtonProps>(
     const { isInFlatTable } =
       useContext<FlatTableContextProps>(FlatTableContext);
 
+    const shouldRenderIsWhiteVariant = buttonType === "secondary" && isWhite;
+
     useImperativeHandle<SplitButtonHandle, SplitButtonHandle>(
       ref,
       () => ({
@@ -140,6 +145,7 @@ export const SplitButton = forwardRef<SplitButtonHandle, SplitButtonProps>(
       onClick: handleMainClick,
       size,
       subtext,
+      isWhite: shouldRenderIsWhiteVariant,
       ...filterOutStyledSystemSpacingProps(rest),
     };
 
@@ -148,6 +154,7 @@ export const SplitButton = forwardRef<SplitButtonHandle, SplitButtonProps>(
     };
 
     const toggleButtonProps = {
+      isWhite: shouldRenderIsWhiteVariant,
       disabled,
       displayed: showAdditionalButtons,
       onTouchStart: showButtons,

src/components/split-button/split-button.stories.tsx

@@ -220,3 +220,21 @@ export const InOverflowHiddenContainer: Story = () => (
 );
 InOverflowHiddenContainer.storyName = "In Overflow Hidden Container";
 InOverflowHiddenContainer.parameters = { chromatic: { disableSnapshot: true } };
+
+export const SecondaryIsWhite: Story = () => {
+  return (
+    <Box p={3} backgroundColor="#000" width="500px" height="500px">
+      <SplitButton
+        buttonType="secondary"
+        text="Split button - secondary - isWhite"
+        isWhite
+      >
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+      </SplitButton>
+    </Box>
+  );
+};
+SecondaryIsWhite.storyName = "Secondary Is White";
+SecondaryIsWhite.parameters = { chromatic: { disableSnapshot: false } };