From 95fc31cc3d24f9eadf63e0848059625931c1a413 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:12:10 -0400 Subject: [PATCH 1/9] Clean up rebrand logic and styles from components A-D --- packages/ActionMenu/src/action-menu.scss | 5 - packages/Alert/src/Alert.tsx | 52 +-- packages/Alert/src/alert.scss | 116 ++---- packages/AreaChart/src/area-chart.scss | 25 +- packages/AreaChart/src/chart-tooltip.scss | 32 -- packages/Avatar/src/avatar.scss | 54 ++- packages/BarChart/src/bar-chart.scss | 20 -- packages/Breadcrumb/src/breadcrumb.scss | 30 +- packages/Button/src/button.scss | 331 ++++++------------ packages/ButtonGroup/src/button-group.scss | 59 ---- packages/Card/src/card.scss | 23 +- packages/Carousel/src/carousel.scss | 29 -- packages/Checkbox/src/checkbox.scss | 45 --- packages/Color/src/color.scss | 27 -- packages/ColorPicker/src/ColorPicker.tsx | 229 +++--------- .../ColorPicker/src/color-picker-option.scss | 17 - packages/ColorPicker/src/color-picker.scss | 21 -- packages/Combobox/src/ComboboxInput.tsx | 21 +- packages/Combobox/src/combobox-input.scss | 30 -- packages/Combobox/src/combobox.scss | 50 --- packages/Datepicker/src/datepicker.scss | 55 +-- packages/Dialog/src/dialog.scss | 42 --- packages/Disclosure/src/disclosure.scss | 48 --- packages/Dropdown/src/dropdown.scss | 26 -- packages/Dropdown/src/mixins.scss | 8 - 25 files changed, 233 insertions(+), 1162 deletions(-) diff --git a/packages/ActionMenu/src/action-menu.scss b/packages/ActionMenu/src/action-menu.scss index e73de3c6d..b010b12fa 100644 --- a/packages/ActionMenu/src/action-menu.scss +++ b/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); } diff --git a/packages/Alert/src/Alert.tsx b/packages/Alert/src/Alert.tsx index e9193afad..93e3aeb93 100644 --- a/packages/Alert/src/Alert.tsx +++ b/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, "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 = (
{icon || ( <> - {type === "announcement" && (isWorkleap ? : )} - {type === "info" && (isWorkleap ? : )} - {type === "premium" && (isWorkleap ? : )} - {type === "success" && (isWorkleap ? : )} - {type === "warning" && (isWorkleap ? : )} + {type === "announcement" && } + {type === "info" && } + {type === "premium" && } + {type === "success" && } + {type === "warning" && } )}
@@ -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 ( ; } } diff --git a/packages/ColorPicker/src/color-picker-option.scss b/packages/ColorPicker/src/color-picker-option.scss index 0980b71a1..b7288dbe6 100644 --- a/packages/ColorPicker/src/color-picker-option.scss +++ b/packages/ColorPicker/src/color-picker-option.scss @@ -2,23 +2,6 @@ @use '~@igloo-ui/tokens/dist/fonts'; :root { - /* Default */ - --ids-color-picker-option-border-radius: #{tokens.$border-radius-md}; - --ids-color-picker-option-border-size: 0.15rem; - --ids-color-picker-option-padding: #{tokens.$space-1}; - - /* Focused */ - --ids-color-picker-option-border-color-focus: #{tokens.$electric-blue-600}; - - /* Hovered */ - --ids-color-picker-option-border-color-hover: #{tokens.$grey-600}; - - /* Selected */ - --ids-color-picker-option-border-color-selected: #{tokens.$grey-400}; - -} - -[data-brand="workleap"] { /* Default */ --ids-color-picker-option-border-radius: var(--hop-shape-circle); --ids-color-picker-option-border-size: 0.09rem; diff --git a/packages/ColorPicker/src/color-picker.scss b/packages/ColorPicker/src/color-picker.scss index 2e31e78d8..f4c740eec 100644 --- a/packages/ColorPicker/src/color-picker.scss +++ b/packages/ColorPicker/src/color-picker.scss @@ -6,27 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-color-picker-font-family: #{tokens.$primary-font-family}; - --ids-color-picker-font-size: #{tokens.$font-size-4}; - --ids-color-picker-font-weight: #{tokens.$font-weight-regular}; - --ids-color-picker-line-height: #{tokens.$line-height-sm}; - --ids-color-picker-padding: #{tokens.$space-1}; - - /* Button */ - --ids-color-picker-btn-background: #{tokens.$samoyed}; - --ids-color-picker-btn-background-disabled: #{tokens.$grey-300}; - --ids-color-picker-btn-border-color: #{tokens.$grey-300}; - --ids-color-picker-btn-border-color-hover: #{tokens.$grey-600}; - --ids-color-picker-btn-border-color-active: #{tokens.$grey-600}; - --ids-color-picker-btn-border-color-disabled: #{tokens.$grey-300}; - --ids-color-picker-btn-border-radius: #{tokens.$border-radius-sm}; - --ids-color-picker-btn-border-size: 0.15rem; - --ids-color-picker-btn-focus: #{tokens.$electric-blue-600}; - --ids-color-picker-btn-padding: #{tokens.$space-2}; - } - - [data-brand="workleap"] { /* Default */ --ids-color-picker-font-family: var(--hop-body-sm-font-family); --ids-color-picker-font-size: var(--hop-body-sm-font-size); diff --git a/packages/Combobox/src/ComboboxInput.tsx b/packages/Combobox/src/ComboboxInput.tsx index 0d3fef6bc..60ebc82b5 100644 --- a/packages/Combobox/src/ComboboxInput.tsx +++ b/packages/Combobox/src/ComboboxInput.tsx @@ -3,14 +3,12 @@ import * as React from "react"; import cx from "classnames"; // eslint-disable-next-line import/no-extraneous-dependencies -import { VisualIdentifier } from "@shared/components"; -import ChevronUp from "@igloo-ui/icons/dist/TableChevronSelectedUp"; -import ChevronDown from "@igloo-ui/icons/dist/TableChevronSelectedDown"; +import { AngleDownIcon, AngleUpIcon, DismissIcon } from "@hopper-ui/icons-react16"; import IconButton from "@igloo-ui/icon-button"; import Search from "@igloo-ui/icons/dist/Search"; -import Tooltip from "@igloo-ui/tooltip"; import Input from "@igloo-ui/input"; -import { AngleDownIcon, AngleUpIcon, DismissIcon } from "@hopper-ui/icons-react16"; +import Tooltip from "@igloo-ui/tooltip"; +import { VisualIdentifier } from "@shared/components"; import "./combobox-input.scss"; @@ -47,10 +45,6 @@ export interface ComboboxInputProps extends React.ComponentProps<"div"> { value?: string; } -const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; -}; - const ComboboxInput: React.FunctionComponent = ({ clear = false, clearTooltipText, @@ -69,14 +63,9 @@ const ComboboxInput: React.FunctionComponent = ({ value, ...rest }: ComboboxInputProps) => { - const isWorkleap = getBrand() === "workleap"; const chevronClass = "ids-combobox-input__chevron"; - const chevronUpIcon = isWorkleap ? - : - ; - const chevronDownIcon = isWorkleap ? - : - ; + const chevronUpIcon = + const chevronDownIcon = const handleChange = ({ target diff --git a/packages/Combobox/src/combobox-input.scss b/packages/Combobox/src/combobox-input.scss index 638bf7707..e0975eb4c 100644 --- a/packages/Combobox/src/combobox-input.scss +++ b/packages/Combobox/src/combobox-input.scss @@ -1,35 +1,6 @@ @use '~@igloo-ui/tokens/dist/base10/variables' as tokens; :root { - /* Default */ - --ids-combobox-input-chevron-color: #{tokens.$grey-800}; - --ids-combobox-input-search-height: 3.9rem; - --ids-combobox-input-actions-padding: 0 #{tokens.$space-2}; - --ids-combobox-input-value-padding: #{tokens.$space-2} #{tokens.$space-3}; - --ids-combobox-input-value-color: #{tokens.$grey-800}; - --ids-combobox-input-clear-margin-right: #{tokens.$space-1}; - - /* Disabled */ - --ids-combobox-input-chevron-color-disabled: #{tokens.$grey-600}; - --ids-combobox-input-value-color-disabled: #{tokens.$grey-500}; - - /* Compact **/ - --ids-combobox-input-value-padding-compact: #{tokens.$space-1} #{tokens.$space-3}; - --ids-combobox-input-search-height-compact: 3rem; - - /* Placeholder */ - --ids-combobox-input-value-color-placeholder: #{tokens.$grey-400}; - - /* Visual Identifier */ - --ids-combobox-input-icon-size: #{tokens.$space-3}; - --ids-combobox-input-icon-margin-right: #{tokens.$space-2}; - - /* Search icon */ - --ids-combobox-input-search-icon-color: #{tokens.$grey-400}; - --ids-combobox-input-search-icon-margin: 0 #{tokens.$space-2} 0 #{tokens.$space-3}; -} - -[data-brand="workleap"] { /* Default */ --ids-combobox-input-chevron-color: var(--hop-neutral-icon-weak); --ids-combobox-input-search-height: 2.4375rem; @@ -58,7 +29,6 @@ --ids-combobox-input-search-icon-margin: 0 var(--hop-space-inline-sm) 0 var(--hop-space-inline-md); } - .ids-combobox-input { align-content: center; align-items: center; diff --git a/packages/Combobox/src/combobox.scss b/packages/Combobox/src/combobox.scss index 4dd82613b..acd611450 100644 --- a/packages/Combobox/src/combobox.scss +++ b/packages/Combobox/src/combobox.scss @@ -7,55 +7,6 @@ @layer igloo { :root { - /* Default */ - --ids-combobox-font-family: #{tokens.$primary-font-family}; - --ids-combobox-font-size: #{tokens.$font-size-4}; - --ids-combobox-font-weight: #{tokens.$font-weight-regular}; - --ids-combobox-line-height: #{tokens.$space-4}; - --ids-combobox-background: #{tokens.$samoyed}; - --ids-combobox-border-width: 0.1rem; - --ids-combobox-border-color: #{tokens.$grey-300}; - --ids-combobox-border-radius: #{tokens.$border-radius-sm}; - --ids-combobox-height: #{tokens.$space-6}; - - /* Compact */ - --ids-combobox-font-size-compact: #{tokens.$font-size-3}; - --ids-combobox-line-height-compact: #{tokens.$line-height-xxl}; - --ids-combobox-height-compact: #{tokens.$space-5}; - - /* Hover */ - --ids-combobox-border-color-hover: #{tokens.$grey-600}; - --ids-combobox-background-hover: #{tokens.$samoyed}; - - /* Pressed */ - --ids-combobox-border-color-pressed: #{tokens.$grey-600}; - --ids-combobox-background-pressed: #{tokens.$samoyed}; - - /* Active */ - --ids-combobox-border-color-active: #{tokens.$electric-blue-500}; - --ids-combobox-background-active: #{tokens.$samoyed}; - - /* Focus */ - --ids-combobox-border-color-focus: #{tokens.$electric-blue-500}; - --ids-combobox-background-focus: #{tokens.$samoyed}; - --ids-combobox-focus: none; - - /* Disabled */ - --ids-combobox-color-disabled: #{tokens.$grey-500}; - --ids-combobox-background-disabled: #{tokens.$grey-200}; - --ids-combobox-border-color-disabled: #{tokens.$grey-200}; - - /* Error */ - --ids-combobox-border-color-error: #{tokens.$coral-500}; - - /* No Results */ - --ids-combobox-no-results-color: #{tokens.$grey-600}; - --ids-combobox-no-results-font-size: #{tokens.$font-size-3}; - --ids-combobox-no-results-padding: #{tokens.$space-3}; - --ids-combobox-no-results-line-height: #{tokens.$line-height-xxl}; - } - - [data-brand="workleap"] { /* Default */ --ids-combobox-font-family: var(--hop-body-md-font-family); --ids-combobox-font-size: var(--hop-body-md-font-size); @@ -103,7 +54,6 @@ --ids-combobox-no-results-font-size: var(--hop-body-sm-font-size); --ids-combobox-no-results-padding: var(--hop-space-inset-md); --ids-combobox-no-results-line-height: var(--hop-body-sm-line-height); - } .ids-combobox { diff --git a/packages/Datepicker/src/datepicker.scss b/packages/Datepicker/src/datepicker.scss index a5ec80b07..99e533e50 100644 --- a/packages/Datepicker/src/datepicker.scss +++ b/packages/Datepicker/src/datepicker.scss @@ -7,53 +7,6 @@ @layer igloo { :root { // Calculation of the width of the datepicker to obtain a square cell - --ids-datepicker-cell-size: #{tokens.$space-6}; - --ids-datepicker-cell-number: 7; - --ids-datepicker-cell-border: .2rem; - --ids-datepicker-cell-empty-border: calc(6 * .05rem); - - /* Default */ - --ids-datepicker-font-family: #{tokens.$primary-font-family}; - --ids-datepicker-font-size: #{tokens.$font-size-4}; - --ids-datepicker-width: calc(var(--ids-datepicker-cell-number) * var(--ids-datepicker-cell-size) - var(--ids-datepicker-cell-border) - var(--ids-datepicker-cell-empty-border)); - --ids-datepicker-color-disabled: #{tokens.$grey-600}; - --ids-datepicker-table-width: 100%; - --ids-datepicker-table-margin: #{tokens.$space-3}; - --ids-datepicker-table-border: .1rem solid #{tokens.$grey-250}; - --ids-datepicker-table-border-radius: 0; - --ids-datepicker-thead-font-size: #{tokens.$font-size-3}; - --ids-datepicker-thead-font-weight: 400; - --ids-datepicker-thead-line-height: 1.25; - --ids-datepicker-thead-color: #{tokens.$electric-blue-500}; - --ids-datepicker-tbody-outline: 0 solid transparent; - --ids-datepicker-tbody-outline-offset: 0; - --ids-datepicker-tbody-radius: 0; - --ids-datepicker-content-today-outline: none; - --ids-datepicker-content-today-outline-offset: 0; - --ids-datepicker-thead-space: #{tokens.$space-2}; - --ids-datepicker-title-font-size: #{tokens.$font-size-5}; - --ids-datepicker-title-line-height: 1.333; - --ids-datepicker-content-color-today: #{tokens.$electric-blue-500}; - --ids-datepicker-content-background-hover: #{tokens.$electric-blue-600}; - --ids-datepicker-content-background-pressed: #{tokens.$electric-blue-600}; - --ids-datepicker-content-color: #{tokens.$black}; - --ids-datepicker-content-color-hover: #{tokens.$samoyed}; - --ids-datepicker-content-color-pressed: #{tokens.$samoyed}; - --ids-datepicker-content-background-selected: #{tokens.$electric-blue-500}; - --ids-datepicker-content-color-selected: #{tokens.$samoyed}; - --ids-datepicker-content-line-height: 3.8rem; - --ids-datepicker-margin-offset: -0.1rem; - --ids-datepicker-content-focus: #{tokens.$electric-blue-600} solid .15rem; - --ids-datepicker-content-focus-offset: 0; - - // Disabled state - --ids-datepicker-disabled-background-selected: #51a0fa; - --ids-datepicker-color-disabled-selected: #{tokens.$samoyed}; - --ids-datepicker-disabled-table-border: .1rem solid #eff1f5; - } - - [data-brand="workleap"] { - // Calculation of the width of the datepicker to obtain a square cell --ids-datepicker-cell-size: 2.5rem; --ids-datepicker-cell-number: 7; @@ -95,6 +48,14 @@ --ids-datepicker-disabled-background-selected: var(--hop-neutral-surface-disabled); --ids-datepicker-color-disabled-selected: var(--hop-neutral-text-disabled); --ids-datepicker-disabled-table-border: 0; + --ids-datepicker-margin-offset: -0.1rem; + --ids-datepicker-content-focus: #{tokens.$electric-blue-600} solid .15rem; + --ids-datepicker-content-focus-offset: 0; + + // Disabled state + --ids-datepicker-disabled-background-selected: #51a0fa; + --ids-datepicker-color-disabled-selected: #{tokens.$samoyed}; + --ids-datepicker-disabled-table-border: .1rem solid #eff1f5; } %active-date { diff --git a/packages/Dialog/src/dialog.scss b/packages/Dialog/src/dialog.scss index 5f2d6dd07..5ba63d715 100644 --- a/packages/Dialog/src/dialog.scss +++ b/packages/Dialog/src/dialog.scss @@ -6,32 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-dialog-font-family: #{tokens.$primary-font-family}; - --ids-dialog-font-size: #{tokens.$font-size-4}; - --ids-dialog-max-width: calc(100% - #{tokens.$space-5}); - --ids-dialog-radius: #{tokens.$border-radius-sm}; - --ids-dialog-header-height: auto; - --ids-dialog-header-font-size: #{tokens.$font-size-6}; - --ids-dialog-header-font-weight: #{tokens.$font-weight-medium}; - --ids-dialog-header-padding: #{tokens.$space-6} #{tokens.$space-3} #{tokens.$space-2}; - --ids-dialog-header-title-alignment: center; - --ids-dialog-content-padding: #{tokens.$space-2} #{tokens.$space-3} #{tokens.$space-3}; - --ids-dialog-sub-title-line-height: #{tokens.$line-height-xxxl}; - --ids-dialog-sub-title-color: #{tokens.$grey-600}; - --ids-dialog-sub-title-padding-top: 0; - --ids-dialog-close-spacing-horizontal: #{tokens.$space-2}; - --ids-dialog-close-spacing-vertical: #{tokens.$space-2}; - --ids-dialog-close-position: absolute; - --ids-dialog-close-padding-x-left: 0; - --ids-dialog-close-padding-x-right: 0; - --ids-dialog-buttons-margin: #{tokens.$space-5} -#{tokens.$space-0} -#{tokens.$space-2}; - --ids-dialog-button-margin: #{tokens.$space-2} #{tokens.$space-0}; - --ids-dialog-button-width: fit-content; - --ids-dialog-button-min-width: #{tokens.$space-10}; - } - - [data-brand="workleap"] { /* Default */ --ids-dialog-font-family: var(--hop-body-md-font-family); --ids-dialog-font-size: var(--hop-body-md-font-size); @@ -61,22 +35,6 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media (width >= #{tokens.$breakpoints-sm}) { :root { - --ids-dialog-header-padding: #{tokens.$space-4} #{tokens.$space-4} #{tokens.$space-2}; - --ids-dialog-header-title-alignment: center; - --ids-dialog-close-spacing-horizontal: #{tokens.$space-3}; - --ids-dialog-close-spacing-vertical: #{tokens.$space-3}; - --ids-dialog-close-position: absolute; - --ids-dialog-close-padding-x-left: #{tokens.$space-5}; - --ids-dialog-close-padding-x-right: #{tokens.$space-5}; - --ids-dialog-content-padding: #{tokens.$space-0} #{tokens.$space-4} #{tokens.$space-4}; - --ids-dialog-buttons-margin: var(--hop-space-stack-lg) -#{tokens.$space-2} #{tokens.$space-0}; - --ids-dialog-button-margin: 0 #{tokens.$space-2}; - --ids-dialog-header-font-size: #{tokens.$font-size-6}; - --ids-dialog-header-line-height: var(--hop-heading-lg-line-height); - --ids-dialog-header-font-weight: #{tokens.$font-weight-medium}; - } - - [data-brand="workleap"] { --ids-dialog-header-padding: var(--hop-space-inset-lg) var(--hop-space-inset-lg) 0; --ids-dialog-header-title-alignment: left; --ids-dialog-close-spacing-horizontal: calc(var(--hop-space-inline-xs) + var(--hop-space-inline-md)); diff --git a/packages/Disclosure/src/disclosure.scss b/packages/Disclosure/src/disclosure.scss index 40a3bde2f..62c4160e7 100644 --- a/packages/Disclosure/src/disclosure.scss +++ b/packages/Disclosure/src/disclosure.scss @@ -6,54 +6,6 @@ @layer igloo { :root { - /* === Default === */ - --ids-disclosure-border-radius: #{tokens.$border-radius-sm}; - --ids-disclosure-border-width: 0; - --ids-disclosure-border-color: transparent; - --ids-disclosure-border-color-hover: transparent; - --ids-disclosure-border-color-pressed: transparent; - --ids-disclosure-border-width-focus: 0.1rem; - --ids-disclosure-border-color-focus: #{tokens.$electric-blue-600}; - --ids-disclosure-color: #{tokens.$grey-800}; - --ids-disclosure-font-family: #{tokens.$primary-font-family}; - --ids-disclosure-font-size: #{tokens.$font-size-3}; - --ids-disclosure-shadow: #{tokens.$shadow-6}; - - /* Header/Button */ - --ids-disclosure-header-background: #{tokens.$samoyed}; - --ids-disclosure-header-background-hover: #{tokens.$samoyed}; - --ids-disclosure-header-background-pressed: #{tokens.$samoyed}; - --ids-disclosure-header-line-height: #{tokens.$line-height-xxl}; - --ids-disclosure-header-padding: #{tokens.$space-4}; - --ids-disclosure-header-icon-margin: 0 #{tokens.$space-4} 0 0; - --ids-disclosure-header-title-font-family: #{tokens.$secondary-font-family}; - --ids-disclosure-header-title-font-size: #{tokens.$font-size-6}; - --ids-disclosure-header-title-font-weight: #{tokens.$font-weight-medium}; - --ids-disclosure-header-title-line-height: #{tokens.$line-height-lg}; - --ids-disclosure-header-desc-color: #{tokens.$grey-600}; - --ids-disclosure-header-content-margin: calc(-#{tokens.$space-1} / 2) -#{tokens.$space-2}; - --ids-disclosure-header-content-padding: calc(#{tokens.$space-1} / 2) #{tokens.$space-2}; - --ids-disclosure-header-chevron-color: #{tokens.$grey-600}; - --ids-disclosure-header-chevron-margin: 0 0 0 #{tokens.$space-2}; - - /* Content */ - --ids-disclosure-content-border: .1rem solid #{tokens.$grey-200}; - - /* === Low Contrast === */ - - /* Header/Button */ - --ids-disclosure-low-contrast-header-padding: -.6rem 0; - --ids-disclosure-low-contrast-header-icon-margin: 0 #{tokens.$space-1} 0 0; - --ids-disclosure-low-contrast-header-color: #{tokens.$grey-600}; - --ids-disclosure-low-contrast-header-color-hover: #{tokens.$grey-600}; - --ids-disclosure-low-contrast-header-color-pressed: #{tokens.$grey-600}; - --ids-disclosure-low-contrast-header-title-font-family: #{tokens.$primary-font-family}; - --ids-disclosure-low-contrast-header-title-font-size: #{tokens.$font-size-3}; - --ids-disclosure-low-contrast-header-title-font-weight: #{tokens.$font-weight-medium}; - --ids-disclosure-low-contrast-header-title-line-height: #{tokens.$line-height-xxl}; - } - - [data-brand="workleap"] { /* === Default === */ --ids-disclosure-border-radius: var(--hop-shape-rounded-md); --ids-disclosure-border-width: 0.0625rem; diff --git a/packages/Dropdown/src/dropdown.scss b/packages/Dropdown/src/dropdown.scss index 4af35aa0b..44e01a998 100644 --- a/packages/Dropdown/src/dropdown.scss +++ b/packages/Dropdown/src/dropdown.scss @@ -7,32 +7,6 @@ @layer igloo { :root { - /* Default */ - --ids-dropdown-font-family: #{tokens.$primary-font-family}; - --ids-dropdown-font-size: #{tokens.$font-size-4}; - --ids-dropdown-color: #{tokens.$grey-800}; - --ids-dropdown-background: #{tokens.$samoyed}; - --ids-dropdown-border: none; - --ids-dropdown-border-radius: #{tokens.$border-radius-sm}; - --ids-dropdown-zindex: #{tokens.$z-index-100}; - --ids-dropdown-box-shadow: #{tokens.$shadow-12}; - --ids-dropdown-padding: 0; - --ids-dropdown-padding-small: #{tokens.$space-3}; - --ids-dropdown-padding-medium: #{tokens.$space-4}; - --ids-dropdown-padding-large: #{tokens.$space-5}; - - /* Click Handler */ - --ids-dropdown-zindex-click-handler: #{tokens.$z-index-90}; - - /* Footer */ - --ids-dropdown-footer-background: #{tokens.$samoyed}; - --ids-dropdown-footer-background-hover: #{tokens.$samoyed}; - --ids-dropdown-footer-padding: #{tokens.$space-2} #{tokens.$space-3}; - --hop-dropdown-footer-border-size: 0; - --hop-dropdown-footer-border-color: transparent; - } - - [data-brand="workleap"] { /* Default */ --ids-dropdown-font-family: var(--hop-body-sm-font-family); --ids-dropdown-font-size: var(--hop-body-sm-font-size); diff --git a/packages/Dropdown/src/mixins.scss b/packages/Dropdown/src/mixins.scss index cbd36e13e..3ffcd7706 100644 --- a/packages/Dropdown/src/mixins.scss +++ b/packages/Dropdown/src/mixins.scss @@ -1,14 +1,6 @@ @use '~@igloo-ui/tokens/dist/base10/variables' as tokens; :root { - --ids-scrollbar-color: #{tokens.$grey-300}; - --ids-scrollbar-border-color: #{tokens.$samoyed}; - --ids-scrollbar-border-size: 1rem; - --ids-scrollbar-size: 0.2rem; - --ids-scrollbar-radii: #{tokens.$border-radius-md}; -} - -[data-brand="workleap"] { --ids-scrollbar-color: var(--hop-neutral-border-weak); --ids-scrollbar-border-color: var(--hop-neutral-surface); --ids-scrollbar-border-size: 0.625rem; From 674f4f7d4a779a07e7942a83c23081a7a809f4dc Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:18:16 -0400 Subject: [PATCH 2/9] Add changeset --- .changeset/mighty-years-smile.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 .changeset/mighty-years-smile.md diff --git a/.changeset/mighty-years-smile.md b/.changeset/mighty-years-smile.md new file mode 100644 index 000000000..38ea3a6da --- /dev/null +++ b/.changeset/mighty-years-smile.md @@ -0,0 +1,24 @@ +--- +"@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 Workleap rebrand + +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. From bbdc62525b75e33701af04e2e5a44ae109fea749 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:28:58 -0400 Subject: [PATCH 3/9] Fix description --- .changeset/mighty-years-smile.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/mighty-years-smile.md b/.changeset/mighty-years-smile.md index 38ea3a6da..4cd9fbe00 100644 --- a/.changeset/mighty-years-smile.md +++ b/.changeset/mighty-years-smile.md @@ -19,6 +19,5 @@ "@igloo-ui/dialog": minor --- -## Clean up Workleap rebrand - +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. From 8ff1b13c3242dbcb8e166003348628118b8cc612 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:31:16 -0400 Subject: [PATCH 4/9] Fix bad replacement in datepicker.scss --- packages/Datepicker/src/datepicker.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/Datepicker/src/datepicker.scss b/packages/Datepicker/src/datepicker.scss index 99e533e50..479bb947d 100644 --- a/packages/Datepicker/src/datepicker.scss +++ b/packages/Datepicker/src/datepicker.scss @@ -48,14 +48,6 @@ --ids-datepicker-disabled-background-selected: var(--hop-neutral-surface-disabled); --ids-datepicker-color-disabled-selected: var(--hop-neutral-text-disabled); --ids-datepicker-disabled-table-border: 0; - --ids-datepicker-margin-offset: -0.1rem; - --ids-datepicker-content-focus: #{tokens.$electric-blue-600} solid .15rem; - --ids-datepicker-content-focus-offset: 0; - - // Disabled state - --ids-datepicker-disabled-background-selected: #51a0fa; - --ids-datepicker-color-disabled-selected: #{tokens.$samoyed}; - --ids-datepicker-disabled-table-border: .1rem solid #eff1f5; } %active-date { From cc533a6b8dd3bcafed784e6b3a684e5473933035 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:53:07 -0400 Subject: [PATCH 5/9] Update tests and snapshots --- .../src/__snapshots__/Alert.test.tsx.snap | 33 ++++++++----------- packages/ColorPicker/src/ColorPicker.test.tsx | 16 ++++----- .../__snapshots__/ColorPicker.test.tsx.snap | 8 ++--- .../src/__snapshots__/Combobox.test.tsx.snap | 11 +++---- 4 files changed, 31 insertions(+), 37 deletions(-) diff --git a/packages/Alert/src/__snapshots__/Alert.test.tsx.snap b/packages/Alert/src/__snapshots__/Alert.test.tsx.snap index 6483b28f6..73b743c26 100644 --- a/packages/Alert/src/__snapshots__/Alert.test.tsx.snap +++ b/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" > - diff --git a/packages/ColorPicker/src/ColorPicker.test.tsx b/packages/ColorPicker/src/ColorPicker.test.tsx index 04a681fb0..e56ec0615 100644 --- a/packages/ColorPicker/src/ColorPicker.test.tsx +++ b/packages/ColorPicker/src/ColorPicker.test.tsx @@ -1,12 +1,12 @@ /** * @jest-environment jsdom */ -import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; -import userEvent from '@testing-library/user-event' import MockDropdown from '@igloo-ui/dropdown/src/__mocks__/Dropdown.mock'; +import { fireEvent, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; -import ColorPicker, { ColorName, ColorPickerProps, colorNamesIgloo } from './ColorPicker'; +import ColorPicker, { ColorName, ColorPickerProps, colorNames } from './ColorPicker'; jest.mock('@igloo-ui/dropdown', () => ({ __esModule: true, @@ -37,11 +37,11 @@ describe('ColorPicker', () => { const button = screen.getByRole('button'); fireEvent.click(button); const options = screen.getAllByRole('option'); - expect(options.length).toBe(colorNamesIgloo.length); + expect(options.length).toBe(colorNames.length); }); test('It should call the onSelect callback and update the selected item when a color is selected', async () => { - let selectedColor = 'dandelion200' as ColorName; + let selectedColor = 'decorativeOption3' as ColorName; const onSelect = jest.fn((color: ColorName) => { selectedColor = color; }); @@ -51,9 +51,9 @@ describe('ColorPicker', () => { const option = screen.getAllByRole('option')[2]; await userEvent.click(option); - expect(onSelect).toHaveBeenCalledWith("creamsicle150"); + expect(onSelect).toHaveBeenCalledWith("decorativeOption1"); rerender(); - expect(button).toHaveAttribute("data-color", "creamsicle150"); + expect(button).toHaveAttribute("data-color", "decorativeOption1"); }); test('It should not show the color picker options when disabled', () => { diff --git a/packages/ColorPicker/src/__snapshots__/ColorPicker.test.tsx.snap b/packages/ColorPicker/src/__snapshots__/ColorPicker.test.tsx.snap index 2dd6651be..3978f923d 100644 --- a/packages/ColorPicker/src/__snapshots__/ColorPicker.test.tsx.snap +++ b/packages/ColorPicker/src/__snapshots__/ColorPicker.test.tsx.snap @@ -8,17 +8,17 @@ exports[`ColorPicker It should render a snapshot 1`] = ` > diff --git a/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap b/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap index 1e0cd8732..6ad7d0a06 100644 --- a/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap +++ b/packages/Combobox/src/__snapshots__/Combobox.test.tsx.snap @@ -27,17 +27,16 @@ exports[`Combobox It should render a snapshot 1`] = ` class="ids-combobox-input__actions" > From c9291afdfb506dc7515577d523bd23e1f29003a2 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 15:28:20 -0400 Subject: [PATCH 6/9] Fix whitespace Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/Combobox/src/ComboboxInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/Combobox/src/ComboboxInput.tsx b/packages/Combobox/src/ComboboxInput.tsx index 60ebc82b5..5519f96ee 100644 --- a/packages/Combobox/src/ComboboxInput.tsx +++ b/packages/Combobox/src/ComboboxInput.tsx @@ -65,7 +65,7 @@ const ComboboxInput: React.FunctionComponent = ({ }: ComboboxInputProps) => { const chevronClass = "ids-combobox-input__chevron"; const chevronUpIcon = - const chevronDownIcon = + const chevronDownIcon = const handleChange = ({ target From baf1480ca1f66dafbbd04c6cefe52a37cd16f190 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Mon, 21 Jul 2025 11:10:52 -0400 Subject: [PATCH 7/9] Set workleap brand on cleaned up component stories --- packages/ActionMenu/src/ActionMenu.stories.tsx | 13 +++++++------ packages/Alert/src/Alert.stories.tsx | 17 +++++++++-------- packages/AreaChart/src/AreaChart.stories.tsx | 3 ++- packages/Avatar/src/Avatar.stories.tsx | 5 +++-- packages/BarChart/src/BarChart.stories.tsx | 3 ++- packages/Breadcrumb/src/Breadcrumb.stories.tsx | 7 ++++--- packages/Button/src/Button.stories.tsx | 3 ++- .../ButtonGroup/src/ButtonGroup.stories.tsx | 9 +++++---- packages/Card/src/Card.stories.tsx | 5 +++-- packages/Carousel/src/Carousel.stories.tsx | 3 ++- packages/Checkbox/src/Checkbox.stories.tsx | 3 ++- packages/Color/src/Color.stories.tsx | 5 +++-- .../ColorPicker/src/ColorPicker.stories.tsx | 3 ++- packages/Combobox/src/Combobox.stories.tsx | 9 +++++---- packages/Datepicker/src/Datepicker.stories.tsx | 7 ++++--- packages/Dialog/src/Dialog.stories.tsx | 7 ++++--- packages/Disclosure/src/Disclosure.stories.tsx | 6 ++---- packages/Dropdown/src/Dropdown.stories.tsx | 5 +++-- 18 files changed, 64 insertions(+), 49 deletions(-) diff --git a/packages/ActionMenu/src/ActionMenu.stories.tsx b/packages/ActionMenu/src/ActionMenu.stories.tsx index 05d5ba047..49702cd06 100644 --- a/packages/ActionMenu/src/ActionMenu.stories.tsx +++ b/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(//g, '').replace(//g, '').replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, argTypes: { closeOnSelect: { @@ -145,7 +146,7 @@ export const WithinContainer = { }} /> -
/g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, argTypes: { message: { @@ -114,7 +115,7 @@ export const WithButton = () => ( export const WithLink = () => (
Tell me more }} type="info" @@ -123,7 +124,7 @@ export const WithLink = () => ( message={mockContent.message} /> Tell me more }} type="info" @@ -132,7 +133,7 @@ export const WithLink = () => ( message={mockContent.message} /> Tell me more }} type="info" diff --git a/packages/AreaChart/src/AreaChart.stories.tsx b/packages/AreaChart/src/AreaChart.stories.tsx index 772d214d0..536d6928e 100644 --- a/packages/AreaChart/src/AreaChart.stories.tsx +++ b/packages/AreaChart/src/AreaChart.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {Meta, StoryObj} from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import Section from '@components/section'; import readme from '../README.md'; @@ -17,6 +17,7 @@ export default { }, }, chromatic: {delay: 1000}, + brand: "workleap" }, argTypes: { locale: { diff --git a/packages/Avatar/src/Avatar.stories.tsx b/packages/Avatar/src/Avatar.stories.tsx index 9aaff37d1..2de2f0597 100644 --- a/packages/Avatar/src/Avatar.stories.tsx +++ b/packages/Avatar/src/Avatar.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Meta, StoryFn } from '@storybook/react'; +import { Meta } from '@storybook/react'; import Section from '@components/section'; import readme from '../README.md'; @@ -15,7 +15,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, args: { size: 'medium', diff --git a/packages/BarChart/src/BarChart.stories.tsx b/packages/BarChart/src/BarChart.stories.tsx index 5e7dad61c..3e24a2eac 100644 --- a/packages/BarChart/src/BarChart.stories.tsx +++ b/packages/BarChart/src/BarChart.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { Meta, StoryObj } from '@storybook/react'; import tokens from '@igloo-ui/tokens/dist/base10/tokens.json'; +import { Meta, StoryObj } from '@storybook/react'; import readme from '../README.md'; @@ -17,6 +17,7 @@ export default { } }, chromatic: { delay: 600 }, + brand: "workleap" }, } as Meta; diff --git a/packages/Breadcrumb/src/Breadcrumb.stories.tsx b/packages/Breadcrumb/src/Breadcrumb.stories.tsx index 15ce9721b..f8f556a4b 100644 --- a/packages/Breadcrumb/src/Breadcrumb.stories.tsx +++ b/packages/Breadcrumb/src/Breadcrumb.stories.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Meta, StoryFn } from '@storybook/react'; +import { Meta } from '@storybook/react'; -import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom'; +import { BrowserRouter, NavLink } from 'react-router-dom'; import Section from '@components/section'; import readme from '../README.md'; @@ -17,7 +17,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, } as Meta; diff --git a/packages/Button/src/Button.stories.tsx b/packages/Button/src/Button.stories.tsx index 82b286de2..10714571a 100644 --- a/packages/Button/src/Button.stories.tsx +++ b/packages/Button/src/Button.stories.tsx @@ -19,6 +19,7 @@ const meta: Meta = { component: readme.replace(//g, '').replace(//g, ''), }, }, + brand: "workleap" }, argTypes: { children: { description: 'The content to display inside the button' }, @@ -252,7 +253,7 @@ export const States = () => ( Premium
- +
), - }, - parameters: { - brand: "workleap" } }; diff --git a/packages/Dropdown/src/Dropdown.stories.tsx b/packages/Dropdown/src/Dropdown.stories.tsx index e58c886e8..43323a76f 100644 --- a/packages/Dropdown/src/Dropdown.stories.tsx +++ b/packages/Dropdown/src/Dropdown.stories.tsx @@ -1,7 +1,7 @@ -import React from 'react'; import Button from '@igloo-ui/button'; import Modal from '@igloo-ui/modal'; import { Meta, StoryFn } from '@storybook/react'; +import React from 'react'; import readme from '../README.md'; @@ -15,7 +15,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, argTypes: { children: { From e126e7c8d8a5c291533617f46164a1d1f9cd3fd0 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Mon, 21 Jul 2025 11:30:24 -0400 Subject: [PATCH 8/9] Clean up references to brand --- packages/BarChart/src/BarChart.stories.tsx | 41 ++----------------- packages/Color/src/Color.stories.tsx | 39 ++++++------------ .../ColorPicker/src/ColorPicker.stories.tsx | 10 +---- 3 files changed, 17 insertions(+), 73 deletions(-) diff --git a/packages/BarChart/src/BarChart.stories.tsx b/packages/BarChart/src/BarChart.stories.tsx index 3e24a2eac..19a0b6477 100644 --- a/packages/BarChart/src/BarChart.stories.tsx +++ b/packages/BarChart/src/BarChart.stories.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import tokens from '@igloo-ui/tokens/dist/base10/tokens.json'; import { Meta, StoryObj } from '@storybook/react'; import readme from '../README.md'; @@ -24,33 +23,6 @@ export default { type Story = StoryObj; const mockData = [ - { - id: '1', - label: 'Good vibes', - value: 48, - color: tokens.dandelion400, - }, - { - id: '2', - label: 'Excellence', - value: 46, - color: tokens.electricBlue500, - }, - { - id: '3', - label: 'Radical candor', - value: 24, - color: tokens.strawberryFields200, - }, - { - id: '4', - label: 'Custom cards by members', - value: 0, - color: tokens.sky100, - }, -]; - -const mockDataWL = [ { id: '1', label: 'Good vibes', @@ -77,18 +49,11 @@ const mockDataWL = [ }, ]; -const getMockData = (brand: string) => { - const data = brand === 'workleap' ? mockDataWL : mockData; - return data; -} - export const Overview: Story = { - render: (args, { globals: { brand } }) => { - return ( + render: (args) => ( - ); - }, + ), }; diff --git a/packages/Color/src/Color.stories.tsx b/packages/Color/src/Color.stories.tsx index b1d7dac29..d794525ed 100644 --- a/packages/Color/src/Color.stories.tsx +++ b/packages/Color/src/Color.stories.tsx @@ -3,20 +3,10 @@ import React from 'react'; import { Meta, StoryObj } from '@storybook/react'; import Section from '@components/section'; -import variables from '@igloo-ui/tokens/dist/base10/tokens.json'; import readme from '../README.md'; import Color from './Color'; -const iglooColors = [ - variables.coral800, - variables.electricBlue700, - variables.sky100, - variables.coral200, - variables.samoyed, - variables.coral900 -] - const workleapColors = [ "var(--hop-decorative-option2-surface)", "var(--hop-decorative-option4-surface)", @@ -26,11 +16,6 @@ const workleapColors = [ "var(--hop-decorative-option8-text)" ] -const getColors = (brand: string) => { - const colors = brand === 'workleap' ? workleapColors : iglooColors; - return colors; -} - export default { title: 'Components/Color', component: Color, @@ -52,10 +37,10 @@ export default { type Story = StoryObj; export const Overview: Story = { - render: (args, { globals: { brand } }) => { + render: (args) => { return (
- +
); }, @@ -65,25 +50,25 @@ export const Overview: Story = { }; export const Sizes: Story = { - render: (_args, { globals: { brand } }) => { + render: () => { return (
- - - - + + + +
); } }; export const Initials: Story = { - render: (_args, { globals: { brand } }) => { + render: () => { return (
@@ -93,10 +78,10 @@ export const Initials: Story = { }; export const CustomText: Story = { - render: (_args, { globals: { brand } }) => { + render: () => { return (
- +
); } diff --git a/packages/ColorPicker/src/ColorPicker.stories.tsx b/packages/ColorPicker/src/ColorPicker.stories.tsx index 0231706f2..1d308b519 100644 --- a/packages/ColorPicker/src/ColorPicker.stories.tsx +++ b/packages/ColorPicker/src/ColorPicker.stories.tsx @@ -23,14 +23,8 @@ export default { type Story = StoryObj; export const Overview: Story = { - render: (args, {globals: {brand}}) => { - const defaultColor = brand === "workleap" ? "decorativeOption3" : "dandelion200"; - const [selectedColor, setSelectedColor] = React.useState(defaultColor); - - React.useEffect(() => { - // update the selected color if the theme changes - setSelectedColor(defaultColor); - }, [defaultColor]) + render: (args) => { + const [selectedColor, setSelectedColor] = React.useState("decorativeOption3"); return (
From ad74ec4e18f40d98dc315d97061fcaa4309ff98c Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Mon, 21 Jul 2025 11:41:18 -0400 Subject: [PATCH 9/9] Apply rebrand to shared visual identifier component --- .../src/visual-identifier/VisualIdentifier.stories.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/shared/components/src/visual-identifier/VisualIdentifier.stories.tsx b/shared/components/src/visual-identifier/VisualIdentifier.stories.tsx index 54873b1aa..394dcb3de 100644 --- a/shared/components/src/visual-identifier/VisualIdentifier.stories.tsx +++ b/shared/components/src/visual-identifier/VisualIdentifier.stories.tsx @@ -13,6 +13,9 @@ export default { control: { type: null }, }, }, + parameters: { + brand: "workleap", + } } as Meta; export const Overview = {