EP-6626: Clean up rebrand styles for components A-D

.changeset/mighty-years-smile.md

@@ -0,0 +1,23 @@
+---
+"@igloo-ui/action-menu": major
+"@igloo-ui/area-chart": major
+"@igloo-ui/color-picker": major
+"@igloo-ui/combobox": major
+"@igloo-ui/disclosure": major
+"@igloo-ui/dropdown": major
+"@igloo-ui/alert": minor
+"@igloo-ui/avatar": minor
+"@igloo-ui/bar-chart": minor
+"@igloo-ui/breadcrumb": minor
+"@igloo-ui/button": minor
+"@igloo-ui/button-group": minor
+"@igloo-ui/card": minor
+"@igloo-ui/carousel": minor
+"@igloo-ui/checkbox": minor
+"@igloo-ui/color": minor
+"@igloo-ui/datepicker": minor
+"@igloo-ui/dialog": minor
+---
+
+Clean up non-Workleap rebranded styles for components A-D.
+All consumers should now be using the Workleap branded versions of the components. This will happen automatically, and consumers can stop setting `data-brand="workleap"` for these components.

packages/ActionMenu/src/ActionMenu.stories.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
 import isChromatic from 'chromatic/isChromatic';
+import React from 'react';
 
-import IconButton from '@igloo-ui/icon-button';
 import Button from '@igloo-ui/button';
 import HelperText from '@igloo-ui/helper-text';
-import Kebab from '@igloo-ui/icons/dist/Kebab';
+import IconButton from '@igloo-ui/icon-button';
 import AddSolid from '@igloo-ui/icons/dist/AddSolid';
-import Delete from '@igloo-ui/icons/dist/Delete';
 import Copy from '@igloo-ui/icons/dist/Copy';
+import Delete from '@igloo-ui/icons/dist/Delete';
+import Kebab from '@igloo-ui/icons/dist/Kebab';
 
 import { Meta, StoryFn } from '@storybook/react';
 
@@ -87,7 +87,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, '').replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   argTypes: {
     closeOnSelect: {
@@ -145,7 +146,7 @@ export const WithinContainer = {
             }}
           />
         </div>
-        <div className="isb-action-menu__card" 
+        <div className="isb-action-menu__card"
             style={{zIndex: openedIndex === 1 ? 5 : 0}}>
           <ActionMenu
             {...args}

packages/ActionMenu/src/action-menu.scss

@@ -7,11 +7,6 @@
 @layer igloo {
     :root {
         /* Default */
-        --ids-action-menu-font-family: #{tokens.$primary-font-family};
-        --ids-action-menu-font-size: #{tokens.$font-size-4};
-    }
-
-    [data-brand="workleap"] {
         --ids-action-menu-font-family: var(--hop-body-sm-font-family);
         --ids-action-menu-font-size: var(--hop-body-sm-font-size);
     }

packages/Alert/src/Alert.stories.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 
 import { Meta } from '@storybook/react';
 
-import Tooltip from '@igloo-ui/tooltip';
-import Hyperlink from '@igloo-ui/hyperlink';
 import Section from '@components/section';
+import Hyperlink from '@igloo-ui/hyperlink';
+import Tooltip from '@igloo-ui/tooltip';
 import readme from '../README.md';
 
+import Alert from './Alert';
 import {
-  InfoIcon,
+    InfoIcon,
 } from './svgs';
-import Alert from './Alert';
 
 export default {
   title: 'Components/Alert',
@@ -20,7 +20,8 @@ export default {
       description: {
         component: readme.replace(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   argTypes: {
     message: {
@@ -114,7 +115,7 @@ export const WithButton = () => (
 export const WithLink = () => (
   <Section column>
     <Alert
-      link={{ 
+      link={{
         children: <a href="#">Tell me more</a>
        }}
       type="info"
@@ -123,7 +124,7 @@ export const WithLink = () => (
       message={mockContent.message}
     />
     <Alert
-      link={{ 
+      link={{
         children: <a href="#">Tell me more</a>
        }}
       type="info"
@@ -132,7 +133,7 @@ export const WithLink = () => (
       message={mockContent.message}
     />
     <Alert
-      link={{ 
+      link={{
         children: <a href="#">Tell me more</a>
        }}
       type="info"

packages/Alert/src/Alert.tsx

@@ -1,28 +1,21 @@
-import * as React from "react";
 import classNames from "classnames";
+import * as React from "react";
 
-import Button, { type Appearance as ButtonAppearance } from "@igloo-ui/button";
+import { DismissIcon } from "@hopper-ui/icons-react16";
+import Button from "@igloo-ui/button";
 import type { HyperlinkProps } from "@igloo-ui/hyperlink";
 import IconButton, { type Size as IconButtonSize } from "@igloo-ui/icon-button";
-import { DismissIcon } from "@hopper-ui/icons-react16";
+import { useLocalizedStringFormatter } from "@igloo-ui/provider";
+import intlMessages from "./intl";
 import {
-    InfoIcon,
     CrownIcon,
+    InfoIcon,
     SuccessIcon,
     WarningIcon
 } from "./svgs";
-import {
-    TadaIcon as LegacyTadaIcon,
-    InfoIcon as LegacyInfoIcon,
-    CrownIcon as LegacyCrownIcon,
-    SuccessIcon as LegacySuccessIcon,
-    WarningIcon as LegacyWarningIcon
-} from "./legacy/svgs";
-import { useLocalizedStringFormatter } from "@igloo-ui/provider";
-import intlMessages from "./intl";
 
-import "./alert.scss";
 import Hyperlink from "@igloo-ui/hyperlink";
+import "./alert.scss";
 
 export type Type = "announcement" | "info" | "premium" | "success" | "warning";
 
@@ -61,16 +54,11 @@ export interface AlertProps extends Omit<React.ComponentProps<"div">, "title"> {
     link?: HyperlinkProps;
 }
 
-const getBrand = (): string => {
-    return document.documentElement.getAttribute("data-brand") ?? "igloo";
-};
-
 const renderIcon = (
     style: Appearance,
     hasButton: boolean,
     type: Type,
     icon?: React.ReactElement,
-    isWorkleap?: boolean
 ): JSX.Element => {
     const classes = classNames("ids-alert__icon", `ids-alert__icon--${style}`, {
         "ids-alert__icon--small-top": hasButton,
@@ -81,11 +69,11 @@ const renderIcon = (
         <div className={classes}>
             {icon || (
                 <>
-                    {type === "announcement" && (isWorkleap ? <InfoIcon /> : <LegacyTadaIcon />)}
-                    {type === "info" && (isWorkleap ? <InfoIcon /> : <LegacyInfoIcon />)}
-                    {type === "premium" && (isWorkleap ? <CrownIcon /> : <LegacyCrownIcon />)}
-                    {type === "success" && (isWorkleap ? <SuccessIcon /> : <LegacySuccessIcon />)}
-                    {type === "warning" && (isWorkleap ? <WarningIcon /> : <LegacyWarningIcon />)}
+                    {type === "announcement" && <InfoIcon />}
+                    {type === "info" && <InfoIcon />}
+                    {type === "premium" && <CrownIcon />}
+                    {type === "success" && <SuccessIcon />}
+                    {type === "warning" && <WarningIcon />}
                 </>
             )}
         </div>
@@ -120,21 +108,15 @@ const renderDismissButton = (
 };
 
 const renderAlertActionButton = (
-    style: Appearance,
     button?: AlertButton,
-    isWorkleap?: boolean
 ): JSX.Element => {
     if (button == null || button.onClick == null || button.label == null) {
         return <></>;
     }
 
-    const ghostAppearance = isWorkleap ?
-        { type: "ghost", variant: "secondary" } as ButtonAppearance :
-        "ghost";
-
     return (
         <Button
-            appearance={style === "horizontal" && !isWorkleap ? ghostAppearance : "secondary"}
+            appearance="secondary"
             size="small"
             onClick={button.onClick}
             loading={button.loading}
@@ -192,7 +174,6 @@ const Alert: React.FunctionComponent<AlertProps> = ({
     const hasLink = link !== undefined;
     const isHorizontal = appearance === "horizontal";
     const canBeClosed = closable;
-    const isWorkleap = getBrand() === "workleap";
 
     if (show) {
         return (
@@ -202,18 +183,15 @@ const Alert: React.FunctionComponent<AlertProps> = ({
                 data-test={dataTest}
                 {...rest}
             >
-                {icon !== null &&
-          !isHorizontal &&
-          renderIcon(appearance, hasButton || hasLink, type, icon, isWorkleap)}
-
+                {icon !== null && !isHorizontal && renderIcon(appearance, hasButton || hasLink, type, icon)}
                 <div className="ids-alert__body">
                     <div className="ids-alert__header">
                         <p className="ids-alert__title">{title}</p>
                         <p className="ids-alert__metadata">{metadata}</p>
                     </div>
                     {!isHorizontal && <div className="ids-alert__content">{message}</div>}
                     {hasLink && renderAlertActionLink(link)}
-                    {hasButton && renderAlertActionButton(appearance, button, isWorkleap)}
+                    {hasButton && renderAlertActionButton(button)}
                 </div>
 
                 {canBeClosed && renderDismissButton(setShow,

packages/Alert/src/__snapshots__/Alert.test.tsx.snap

@@ -9,37 +9,32 @@ exports[`Alert It should render a snapshot 1`] = `
       class="ids-alert__icon ids-alert__icon--card ids-alert__icon--medium-centered"
     >
       <svg
-        fill="none"
-        height="32"
-        viewBox="0 0 32 32"
-        width="32"
+        fill="#BAE6FF"
+        height="40"
+        viewBox="0 0 40 40"
+        width="40"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <circle
-          cx="16"
-          cy="16"
-          fill="#B2DDF2"
-          r="16"
+        <path
+          d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20Z"
         />
         <path
-          d="M16.6158 7.39951C17.34 8.52136 17.0484 9.99799 15.9645 10.6977C14.8807 11.3973 13.4149 11.0551 12.6908 9.93323C11.9666 8.81138 12.2582 7.33475 13.342 6.63509C14.4259 5.93542 15.8916 6.27767 16.6158 7.39951Z"
-          fill="white"
+          d="M29.138 29.138A12.976 12.976 0 0 0 34 19c0-7.18-5.82-13-13-13-4.1 0-7.755 1.897-10.138 4.862C8.5 13.5 6 16.9 6 21c0 7.18 5.82 13 13 13 4.1 0 7-2.5 10.138-4.862Z"
+          fill="#0A538B"
         />
         <path
-          d="M17.5039 13.6C16.8639 13.6 14.5706 15.2 13.5039 16C9.50391 19.2 14.7039 17.2 15.1039 18.4C15.4239 19.36 15.7706 24.1333 15.9039 26.4C15.9274 26.8 20.2449 26.517 20.8 26C22.1927 24.703 19.4993 24.2993 18.8 23.6C18.4 23.2 18.3039 13.6 17.5039 13.6Z"
-          fill="white"
+          d="M32.75 19c0 6.49-5.26 11.75-11.75 11.75S9.25 25.49 9.25 19 14.51 7.25 21 7.25 32.75 12.51 32.75 19Z"
+          fill="#fff"
         />
         <path
           clip-rule="evenodd"
-          d="M14.4 7.2C13.5163 7.2 12.8 7.91634 12.8 8.8C12.8 9.68365 13.5163 10.4 14.4 10.4C15.2837 10.4 16 9.68365 16 8.8C16 7.91634 15.2837 7.2 14.4 7.2ZM11.2 8.8C11.2 7.03269 12.6327 5.6 14.4 5.6C16.1673 5.6 17.6 7.03269 17.6 8.8C17.6 10.5673 16.1673 12 14.4 12C12.6327 12 11.2 10.5673 11.2 8.8Z"
-          fill="#233043"
+          d="M21.625 26.125v-8.25h-1.25v8.25h1.25Z"
+          fill="#0A538B"
           fill-rule="evenodd"
         />
         <path
-          clip-rule="evenodd"
-          d="M16.1657 13.8343C16.4781 14.1467 16.4781 14.6533 16.1657 14.9657C15.7262 15.4052 15.1488 16.0779 14.5585 16.7694C14.5313 16.8013 14.504 16.8333 14.4767 16.8653C14.3774 16.9816 14.2777 17.0984 14.1787 17.214C14.3856 17.2056 14.5962 17.2 14.8 17.2C15.1982 17.2 15.5357 17.4927 15.592 17.8869L16.6939 25.6H19.6687L18.2344 24.1657C18.1038 24.0351 18.0224 23.8634 18.004 23.6796L17.204 15.6796C17.16 15.24 17.4808 14.8479 17.9204 14.804C18.3601 14.76 18.7521 15.0808 18.7961 15.5204L19.5677 23.2362L22.1657 25.8343C22.3945 26.0631 22.463 26.4072 22.3391 26.7061C22.2153 27.0051 21.9236 27.2 21.6 27.2H16C15.6019 27.2 15.2644 26.9073 15.2081 26.5131L14.1088 18.8184C13.9024 18.8281 13.6984 18.8404 13.5033 18.8522C13.3696 18.8603 13.24 18.8681 13.1167 18.8747C12.889 18.8868 12.642 18.8971 12.459 18.8829C12.4091 18.879 12.3448 18.872 12.2763 18.8574C12.2223 18.8458 12.0937 18.8154 11.9611 18.7295C11.8112 18.6325 11.5593 18.3884 11.5818 17.9884C11.5993 17.6772 11.7818 17.4869 11.8344 17.4343C12.196 17.0727 12.7175 16.4617 13.2927 15.7878C13.309 15.7688 13.3253 15.7497 13.3416 15.7306C13.9179 15.0554 14.5405 14.3281 15.0344 13.8343C15.3468 13.5219 15.8533 13.5219 16.1657 13.8343Z"
-          fill="#233043"
-          fill-rule="evenodd"
+          d="M23 14a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+          fill="#0A538B"
         />
       </svg>
     </div>