From da06ffce7aa17110f949998490556c4bdd4aacae Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:45:33 -0400 Subject: [PATCH 1/7] Clean up rebrand logic and styles from components E-P --- packages/Filter/src/filter.scss | 44 +--------- packages/FormGroup/src/form-group.scss | 14 ---- packages/HelperText/src/helper-text.scss | 13 --- packages/Hyperlink/src/hyperlink.scss | 29 ------- packages/IconButton/src/icon-button.scss | 66 +++++---------- packages/Input/src/input.scss | 63 --------------- packages/List/src/ListItem.tsx | 18 +---- packages/List/src/list-item.scss | 84 -------------------- packages/List/src/list.scss | 13 +-- packages/Metric/src/Metric.tsx | 14 +--- packages/Metric/src/Score.tsx | 26 ++---- packages/Metric/src/metric.scss | 76 ------------------ packages/Metric/src/score.scss | 26 ------ packages/Modal/src/modal.scss | 76 ------------------ packages/OptionButton/src/OptionButton.tsx | 44 +++------- packages/OptionButton/src/option-button.scss | 55 ------------- packages/Pager/src/Pager.tsx | 27 ++----- packages/Pager/src/pager.scss | 58 -------------- packages/PieChart/src/pie-chart.scss | 24 ------ packages/Popover/src/Popover.tsx | 6 +- packages/Popover/src/popover.scss | 26 +----- packages/ProgressBar/src/progress-bar.scss | 15 +--- 22 files changed, 57 insertions(+), 760 deletions(-) diff --git a/packages/Filter/src/filter.scss b/packages/Filter/src/filter.scss index a50231c2b..860fc6322 100644 --- a/packages/Filter/src/filter.scss +++ b/packages/Filter/src/filter.scss @@ -6,49 +6,7 @@ @layer igloo { :root { - /* Default */ - --ids-filter-background: #{tokens.$grey-200}; - --ids-filter-border-color: transparent; - --ids-filter-border-radius: calc(#{tokens.$border-radius-md} * 4); - --ids-filter-color: #{tokens.$grey-600}; - --ids-filter-font-family: #{tokens.$primary-font-family}; - --ids-filter-font-size: #{tokens.$font-size-3}; - --ids-filter-line-height: #{tokens.$line-height-xxl}; - --ids-filter-padding: #{tokens.$space-2} #{tokens.$space-3}; - - /* Hover */ - --ids-filter-background-hover: #{tokens.$grey-300}; - --ids-filter-border-color-hover: transparent; - --ids-filter-color-hover: #{tokens.$grey-600}; - - /* Pressed */ - --ids-filter-background-pressed: #{tokens.$grey-300}; - --ids-filter-border-color-pressed: transparent; - --ids-filter-color-pressed: #{tokens.$grey-600}; - - /* Selected */ - --ids-filter-background-selected: #{tokens.$grey-500}; - --ids-filter-border-color-selected: transparent; - --ids-filter-color-selected: #{tokens.$samoyed}; - - /* Selected Hover */ - --ids-filter-background-selected-hover: #{tokens.$grey-800}; - --ids-filter-border-color-selected-hover: #{tokens.$grey-800}; - - /* Disabled */ - --ids-filter-background-disabled: #{tokens.$grey-200}; - --ids-filter-border-color-disabled: transparent; - --ids-filter-color-disabled: #{tokens.$grey-400}; - - /* Focus */ - - /* Needed to add a 0.1px blur to fix a bug where - chrome would have a lingering blue line when focusing in and out */ - --ids-filter-focus: 0 0 0 .2rem #ffffff, 0 0 .01rem .35rem #0c46d0; - } - - [data-brand="workleap"] { - /* Default */ + /* Default */ --ids-filter-background: var(--hop-neutral-surface-weak); --ids-filter-border-color: var(--hop-neutral-border); --ids-filter-border-radius: var(--hop-shape-pill); diff --git a/packages/FormGroup/src/form-group.scss b/packages/FormGroup/src/form-group.scss index e34ddf296..9a1758748 100644 --- a/packages/FormGroup/src/form-group.scss +++ b/packages/FormGroup/src/form-group.scss @@ -3,20 +3,6 @@ @layer igloo { :root { - /* Default */ - --ids-form-group-font-family: #{tokens.$primary-font-family}; - --ids-form-group-font-size: #{tokens.$font-size-3}; - --ids-form-group-line-height: #{tokens.$line-height-xxl}; - - /* Label */ - --ids-form-group-label-color: #{tokens.$grey-600}; - --ids-form-group-label-margin-bottom: #{tokens.$space-1}; - - /* Message */ - --ids-form-group-message-margin-top: #{tokens.$space-1}; - } - - [data-brand="workleap"] { /* Default */ --ids-form-group-font-family: var(--hop-heading-xs-font-family); --ids-form-group-font-size: var(--hop-heading-xs-font-size); diff --git a/packages/HelperText/src/helper-text.scss b/packages/HelperText/src/helper-text.scss index a5ac74433..57a36f8c0 100644 --- a/packages/HelperText/src/helper-text.scss +++ b/packages/HelperText/src/helper-text.scss @@ -6,19 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-helper-font-family: #{tokens.$primary-font-family}; - --ids-helper-font-size: #{tokens.$font-size-3}; - --ids-helper-font-weight: #{tokens.$font-weight-regular}; - --ids-helper-line-height: #{tokens.$line-height-xxl}; - --ids-helper-text: #{tokens.$grey-600}; - --ids-helper-text-icon-margin: .1rem #{tokens.$space-1} 0 0; - - /* Error */ - --ids-helper-text-error: #{tokens.$coral-500}; - } - - [data-brand="workleap"] { --ids-helper-font-family: var(--hop-body-xs-font-family); --ids-helper-font-size: var(--hop-body-xs-font-size); --ids-helper-font-weight: var(--hop-body-xs-font-weight); diff --git a/packages/Hyperlink/src/hyperlink.scss b/packages/Hyperlink/src/hyperlink.scss index be0c76f8e..02cb6c339 100644 --- a/packages/Hyperlink/src/hyperlink.scss +++ b/packages/Hyperlink/src/hyperlink.scss @@ -6,35 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-link-font-family: #{tokens.$primary-font-family}; - --ids-link-font-size: #{tokens.$font-size-4}; - --ids-link-font-size-small: #{tokens.$font-size-3}; - --ids-link-font-size-xsmall: #{tokens.$font-size-2}; - --ids-link-font-weight: #{tokens.$font-weight-medium}; - --ids-link-icon-color: currentcolor; - --ids-link-icon-margin: #{tokens.$space-1}; - --ids-link-icon-padding-top: 0.2rem; - --ids-link-focus: #{tokens.$focus}; - --ids-link-border-radius: #{tokens.$border-radius-sm}; - - /* Primary */ - --ids-link-text-primary: #{tokens.$electric-blue-500}; - --ids-link-text-primary-hover: #{tokens.$electric-blue-600}; - --ids-link-text-primary-pressed: #{tokens.$electric-blue-600}; - - /* Secondary */ - --ids-link-text-secondary: #{tokens.$grey-600}; - --ids-link-text-secondary-hover: #{tokens.$grey-700}; - --ids-link-text-secondary-pressed: #{tokens.$grey-700}; - - /* Danger */ - --ids-link-text-danger: #{tokens.$coral-500}; - --ids-link-text-danger-hover: #{tokens.$coral-600}; - --ids-link-text-danger-pressed: #{tokens.$coral-600}; - } - - [data-brand="workleap"] { /* Default */ --ids-link-font-family: var(--hop-body-sm-medium-font-family); --ids-link-font-size: var(--hop-body-md-medium-font-size); diff --git a/packages/IconButton/src/icon-button.scss b/packages/IconButton/src/icon-button.scss index 48b0fab83..bbff1b645 100644 --- a/packages/IconButton/src/icon-button.scss +++ b/packages/IconButton/src/icon-button.scss @@ -6,51 +6,27 @@ @layer igloo { :root { - /* Default */ - --ids-icon-btn-height: #{tokens.$space-5}; - --ids-icon-btn-width: #{tokens.$space-5}; - - /* XSmall */ - --ids-icon-btn-height-xsmall: #{tokens.$space-3}; - --ids-icon-btn-width-xsmall: #{tokens.$space-3}; - - /* Small */ - --ids-icon-btn-height-small: #{tokens.$space-4}; - --ids-icon-btn-width-small: #{tokens.$space-4}; - - /* Large */ - --ids-icon-btn-height-large: #{tokens.$space-6}; - --ids-icon-btn-width-large: #{tokens.$space-6}; - - /* Color */ - --ids-btn-icon-text-ghost-secondary: #{tokens.$grey-600}; - --ids-btn-icon-text-ghost-secondary-hover: #{tokens.$grey-800}; - --ids-btn-icon-text-ghost-secondary-active: #{tokens.$electric-blue-500}; - --ids-btn-icon-text-ghost-secondary-disabled: #{tokens.$grey-400}; - } - - [data-brand="workleap"] { - /* Default */ - --ids-icon-btn-height: 2rem; - --ids-icon-btn-width: 2rem; - - /* XSmall */ - --ids-icon-btn-height-xsmall: 1rem; - --ids-icon-btn-width-xsmall: 1rem; - - /* Small */ - --ids-icon-btn-height-small: 1.5rem; - --ids-icon-btn-width-small: 1.5rem; - - /* Large */ - --ids-icon-btn-height-large: 2.5rem; - --ids-icon-btn-width-large: 2.5rem; - - /* Color */ - --ids-btn-icon-text-ghost-secondary: var(--hop-neutral-icon-weak); - --ids-btn-icon-text-ghost-secondary-hover: var(--hop-neutral-icon-weak-hover); - --ids-btn-icon-text-ghost-secondary-active: var(--hop-neutral-icon); - --ids-btn-icon-text-ghost-secondary-disabled: var(--hop-neutral-icon-disabled); + /* Default */ + --ids-icon-btn-height: 2rem; + --ids-icon-btn-width: 2rem; + + /* XSmall */ + --ids-icon-btn-height-xsmall: 1rem; + --ids-icon-btn-width-xsmall: 1rem; + + /* Small */ + --ids-icon-btn-height-small: 1.5rem; + --ids-icon-btn-width-small: 1.5rem; + + /* Large */ + --ids-icon-btn-height-large: 2.5rem; + --ids-icon-btn-width-large: 2.5rem; + + /* Color */ + --ids-btn-icon-text-ghost-secondary: var(--hop-neutral-icon-weak); + --ids-btn-icon-text-ghost-secondary-hover: var(--hop-neutral-icon-weak-hover); + --ids-btn-icon-text-ghost-secondary-active: var(--hop-neutral-icon); + --ids-btn-icon-text-ghost-secondary-disabled: var(--hop-neutral-icon-disabled); } .ids-icon-btn { diff --git a/packages/Input/src/input.scss b/packages/Input/src/input.scss index 6071f2904..b27cd9e3d 100644 --- a/packages/Input/src/input.scss +++ b/packages/Input/src/input.scss @@ -6,69 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-input-height: #{tokens.$space-6}; - --ids-input-font-family: #{tokens.$primary-font-family}; - --ids-input-font-weight: #{tokens.$font-weight-regular}; - --ids-input-padding: #{tokens.$space-3}; - --ids-input-font-size: #{tokens.$font-size-4}; - --ids-input-line-height: #{tokens.$space-4}; - --ids-input-border-radius: #{tokens.$border-radius-sm}; - --ids-input-border-color: #{tokens.$grey-300}; - --ids-input-border-size: .1rem; - --ids-input-background: #{tokens.$samoyed}; - --ids-input-margin: #{tokens.$space-0}; - - /* Compact */ - --ids-input-height-compact: #{tokens.$space-5}; - --ids-input-font-size-compact: #{tokens.$font-size-3}; - --ids-input-line-height-compact: #{tokens.$line-height-xxl}; - --ids-input-letter-spacing-compact: #{tokens.$font-weight-regular}; - - /* with icon */ - --ids-input-color-icon: #{tokens.$grey-500}; - - /* with prefix icon */ - --ids-input-width-prefix: #{tokens.$space-7}; - --ids-input-width-prefix-compact: #{tokens.$space-6}; - --ids-input-padding-prefix: #{tokens.$space-2} #{tokens.$space-2} #{tokens.$space-2} #{tokens.$space-3}; - - /* with suffix icon */ - --ids-input-width-suffix: #{tokens.$space-7}; - --ids-input-width-suffix-compact: #{tokens.$space-6}; - --ids-input-padding-suffix: #{tokens.$space-2} #{tokens.$space-3} #{tokens.$space-2} #{tokens.$space-2}; - - /* With character indicator */ - --ids-input-padding-character-indicator: #{tokens.$space-1} #{tokens.$space-3} #{tokens.$space-1} #{tokens.$space-2}; - --ids-input-width-character-indicator: #{tokens.$space-6}; - --ids-input-font-size-character-indicator: #{tokens.$font-size-2}; - --ids-input-min-width-character-indicator: #{tokens.$space-4}; - --ids-input-width-character-indicator-suffix: #{tokens.$space-9}; - --ids-input-width-character-indicator-suffix-compact: #{tokens.$space-8}; - --ids-input-character-indicator-color: #{tokens.$grey-400}; - - /* Placeholder */ - --ids-input-color-placeholder: #{tokens.$grey-400}; - - /* Hover */ - --ids-input-border-color-hover: #{tokens.$grey-600}; - - /* Focus */ - --ids-input-border-color-focus: #{tokens.$electric-blue-500}; - - /* Active */ - --ids-input-border-color-active: #{tokens.$electric-blue-500}; - - /* disabled */ - --ids-input-color-disabled: #{tokens.$grey-500}; - --ids-input-background-disabled: #{tokens.$grey-250}; - --ids-input-border-color-disabled: #{tokens.$grey-250}; - - /* Error */ - --ids-input-border-color-error: #{tokens.$coral-500}; - } - - [data-brand="workleap"] { /* Default */ --ids-input-height: 2.5rem; --ids-input-font-family: var(--hop-body-md-font-family); diff --git a/packages/List/src/ListItem.tsx b/packages/List/src/ListItem.tsx index 587691462..bb9ad2c0e 100644 --- a/packages/List/src/ListItem.tsx +++ b/packages/List/src/ListItem.tsx @@ -1,11 +1,10 @@ -import * as React from "react"; import cx from "classnames"; +import * as React from "react"; // eslint-disable-next-line import/no-extraneous-dependencies -import { VisualIdentifier, type Size } from "@shared/components"; -import UserSolid from "@igloo-ui/icons/dist/UserSolid"; -import Checkmark from "@igloo-ui/icons/dist/Checkmark"; import { UserIcon } from "@hopper-ui/icons-react16"; +import Checkmark from "@igloo-ui/icons/dist/Checkmark"; +import { VisualIdentifier, type Size } from "@shared/components"; import "./list-item.scss"; @@ -78,10 +77,6 @@ export interface ListItemProps extends React.ComponentProps<"li"> { useCheckbox?: boolean; } -const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; -}; - const ListItem: React.FunctionComponent = ({ className, disableTabbing = false, @@ -98,7 +93,6 @@ const ListItem: React.FunctionComponent = ({ useCheckbox, ...rest }: ListItemProps) => { - const isWorkleap = getBrand() === "workleap"; const noDescription = option?.type === "list" ? !option?.description : !option?.role; const isOptionDisabled = (): boolean => { @@ -194,11 +188,7 @@ const ListItem: React.FunctionComponent = ({ <> {option?.member} - {option?.manager && ( - isWorkleap ? - : - - )} + {option?.manager && ()} {option?.role && ( {option.role} diff --git a/packages/List/src/list-item.scss b/packages/List/src/list-item.scss index 636f11a8e..b7d7bb08e 100644 --- a/packages/List/src/list-item.scss +++ b/packages/List/src/list-item.scss @@ -6,90 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-list-item-padding: #{tokens.$space-2} #{tokens.$space-3}; - --ids-list-item-min-height: 5.6rem; - --ids-list-item-action-margin: #{tokens.$space-3}; - --ids-list-item-border-radius: 0; - - /* Compact */ - --ids-list-item-padding-compact: #{tokens.$space-2} #{tokens.$space-3}; - --ids-list-item-min-height-compact: #{tokens.$space-5}; - - /* Member */ - --ids-list-item-padding-member: #{tokens.$space-2}; - --ids-list-item-min-height-member: 5rem; - - /* Focused */ - --ids-list-item-background-focused: #{tokens.$electric-blue-50}; - --ids-list-item-color-focused: #{tokens.$grey-800}; - - /* Selected */ - --ids-list-item-background-selected: #{tokens.$electric-blue-50}; - --ids-list-item-background-selected-multi: none; - --ids-list-item-font-weight-selected: #{tokens.$font-weight-regular}; - --ids-list-item-check-display: none; - - /* Disabled */ - --ids-list-item-color-disabled: #{tokens.$grey-600}; - --ids-list-item-icon-color-disabled: #{tokens.$grey-600}; - - /* Visual Identifier */ - --ids-list-item-icon-size: #{tokens.$space-4}; - --ids-list-item-icon-size-compact: #{tokens.$space-3}; - --ids-list-item-icon-margin: 0.25rem #{tokens.$space-2} 0.25rem 0; - --ids-list-item-svg-margin: 0 #{tokens.$space-2} 0 0; - --ids-list-item-svg-color: #{tokens.$grey-600}; - --ids-list-item-icon-member-size: #{tokens.$space-5}; - - /* Manager */ - --ids-list-item-manager-color: #{tokens.$grey-500}; - --ids-list-item-manager-margin: 0 0 0 #{tokens.$space-2}; - - /* Checkbox */ - --ids-list-item-checkbox-size: #{tokens.$font-size-3}; - --ids-list-item-checkbox-radius: #{tokens.$border-radius-sm}; - --ids-list-item-checkbox-check: #{tokens.$samoyed}; - --ids-list-item-checkbox-margin: 0.25rem #{tokens.$space-2} 0.25rem 0; - --ids-list-item-checkbox-box-sizing: content-box; - --ids-list-item-checkbox-background: #{tokens.$samoyed}; - --ids-list-item-checkbox-background-hover: #{tokens.$samoyed}; - --ids-list-item-checkbox-background-pressed: #{tokens.$samoyed}; - --ids-list-item-checkbox-background-disabled: #{tokens.$grey-200}; - --ids-list-item-checkbox-background-checked: #{tokens.$electric-blue-500}; - --ids-list-item-checkbox-border-checked-hover: #{tokens.$electric-blue-500}; - --ids-list-item-checkbox-background-checked-disabled: #{tokens.$grey-400}; - --ids-list-item-checkbox-border: #{tokens.$grey-400}; - --ids-list-item-checkbox-border-hover: #{tokens.$grey-800}; - --ids-list-item-checkbox-border-checked: #{tokens.$electric-blue-500}; - --ids-list-item-checkbox-border-disabled: #{tokens.$grey-400}; - --ids-list-item-checkbox-one-px: 0.1rem; - --ids-list-item-checkbox-check-color-disabled: #{tokens.$grey-600}; - --ids-list-item-checkbox-check-size: #{tokens.$font-size-3}; - --ids-list-item-checkbox-check-color-hover: transparent; - --ids-list-item-checkbox-check-color-selected: #{tokens.$samoyed}; - --ids-list-item-checkbox-check-color-default: transparent; - - /* Description */ - --ids-list-item-desc-color: #{tokens.$grey-600}; - --ids-list-item-desc-font-size: #{tokens.$font-size-2}; - --ids-list-item-desc-line-height: #{tokens.$line-height-xl}; - --ids-list-item-desc-margin: #{tokens.$space-1} 0 0; - - /* Member Name */ - --ids-list-item-member-color: #{tokens.$grey-600}; - --ids-list-item-member-font-weight: #{tokens.$font-weight-semi-bold}; - - /* Loading */ - --ids-list-item-loading-thumbnail-border-radius: #{tokens.$border-radius-sm}; - --ids-list-item-loading-thumbnail-margin: 0 #{tokens.$space-3} 0 0; - --ids-list-item-loading-text-border-radius: 4.5rem; - --ids-list-item-loading-text-height: #{tokens.$space-2}; - --ids-list-item-loading-text-width: 60%; - --ids-list-item-loading-color: #{tokens.$grey-200}; - } - - [data-brand="workleap"] { /* Default */ --ids-list-item-padding: var(--hop-space-inset-squish-md); --ids-list-item-min-height: 3.5rem; diff --git a/packages/List/src/list.scss b/packages/List/src/list.scss index 7bce6d7ff..c6068cd21 100644 --- a/packages/List/src/list.scss +++ b/packages/List/src/list.scss @@ -9,18 +9,7 @@ @layer igloo { :root { - /* Default */ - --ids-list-font-family: #{tokens.$primary-font-family}; - --ids-list-font-size: #{tokens.$font-size-3}; - --ids-list-font-weight: #{tokens.$font-weight-regular}; - --ids-list-color: #{tokens.$grey-800}; - --ids-list-line-height: #{tokens.$line-height-xxl}; - --ids-list-min-width: 20rem; - --ids-list-padding: #{tokens.$space-2} 0; - } - - [data-brand="workleap"] { - /* Default */ + /* Default */ --ids-list-font-family: var(--hop-body-sm-font-family); --ids-list-font-size: var(--hop-body-sm-font-size); --ids-list-font-weight: var(--hop-body-sm-font-weight); diff --git a/packages/Metric/src/Metric.tsx b/packages/Metric/src/Metric.tsx index 1e981c36a..c5bd8833c 100644 --- a/packages/Metric/src/Metric.tsx +++ b/packages/Metric/src/Metric.tsx @@ -1,8 +1,7 @@ -import * as React from "react"; import cx from "classnames"; -import { useButton, type AriaButtonProps, FocusRing } from "react-aria"; +import * as React from "react"; +import { FocusRing, useButton, type AriaButtonProps } from "react-aria"; -import HelpSolid from "@igloo-ui/icons/dist/HelpSolid"; import Alignment from "@igloo-ui/icons/dist/Alignment"; import Checkmark from "@igloo-ui/icons/dist/Checkmark"; @@ -51,12 +50,6 @@ const Metric: React.FunctionComponent = ({ }: MetricProps) => { const btnRef = React.useRef(null); - const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; - }; - - const isWorkleap = getBrand() === "workleap"; - const { buttonProps } = useButton(rest, btnRef); const classes = cx("ids-metric", className, { @@ -109,8 +102,7 @@ const Metric: React.FunctionComponent = ({ > {tooltip && appearance !== "selected" && ( - {isWorkleap ? ( - ) : } + )} {type !== "subMetric" && appearance === "selected" && ( diff --git a/packages/Metric/src/Score.tsx b/packages/Metric/src/Score.tsx index 0455ab20c..43c888523 100644 --- a/packages/Metric/src/Score.tsx +++ b/packages/Metric/src/Score.tsx @@ -1,11 +1,9 @@ -import * as React from "react"; import cx from "classnames"; +import * as React from "react"; -import ArrowUp from "@igloo-ui/icons/dist/ArrowUp"; -import ArrowDown from "@igloo-ui/icons/dist/ArrowDown"; -import { ArrowUpIcon, ArrowDownIcon } from "@hopper-ui/icons-react16"; +import { ArrowDownIcon, ArrowUpIcon } from "@hopper-ui/icons-react16"; -import { useLocalizedStringFormatter, useLocale } from "@igloo-ui/provider"; +import { useLocale, useLocalizedStringFormatter } from "@igloo-ui/provider"; import intlMessages from "./intl"; import "./score.scss"; @@ -33,10 +31,6 @@ const sizeMap = { large: "lg" } as const; -const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; -}; - const Score: React.FunctionComponent = ({ arrowSize = "small", className, @@ -49,8 +43,6 @@ const Score: React.FunctionComponent = ({ const stringFormatter = useLocalizedStringFormatter(intlMessages); const { locale } = useLocale(); - const isWorkleap = getBrand() === "workleap"; - const arrowPositiveClass = cx("ids-score__arrow", "ids-score__arrow--positive", { "ids-score__arrow--selected": isSelected }); @@ -59,14 +51,6 @@ const Score: React.FunctionComponent = ({ "ids-score__arrow--selected": isSelected }); - const ArrowUpIconElement = isWorkleap ? - : - ; - - const ArrowDownIconElement = isWorkleap ? - : - ; - if (!isVariation && (value === undefined || value === null)) { return = ({ } const arrow = isNegative ? ( - ArrowDownIconElement + ) : ( - ArrowUpIconElement + ); let postFix = absoluteValue === 1 ? diff --git a/packages/Metric/src/metric.scss b/packages/Metric/src/metric.scss index 176e7c20e..d8847f817 100644 --- a/packages/Metric/src/metric.scss +++ b/packages/Metric/src/metric.scss @@ -5,82 +5,6 @@ @import url('~@hopper-ui/tokens/tokens.css') layer(hopper-design-system); :root { - /* Default */ - --ids-metric-background: #{tokens.$samoyed}; - --ids-metric-font-family: #{tokens.$primary-font-family}; - --ids-metric-font-size: #{tokens.$font-size-3}; - --ids-metric-font-weight: #{tokens.$font-weight-regular}; - --ids-metric-padding: #{tokens.$space-2}; - --ids-metric-border-radius: #{tokens.$border-radius-sm}; - --ids-metric-line-height: #{tokens.$line-height-xxl}; - --ids-metric-border-color: transparent; - --ids-metric-border-width: 1.5px; - --ids-metric-shadow: none; - - /* Visual */ - --ids-metric-visual-background: #{tokens.$grey-400}; - --ids-metric-visual-border-radius: 4rem; - --ids-metric-visual-color: #{tokens.$grey-600}; - --ids-metric-visual-size: #{tokens.$space-6}; - --ids-metric-visual-positive-background: #{tokens.$seaweed-50}; - --ids-metric-visual-positive-color: #{tokens.$seaweed-500}; - --ids-metric-visual-negative-background: #{tokens.$coral-100}; - --ids-metric-visual-negative-color: #{tokens.$coral-500}; - --ids-metric-visual-selected-background: #{tokens.$electric-blue-100}; - --ids-metric-visual-selected-color: #{tokens.$electric-blue-500}; - --ids-metric-visual-margin-right: #{tokens.$space-3}; - - /* Hover */ - --ids-metric-hover-shadow: #{tokens.$shadow-12}; - --ids-metric-hover-background: var(--ids-metric-background); - --ids-metric-hover-border-color: transparent; - - /* Pressed */ - --ids-metric-pressed-shadow: #{tokens.$shadow-12}; - --ids-metric-pressed-background: var(--ids-metric-background); - --ids-metric-pressed-border-color: transparent; - - /* Focus */ - --ids-metric-focus-border-color: #{tokens.$electric-blue-600}; - --ids-metric-focus-shadow: #{tokens.$shadow-12}; - - /* Selected */ - --ids-metric-selected-shadow: none; - --ids-metric-selected-border-width: 0.15rem; - --ids-metric-selected-border-color: transparent; - --ids-metric-selected-hover-background: #{tokens.$electric-blue-50}; - --ids-metric-selected-hover-shadow: none; - --ids-metric-selected-hover-border-color: transparent; - --ids-metric-selected-focus-shadow: none; - - /* Score */ - --ids-metric-score-margin-left: #{tokens.$space-2}; - - /* Name */ - --ids-metric-name-color: #{tokens.$grey-600}; - - /* Status */ - --ids-metric-status-color: #{tokens.$grey-500}; - --ids-metric-status-selected-color: #{tokens.$electric-blue-500}; - - /* Fluctuate */ - --ids-metric-alignment-icon-margin: #{tokens.$space-2}; - --ids-metric-fluctuate-name-color: #{tokens.$grey-600}; - - /* Sub Metric */ - --ids-metric-sub-metric-border-color: #{tokens.$grey-300}; - --ids-metric-sub-metric-padding-left: #{tokens.$space-3}; - --ids-metric-sub-metric-focus-shadow: #{tokens.$focus}; - --ids-metric-sub-metric-hover-border-color: #{tokens.$electric-blue-500}; - - /* Sub Metric Selected */ - --ids-metric-sub-metric-selected-border-color: #{tokens.$grey-400}; - --ids-metric-sub-metric-selected-left-border-color: #{tokens.$electric-blue-500}; - --ids-metric-sub-metric-selected-left-border-width: #{tokens.$space-1}; - --ids-metric-sub-metric-selected-hover-border-color: #{tokens.$electric-blue-500}; -} - -[data-brand="workleap"] { /* Default */ --ids-metric-background: var(--hop-neutral-surface); --ids-metric-font-family: var(--hop-body-sm-font-family); diff --git a/packages/Metric/src/score.scss b/packages/Metric/src/score.scss index 4decfeca1..e8153a0f2 100644 --- a/packages/Metric/src/score.scss +++ b/packages/Metric/src/score.scss @@ -6,32 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-score-font-family: #{tokens.$secondary-font-family}; - --ids-score-font-size: #{tokens.$font-size-5}; - --ids-score-font-weight: #{tokens.$font-weight-medium}; - --ids-score-color: #{tokens.$grey-800}; - --ids-score-line-height: #{tokens.$line-height-xl}; - - /* Variation */ - --ids-score-variation-font-family: #{tokens.$primary-font-family}; - --ids-score-variation-font-size: #{tokens.$font-size-3}; - --ids-score-variation-font-weight: #{tokens.$font-weight-regular}; - --ids-score-variation-margin-left: 0; - --ids-score-variation-line-height: #{tokens.$line-height-xxl}; - --ids-score-single-variation-font-size: #{tokens.$font-size-9}; - --ids-score-single-variation-color: #{tokens.$grey-600}; - --ids-score-single-variation-line-height: #{tokens.$line-height-xxxs}; - - /* Arrows */ - --ids-score-arrow-color-positive: #{tokens.$seaweed-500}; - --ids-score-arrow-color-negative: #{tokens.$coral-500}; - --ids-score-arrow-color-selected-positive: #{tokens.$electric-blue-500}; - --ids-score-arrow-color-selected-negative: #{tokens.$electric-blue-500}; - --ids-score-arrow-margin-right: #{tokens.$space-1}; - } - - [data-brand="workleap"] { /* Default */ --ids-score-font-family: var(--hop-heading-sm-font-family); --ids-score-font-size: var(--hop-heading-sm-font-size); diff --git a/packages/Modal/src/modal.scss b/packages/Modal/src/modal.scss index 91d7f40aa..c63b1fd8f 100644 --- a/packages/Modal/src/modal.scss +++ b/packages/Modal/src/modal.scss @@ -8,48 +8,6 @@ @layer igloo { :root { - --ids-modal-font-family: #{tokens.$primary-font-family}; - --ids-modal-font-size: #{tokens.$font-size-4}; - --ids-modal-background: #{tokens.$samoyed}; - --ids-modal-text: #{tokens.$black}; - --ids-modal-padding: #{tokens.$space-3}; - --ids-modal-padding-with-header: #{tokens.$space-3}; - --ids-modal-padding-full-content: #{tokens.$space-3}; - --ids-modal-index: #{tokens.$z-index-100}; - --ids-modal-shadow: none; - --ids-modal-radius: 0; - --ids-modal-height: 100%; - --ids-modal-width: 100%; - --ids-modal-max-width: none; - --ids-modal-header-dismissable-close-display: flex; - --ids-modal-header-before-display: block; - - .ids-modal__header--with-back-btn, - .ids-modal:not(.ids-modal--closable, .ids-modal--dismissable) { - --ids-modal-header-before-display: none; - } - - --ids-modal-header-border: .1rem solid #{tokens.$grey-200}; - --ids-modal-header-gap: #{tokens.$space-3}; - --ids-modal-header-icon-size: #{tokens.$space-5}; - --ids-modal-header-height: 5.6rem; - --ids-modal-header-title-alignment: center; - --ids-modal-header-font-family: #{tokens.$secondary-font-family}; - --ids-modal-header-font-size: #{tokens.$font-size-3}; - --ids-modal-header-font-weight: #{tokens.$font-weight-medium}; - --ids-modal-header-line-height: #{tokens.$line-height-lg}; - --ids-modal-header-padding: #{tokens.$space-0} #{tokens.$space-3}; - --ids-modal-overlay: rgb(25 34 47 / 50%); - --ids-modal-overlay-index: #{tokens.$z-index-100}; - --ids-modal-full-content-display: block; - --ids-modal-full-content-close-spacing-horizontal: #{tokens.$space-1}; - --ids-modal-full-content-close-spacing-vertical: #{tokens.$space-1}; - --ids-modal-footer-margin: #{tokens.$space-2} -#{tokens.$space-2} -#{tokens.$space-2}; - --ids-modal-footer-action-margin: #{tokens.$space-2} #{tokens.$space-2}; - --ids-modal-footer-action-gap: 0; - } - - [data-brand="workleap"] { --ids-modal-font-family: var(--hop-body-md-font-family); --ids-modal-font-size: var(--hop-body-md-font-size); --ids-modal-background: var(--hop-neutral-surface); @@ -94,40 +52,6 @@ @media (width >= #{tokens.$breakpoints-sm}) { :root { - --ids-modal-radius: #{tokens.$border-radius-sm}; - --ids-modal-shadow: #{tokens.$shadow-12}; - --ids-modal-height: auto; - --ids-modal-width: 46rem; - --ids-modal-width-medium: 58.4rem; - --ids-modal-width-large: 66.4rem; - --ids-modal-width-xlarge: 80rem; - --ids-modal-max-width: 94%; - --ids-modal-bottom: auto; - --ids-modal-left: 50%; - --ids-modal-right: auto; - --ids-modal-top: 50%; - --ids-modal-header-dismissable-close-display: none; - --ids-modal-header-before-display: block; - - .ids-modal__header--with-back-btn { - --ids-modal-header-before-display: block; /* Display block since the back button in the header isn't displayed on desktop */ - } - - .ids-modal:not(.ids-modal--closable) { - --ids-modal-header-before-display: none; // Hide the before element if the modal isn't showing the close button - } - - --ids-modal-header-border: none; - --ids-modal-header-height: auto; - --ids-modal-header-font-size: #{tokens.$font-size-6}; - --ids-modal-header-padding: #{tokens.$space-4} #{tokens.$space-4} #{tokens.$space-2}; - --ids-modal-title-display: none; - --ids-modal-padding: #{tokens.$space-4}; - --ids-modal-padding-with-header: #{tokens.$space-4}; - --ids-modal-full-content-display: none; - } - - [data-brand="workleap"] { --ids-modal-radius: var(--hop-shape-rounded-md); --ids-modal-shadow: var(--hop-elevation-lifted); --ids-modal-width: 28.75rem; diff --git a/packages/OptionButton/src/OptionButton.tsx b/packages/OptionButton/src/OptionButton.tsx index e26b8113f..3443212fc 100644 --- a/packages/OptionButton/src/OptionButton.tsx +++ b/packages/OptionButton/src/OptionButton.tsx @@ -1,15 +1,11 @@ -import * as React from "react"; import cx from "classnames"; +import * as React from "react"; import { - LegacyTextIcon, - LegacyOptionScaleIcon, - LegacyMultipleChoiceIcon, - LegacyLikertIcon, - TextIcon, - OptionScaleIcon, + LikertIcon, MultipleChoiceIcon, - LikertIcon + OptionScaleIcon, + TextIcon } from "./svgs"; import "./option-button.scss"; @@ -44,10 +40,6 @@ export interface OptionButtonProps extends React.ComponentProps<"input"> { unchecked?: boolean; } -const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; -}; - const OptionButton: React.FunctionComponent = ({ buttonType = "text", checked, @@ -67,44 +59,32 @@ const OptionButton: React.FunctionComponent = ({ return icon; } - const isWorkleap = getBrand() === "workleap"; - let OptionScale = LegacyOptionScaleIcon; - let MultipleChoice = LegacyMultipleChoiceIcon; - let Likert = LegacyLikertIcon; - let Text = LegacyTextIcon; - if (isWorkleap) { - OptionScale = OptionScaleIcon; - MultipleChoice = MultipleChoiceIcon; - Likert = LikertIcon; - Text = TextIcon; - } - switch (buttonType) { case "optionScale": return ( - ); case "multipleChoice": return ( - ); case "likert": return ( - ); default: return ( - ); diff --git a/packages/OptionButton/src/option-button.scss b/packages/OptionButton/src/option-button.scss index d833d3037..0ec24aa32 100644 --- a/packages/OptionButton/src/option-button.scss +++ b/packages/OptionButton/src/option-button.scss @@ -6,61 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-option-button-border-color: #{tokens.$grey-400}; - --ids-option-button-border-dimension: 0.1rem; - --ids-option-button-border-radius: #{tokens.$border-radius-sm}; - --ids-option-button-font-family: #{tokens.$primary-font-family}; - --ids-option-focus: 0 0 0 0.2rem #ffffff, 0 0 0 0.35rem #0C46D0; - --ids-option-button-padding: 0; - - /* Hover */ - --ids-option-button-hover-border-color: #{tokens.$grey-600}; - --ids-option-button-hover-background-color: transparent; - - /* Pressed */ - --ids-option-button-pressed-border-color: #{tokens.$grey-600}; - --ids-option-button-pressed-background-color: transparent; - - /* Checked */ - --ids-option-button-checked-box-shadow: 0 0 0.6rem #3c7dff; - --ids-option-button-checked-border-color: transparent; - --ids-option-button-checked-background-color: transparent; - --ids-option-button-checked-outline: none; - --ids-option-button-checked-outline-offset: 0; - - /* Disabled */ - --ids-option-button-icon-container-disabled-background: #{tokens.$grey-200}; - --ids-option-button-border-color-disabled: #{tokens.$grey-400}; - --ids-option-button-background-color-disabled: transparent; - --ids-option-button-text-color-disabled: #{tokens.$grey-600}; - - /* Icon */ - --ids-option-button-icon-container-background: #{tokens.$electric-blue-50}; - --ids-option-button-icon-container-height: 5.6rem; - --ids-option-button-icon-container-width: 6.2rem; - --ids-option-button-icon-background: #{tokens.$sky-100}; - --ids-option-button-icon-background-disabled: #{tokens.$grey-300}; - --ids-option-button-icon-background-hover: #{tokens.$sky-100}; - --ids-option-button-icon-color: #{tokens.$grey-800}; - --ids-option-button-icon-color-disabled: #{tokens.$grey-600}; - --ids-option-button-icon-width: auto; - --ids-option-button-icon-height: auto; - - /* Text */ - --ids-option-button-text-container-padding: #{tokens.$space-1} #{tokens.$space-3}; - --ids-option-button-text-color: #{tokens.$grey-800}; - --ids-option-button-text-font-size: #{tokens.$font-size-5}; - --ids-option-button-text-font-weight: #{tokens.$font-weight-semi-bold}; - --ids-option-button-text-line-height: #{tokens.$line-height-xl}; - - /* Description */ - --ids-option-button-desc-color: #{tokens.$grey-600}; - --ids-option-button-desc-font-size: #{tokens.$font-size-3}; - --ids-option-button-desc-line-height: #{tokens.$line-height-xxl}; - } - - [data-brand="workleap"] { /* Default */ --ids-option-button-padding: 0 0 0 var(--hop-space-inline-md); --ids-option-button-border-color: var(--hop-neutral-border-weak); diff --git a/packages/Pager/src/Pager.tsx b/packages/Pager/src/Pager.tsx index 6383db870..625d483d6 100644 --- a/packages/Pager/src/Pager.tsx +++ b/packages/Pager/src/Pager.tsx @@ -1,20 +1,15 @@ -import * as React from "react"; -import cx from "classnames"; import ChevronLeft from "@igloo-ui/icons/dist/ChevronLeft"; import ChevronRight from "@igloo-ui/icons/dist/ChevronRight"; +import cx from "classnames"; +import * as React from "react"; -import { usePagination, JUMPPREV, JUMPNEXT } from "./usePagination"; -import { EllipsisIcon } from "./svgs"; -import intlMessages from "./intl"; import { useLocalizedStringFormatter } from "@igloo-ui/provider"; +import intlMessages from "./intl"; +import { EllipsisIcon } from "./svgs"; +import { JUMPNEXT, JUMPPREV, usePagination } from "./usePagination"; import "./pager.scss"; - -const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; -}; - export interface PagerProps extends React.ComponentProps<"div"> { /** Add a specific class to the pager component */ className?: string; @@ -50,7 +45,6 @@ const Pager: React.FunctionComponent = ({ ...rest }: PagerProps) => { const stringFormatter = useLocalizedStringFormatter(intlMessages); - const isWorkleap = getBrand() === "workleap"; const paginationRange = usePagination({ currentPage, pageSize, @@ -87,13 +81,6 @@ ${stringFormatter.format("of")} ${totalCount}`; const renderPrevNext = (type: string): React.ReactNode => { const isPrev = type === "prev"; const isDisabled = isPrev ? currentPage === 1 : currentPage === lastPage; - const ChevronLeftIcon = isWorkleap ? - : - ; - - const ChevronRightIcon = isWorkleap ? - : - ; return (
  • @@ -105,8 +92,8 @@ ${stringFormatter.format("of")} ${totalCount}`; stringFormatter.format("goToPreviousPage") : stringFormatter.format("goToNextPage")} > - {isPrev && ChevronLeftIcon} - {!isPrev && ChevronRightIcon} + {isPrev && } + {!isPrev && }
    • ); diff --git a/packages/Pager/src/pager.scss b/packages/Pager/src/pager.scss index 380765564..229ad35e0 100644 --- a/packages/Pager/src/pager.scss +++ b/packages/Pager/src/pager.scss @@ -6,64 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-pager-font-family: #{tokens.$primary-font-family}; - --ids-pager-font-size: #{tokens.$font-size-4}; - --ids-pager-height: #{tokens.$space-5}; - --ids-pager-line-height: #{tokens.$line-height-xxxl}; - - /* Item */ - --ids-pager-item-wrapper-border-size: 0; - --ids-pager-item-wrapper-padding: 0; - --ids-pager-item-wrapper-radius: 0; - --ids-pager-item-padding: #{tokens.$space-1}; - --ids-pager-item-background: #{tokens.$samoyed}; - --ids-pager-item-border: .1rem solid #{tokens.$grey-300}; - --ids-pager-item-prev-border-radius: #{tokens.$border-radius-sm} 0 0 #{tokens.$border-radius-sm}; - --ids-pager-item-next-border-radius: 0 #{tokens.$border-radius-sm} #{tokens.$border-radius-sm} 0; - --ids-pager-item-color: #{tokens.$grey-800}; - --ids-pager-item-radius: 0; - --ids-pager-item-min-width: 3.2rem; - --ids-pager-item-z-index: #{tokens.$z-index-10}; - --ids-pager-item-vertical-offset: -.1rem; - --ids-pager-item-prev-next-offset: -.1rem; - - /* Selected Item */ - --ids-pager-item-selected-background: #{tokens.$electric-blue-500}; - --ids-pager-item-selected-color: #{tokens.$samoyed}; - - /* Hover */ - --ids-pager-item-hover-border: .1rem solid #{tokens.$grey-600}; - --ids-pager-item-hover-background: transparent; - - /* Pressed */ - --ids-pager-item-pressed-border: .1rem solid #{tokens.$grey-600}; - --ids-pager-item-pressed-background: transparent; - - /* Focus */ - --ids-pager-item-focus-border-width: .1rem; - --ids-pager-item-focus-outline-width: 0; - --ids-pager-item-focus-color: #{tokens.$electric-blue-600}; - - /* Disabled */ - --ids-pager-item-disabled-background: #{tokens.$grey-300}; - --ids-pager-item-disabled-border: .1rem solid #{tokens.$grey-300}; - --ids-pager-item-disabled-color: #{tokens.$grey-600}; - - /* Arrows */ - --ids-pager-arrow-color: #{tokens.$grey-500}; - - /* Ellipsis */ - --ids-pager-ellipsis-border: .1rem solid transparent; - --ids-pager-ellipsis-color: #{tokens.$grey-600}; - --ids-pager-ellipsis-offset: 0; - - /* Results */ - --ids-pager-results-color: #{tokens.$grey-600}; - --ids-pager-results-margin: 0 0 0 #{tokens.$space-3}; - } - - [data-brand="workleap"] { /* Default */ --ids-pager-font-family: var(--hop-body-sm-font-family); --ids-pager-font-size: var(--hop-body-sm-font-size); diff --git a/packages/PieChart/src/pie-chart.scss b/packages/PieChart/src/pie-chart.scss index 00a600482..d8b037ee2 100644 --- a/packages/PieChart/src/pie-chart.scss +++ b/packages/PieChart/src/pie-chart.scss @@ -6,30 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-pie-chart-font-family: #{tokens.$primary-font-family}; - --ids-pie-chart-font-size: #{tokens.$font-size-2}; - --ids-pie-chart-font-weight: #{tokens.$font-weight-regular}; - --ids-pie-chart-line-height: #{tokens.$line-height-xl}; - --ids-pie-chart-empty: #{tokens.$grey-300}; - - /* Rate */ - --ids-pie-chart-rate-font-family: #{tokens.$secondary-font-family}; - --ids-pie-chart-rate-font-size: #{tokens.$font-size-10}; - --ids-pie-chart-rate-font-weight: #{tokens.$font-weight-medium}; - --ids-pie-chart-rate-line-height: #{tokens.$line-height-xs}; - --ids-pie-chart-rate-color: #{tokens.$grey-800}; - - /* Symbol */ - --ids-pie-chart-symbol-font-size: #{tokens.$font-size-5}; - --ids-pie-chart-symbol-color: #{tokens.$grey-500}; - - /* Label */ - --ids-pie-chart-label-color: #{tokens.$grey-600}; - --ids-pie-chart-label-padding: #{tokens.$space-4}; - } - - [data-brand="workleap"] { /* Default */ --ids-pie-chart-font-family: var(--hop-body-xs-font-family); --ids-pie-chart-font-size: var(--hop-body-xs-font-size); diff --git a/packages/Popover/src/Popover.tsx b/packages/Popover/src/Popover.tsx index 2257296a6..3ca52f6bc 100644 --- a/packages/Popover/src/Popover.tsx +++ b/packages/Popover/src/Popover.tsx @@ -83,10 +83,6 @@ const Popover: React.FunctionComponent = ({ const classes = cx("ids-popover__container", className); const stringFormatter = useLocalizedStringFormatter(intlMessages); - const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; - }; - const [show, setShow] = React.useState(active); const showPopover = !disabled && show; @@ -157,7 +153,7 @@ const Popover: React.FunctionComponent = ({ const popoverClasses = cx("ids-popover", popoverClassName); - const fromPxToRem = (value: number, base = (getBrand() === "workleap" ? 16 : 10)): string => + const fromPxToRem = (value: number, base = 16): string => `${value / base}rem`; const popoverContent = ( diff --git a/packages/Popover/src/popover.scss b/packages/Popover/src/popover.scss index a04970c92..c4b839044 100644 --- a/packages/Popover/src/popover.scss +++ b/packages/Popover/src/popover.scss @@ -6,26 +6,6 @@ @layer igloo { :root { - /* Default */ - --ids-popover-font-family: #{tokens.$primary-font-family}; - --ids-popover-font-size: #{tokens.$font-size-3}; - --ids-popover-padding: #{tokens.$space-3}; - --ids-popover-border: none; - --ids-popover-border-radius: #{tokens.$border-radius-sm}; - --ids-popover-line-height: #{tokens.$line-height-xxl}; - --ids-popover-z-index: #{tokens.$z-index-max}; - --ids-popover-spacing: #{tokens.$space-2}; - --ids-popover-width: 100%; - --ids-popover-text: #{tokens.$grey-600}; - --ids-popover-background: #{tokens.$samoyed}; - --ids-popover-shadow: #{tokens.$shadow-12}; - --ids-popover-title-color: #{tokens.$grey-800}; - --ids-popover-title-font-weight: #{tokens.$font-weight-semi-bold}; - --ids-popover-title-padding: #{tokens.$space-5}; - --ids-popover-close-offset: #{tokens.$space-3}; - } - - [data-brand="workleap"] { /* Default */ --ids-popover-font-family: var(--hop-body-sm-font-family); --ids-popover-font-size: var(--hop-body-sm-font-size); @@ -48,14 +28,10 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media (width >= #{tokens.$breakpoints-sm}) { :root { - --ids-popover-min-width: 3.2rem; + --ids-popover-min-width: 2rem; --ids-popover-width: 100%; --ids-popover-close-display: none; } - - [data-brand="workleap"] { - --ids-popover-min-width: 2rem; - } } .ids-popover { diff --git a/packages/ProgressBar/src/progress-bar.scss b/packages/ProgressBar/src/progress-bar.scss index 85218b117..1ebe7f1e4 100644 --- a/packages/ProgressBar/src/progress-bar.scss +++ b/packages/ProgressBar/src/progress-bar.scss @@ -6,20 +6,7 @@ @layer igloo { :root { - /* Default */ - --ids-progress-bar-height: #{tokens.$space-2}; - --ids-progress-bar-radius: #{tokens.$space-1}; - --ids-progress-bar-background: #{tokens.$grey-200}; - --ids-progress-bar-background-progress: #{tokens.$electric-blue-500}; - --ids-progress-bar-background-completed: #{tokens.$seaweed-500}; - - /* Compact */ - --ids-progress-bar-height-compact: #{tokens.$space-1}; - --ids-progress-bar-radius-compact: calc(#{tokens.$space-1} / 2); - } - - [data-brand="workleap"] { - /* Default */ + /* Default */ --ids-progress-bar-height: 0.5rem; --ids-progress-bar-radius: var(--hop-shape-rounded-sm); --ids-progress-bar-background: var(--hop-neutral-surface-weak); From fbca86a70921d88d03c376e86bb8dd773b481416 Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:47:22 -0400 Subject: [PATCH 2/7] Add changeset --- .changeset/old-weeks-pump.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 .changeset/old-weeks-pump.md diff --git a/.changeset/old-weeks-pump.md b/.changeset/old-weeks-pump.md new file mode 100644 index 000000000..7d329594e --- /dev/null +++ b/.changeset/old-weeks-pump.md @@ -0,0 +1,21 @@ +--- +"@igloo-ui/form-group": major +"@igloo-ui/icon-button": major +"@igloo-ui/input": major +"@igloo-ui/modal": major +"@igloo-ui/pager": major +"@igloo-ui/progress-bar": major +"@igloo-ui/ellipsis": minor +"@igloo-ui/filter": minor +"@igloo-ui/helper-text": minor +"@igloo-ui/hyperlink": minor +"@igloo-ui/list": minor +"@igloo-ui/metric": minor +"@igloo-ui/option-button": minor +"@igloo-ui/pie-chart": minor +"@igloo-ui/popover": minor +"@igloo-ui/provider": minor +--- + +Clean up non-Workleap rebranded styles for components E-P. +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 72a3424d427f6a6c81b094d31bb7522da91fbd2e Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Thu, 17 Jul 2025 15:42:50 -0400 Subject: [PATCH 3/7] Update jest snapshots --- .../src/__snapshots__/Metric.test.tsx.snap | 25 +++---- .../__snapshots__/OptionButton.test.tsx.snap | 71 +++++-------------- .../src/__snapshots__/Pager.test.tsx.snap | 30 ++++---- 3 files changed, 43 insertions(+), 83 deletions(-) diff --git a/packages/Metric/src/__snapshots__/Metric.test.tsx.snap b/packages/Metric/src/__snapshots__/Metric.test.tsx.snap index 136b0475c..7f82d66a0 100644 --- a/packages/Metric/src/__snapshots__/Metric.test.tsx.snap +++ b/packages/Metric/src/__snapshots__/Metric.test.tsx.snap @@ -30,19 +30,17 @@ exports[`Metric should render a snapshot 1`] = ` class="ids-score ids-metric__score ids-score--variation" > 1 @@ -68,17 +66,16 @@ exports[`Metric should render a snapshot 1`] = ` tabindex="0" > diff --git a/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap b/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap index a6d23c545..ef2ee7b62 100644 --- a/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap +++ b/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap @@ -19,63 +19,28 @@ exports[`OptionButton It should render a snapshot 1`] = ` class="ids-option-button__icon-container" > - - - - - - - - - - - - - + + +     @@ -144,17 +143,16 @@ exports[`Pager It should render without error and a snapshot 1`] = ` From 4dc0fdc40f2535ea51b016a22267a4a65c6a024b Mon Sep 17 00:00:00 2001 From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com> Date: Mon, 21 Jul 2025 11:00:39 -0400 Subject: [PATCH 4/7] Use workleap brand for cleaned up component stories --- packages/Ellipsis/src/Ellipsis.stories.tsx | 5 +++-- packages/Filter/src/Filter.stories.tsx | 5 +++-- packages/FormGroup/src/FormGroup.stories.tsx | 11 ++++++----- packages/HelperText/src/HelperText.stories.tsx | 5 +++-- packages/Hyperlink/src/Hyperlink.stories.tsx | 5 +++-- packages/IconButton/src/IconButton.stories.tsx | 3 ++- packages/Input/src/Input.stories.tsx | 7 ++++--- packages/List/src/List.stories.tsx | 7 ++++--- packages/Metric/src/Metric.stories.tsx | 15 ++++++++------- packages/Modal/src/Modal.stories.tsx | 11 ++++++----- .../OptionButton/src/OptionButton.stories.tsx | 5 +++-- packages/Pager/src/Pager.stories.tsx | 3 ++- packages/PieChart/src/PieChart.stories.tsx | 5 +++-- packages/Popover/src/Popover.stories.tsx | 5 +++-- packages/ProgressBar/src/ProgressBar.stories.tsx | 7 ++++--- packages/Provider/src/Provider.stories.tsx | 3 ++- 16 files changed, 59 insertions(+), 43 deletions(-) diff --git a/packages/Ellipsis/src/Ellipsis.stories.tsx b/packages/Ellipsis/src/Ellipsis.stories.tsx index 2cacad118..9bdea977e 100644 --- a/packages/Ellipsis/src/Ellipsis.stories.tsx +++ b/packages/Ellipsis/src/Ellipsis.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Meta, StoryFn } from '@storybook/react'; +import { Meta } from '@storybook/react'; import readme from '../README.md'; @@ -17,7 +17,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, decorators: [ (Story) => {Story()}, diff --git a/packages/Filter/src/Filter.stories.tsx b/packages/Filter/src/Filter.stories.tsx index b5e6d07c6..2f6706ca9 100644 --- a/packages/Filter/src/Filter.stories.tsx +++ b/packages/Filter/src/Filter.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" }, } as Meta; diff --git a/packages/FormGroup/src/FormGroup.stories.tsx b/packages/FormGroup/src/FormGroup.stories.tsx index 7b0d0f6cf..80dd17506 100644 --- a/packages/FormGroup/src/FormGroup.stories.tsx +++ b/packages/FormGroup/src/FormGroup.stories.tsx @@ -1,11 +1,11 @@ -import React from 'react'; import Input from '@igloo-ui/input'; -import Textarea from '@igloo-ui/textarea'; -import Select from '@igloo-ui/select'; import type { OptionType } from '@igloo-ui/list'; +import Select from '@igloo-ui/select'; +import Textarea from '@igloo-ui/textarea'; +import React from 'react'; -import { Meta, StoryFn } from '@storybook/react'; import Section from '@components/section'; +import { Meta, StoryFn } from '@storybook/react'; import readme from '../README.md'; import FormGroup from './FormGroup'; @@ -18,7 +18,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, } as Meta; diff --git a/packages/HelperText/src/HelperText.stories.tsx b/packages/HelperText/src/HelperText.stories.tsx index b8aaddefb..9965e0965 100644 --- a/packages/HelperText/src/HelperText.stories.tsx +++ b/packages/HelperText/src/HelperText.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Meta, StoryFn } from '@storybook/react'; +import { Meta } from '@storybook/react'; import readme from '../README.md'; @@ -14,7 +14,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, } as Meta; diff --git a/packages/Hyperlink/src/Hyperlink.stories.tsx b/packages/Hyperlink/src/Hyperlink.stories.tsx index 98451d431..d765220ea 100644 --- a/packages/Hyperlink/src/Hyperlink.stories.tsx +++ b/packages/Hyperlink/src/Hyperlink.stories.tsx @@ -1,13 +1,13 @@ import React from 'react'; +import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; import readme from '../README.md'; -import Hyperlink from './Hyperlink'; import Plus from '@igloo-ui/icons/dist/Plus'; +import Hyperlink from './Hyperlink'; import Section from '@components/section'; @@ -26,6 +26,7 @@ export default { component: readme.replace(//g, '').replace(//g, ''), } }, + brand: "workleap" }, argTypes: { onClick: { diff --git a/packages/IconButton/src/IconButton.stories.tsx b/packages/IconButton/src/IconButton.stories.tsx index 23b99d06b..70292e8c3 100644 --- a/packages/IconButton/src/IconButton.stories.tsx +++ b/packages/IconButton/src/IconButton.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Meta, StoryFn } from '@storybook/react'; +import { Meta } from '@storybook/react'; import IconButton from './IconButton'; @@ -27,6 +27,7 @@ export default { 'underline', ], }, + brand: "workleap" }, argTypes: { size: { diff --git a/packages/Input/src/Input.stories.tsx b/packages/Input/src/Input.stories.tsx index f9bf9061a..18d741e08 100644 --- a/packages/Input/src/Input.stories.tsx +++ b/packages/Input/src/Input.stories.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Meta } from '@storybook/react'; -import Search from '@igloo-ui/icons/dist/Search'; import Percentage from '@igloo-ui/icons/dist/Percentage'; +import Search from '@igloo-ui/icons/dist/Search'; +import { Meta } from '@storybook/react'; import Input from './Input'; @@ -17,7 +17,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, argTypes: { value: { diff --git a/packages/List/src/List.stories.tsx b/packages/List/src/List.stories.tsx index 4fe6b6657..015dd2abe 100644 --- a/packages/List/src/List.stories.tsx +++ b/packages/List/src/List.stories.tsx @@ -2,14 +2,14 @@ import React from 'react'; import { Meta, StoryFn } from '@storybook/react'; -import Reminder from '@igloo-ui/icons/dist/Reminder'; import Button from '@igloo-ui/button'; +import Reminder from '@igloo-ui/icons/dist/Reminder'; import Tag from '@igloo-ui/tag'; import readme from '../README.md'; +import type { Member, Option, OptionType } from './List'; import List from './List'; -import type { Option, Member, OptionType } from './List'; export default { title: 'Components/List', @@ -19,7 +19,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, } as Meta; diff --git a/packages/Metric/src/Metric.stories.tsx b/packages/Metric/src/Metric.stories.tsx index c0006c122..1de5aaf46 100644 --- a/packages/Metric/src/Metric.stories.tsx +++ b/packages/Metric/src/Metric.stories.tsx @@ -3,10 +3,10 @@ import React from 'react'; import { Meta, StoryObj } from '@storybook/react'; import Wellness from '@igloo-ui/icons/dist/Wellness'; - import WellnessSolid from '@igloo-ui/icons/dist/WellnessSolid'; +import WellnessSolid from '@igloo-ui/icons/dist/WellnessSolid'; import Section from '@components/section'; - import readme from '../README.md'; +import readme from '../README.md'; import Metric from './Metric'; @@ -16,15 +16,16 @@ import React from 'react'; parameters: { docs: { description: { - component: readme.replace(//g, '').replace(//g, ''), - } - } + component: readme.replace(//g, '').replace(//g, ''), + } + }, + brand: "workleap" }, - argTypes: { + argTypes: { icon: { control: { type: null } }, } } as Meta; - + type Story = StoryObj; export const Overview: Story = { diff --git a/packages/Modal/src/Modal.stories.tsx b/packages/Modal/src/Modal.stories.tsx index e51e7b60b..6368f55f8 100644 --- a/packages/Modal/src/Modal.stories.tsx +++ b/packages/Modal/src/Modal.stories.tsx @@ -1,13 +1,13 @@ -import React, { useState } from 'react'; -import isChromatic from 'chromatic/isChromatic'; import Button from '@igloo-ui/button'; import Select from '@igloo-ui/select'; +import isChromatic from 'chromatic/isChromatic'; +import React, { useState } from 'react'; import { Meta, StoryFn } from '@storybook/react'; import ChromaticWrapper from '@components/chromaticWrapper'; -import Section from '@components/section'; import Mockup from '@components/mockup'; +import Section from '@components/section'; import readme from '../README.md'; @@ -21,7 +21,8 @@ export default { description: { component: readme.replace(//g, '').replace(//g, ''), } - } + }, + brand: "workleap" }, } as Meta; @@ -130,7 +131,7 @@ export const WithSelect = () => { - setShow(false)}> - Error - - - - { + const smallOptionList = [ + { + label: 'Text option', + value: 'text', + }, + { + label: 'Disabled option', + value: 'disabled', + disabled: true, + }, + { + label: 'Text option 3', + value: 'icon', + }, + ]; + + const [hasSelectError, setHasSelectError] = React.useState(true); + const [hasTextareaError, setHasTextareaError] = React.useState(true); + + const handleSelectOnChange = (option: OptionType | undefined): void => { + setHasSelectError(!option?.value); + }; + + const handleTextareaOnChange = ( + event: React.ChangeEvent + ): void => { + setHasTextareaError(!event?.target?.value); + }; + + return ( +
    + +