EP-6630: Clean up rebrand styles for components E-P

.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.

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(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
   decorators: [
     (Story) => <span style={{ fontSize: '1.6rem' }}>{Story()}</span>,

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(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof Filter>;
 

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);

packages/FormGroup/src/FormGroup.stories.tsx

@@ -5,7 +5,7 @@ import Textarea from '@igloo-ui/textarea';
 import React from 'react';
 
 import Section from '@components/section';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
+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(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof FormGroup>;
 
@@ -93,69 +94,63 @@ export const info = () => {
   );
 };
 
-export const OtherFormElements: StoryObj<typeof FormGroup> = {
-    parameters: {
-        brand: "workleap",
-        chromatic: { delay: 500 }
-    },
-    render: () => {
-        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<HTMLTextAreaElement>
-        ): void => {
-            setHasTextareaError(!event?.target?.value);
-        };
-
-        return (
-            <Section column>
-            <FormGroup
-                label="Error Select"
-                message="You must select an option"
-                showMessage={hasSelectError}
+export const OtherFormElements = () => {
+    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<HTMLTextAreaElement>
+    ): void => {
+        setHasTextareaError(!event?.target?.value);
+    };
+
+    return (
+        <Section column>
+        <FormGroup
+            label="Error Select"
+            message="You must select an option"
+            showMessage={hasSelectError}
+        >
+            <Select
+            options={smallOptionList}
+            error={hasSelectError}
+            onChange={handleSelectOnChange}
             >
-                <Select
-                options={smallOptionList}
-                error={hasSelectError}
-                onChange={handleSelectOnChange}
-                >
-                Error
-                </Select>
-            </FormGroup>
-
-            <FormGroup
-                label="Error Textarea"
-                message="You must enter text"
-                showMessage={hasTextareaError}
-            >
-                <Textarea
-                placeholder="Enter text here"
-                error={hasTextareaError}
-                onChange={handleTextareaOnChange}
-                />
-            </FormGroup>
-            </Section>
-        );
-    }
-}
+            Error
+            </Select>
+        </FormGroup>
+
+        <FormGroup
+            label="Error Textarea"
+            message="You must enter text"
+            showMessage={hasTextareaError}
+        >
+            <Textarea
+            placeholder="Enter text here"
+            error={hasTextareaError}
+            onChange={handleTextareaOnChange}
+            />
+        </FormGroup>
+        </Section>
+    );
+};

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);

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(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
-    }
+    },
+    brand: "workleap"
   },
 } as Meta<typeof HelperText>;
 

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);

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(/<Example is="custom" \/>/g, '').replace(/<ReferenceLinks is="custom" \/>/g, ''),
       }
     },
+    brand: "workleap"
   },
   argTypes: {
     onClick: {

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);

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: {