Fix: [IGL-130] Option button inconsistencies (#730)

gsoft-inc · Feb 26, 2024 · b9d0197 · b9d0197
1 parent a783512
commit b9d0197
Show file tree

Hide file tree

Showing 6 changed files with 226 additions and 83 deletions.
diff --git a/.changeset/odd-ducks-cry.md b/.changeset/odd-ducks-cry.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/option-button": patch
+---
+
+Fixed Optionbutton style for Workleap brand. Also updated its icons and added a checked disabled look.
diff --git a/packages/OptionButton/src/OptionButton.stories.tsx b/packages/OptionButton/src/OptionButton.stories.tsx
@@ -146,6 +146,44 @@ export const CheckedStates = () => {
   );
 };
 
+export const CheckedDisabledStates = () => {
+  const [checkedId, setCheckedId] = React.useState('radio-2');
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setCheckedId(event.target.id);
+  };
+
+  return (
+    <Section>
+      <OptionButton
+        className="isb-option-button__item"
+        htmlFor="radio1"
+        name="checkedState"
+        buttonType="multipleChoice"
+        title="Unchecked Button"
+        onChange={handleOnChange}
+        checked={checkedId == 'radio-1'}
+        unchecked={checkedId != 'radio1'}
+        disabled
+      >
+        Unchecked Button
+      </OptionButton>
+      <OptionButton
+        className="isb-option-button__item"
+        htmlFor="radio-2"
+        name="checkedState"
+        buttonType="likert"
+        onChange={handleOnChange}
+        checked={checkedId == 'radio-2'}
+        unchecked={checkedId != 'radio-2'}
+        disabled
+      >
+        Checked
+      </OptionButton>
+    </Section>
+  );
+};
+
 export const Description = () => (
   <Section>
     <span title="Description with a lot of text to be cut off">

diff --git a/packages/OptionButton/src/OptionButton.tsx b/packages/OptionButton/src/OptionButton.tsx
@@ -2,6 +2,10 @@ import * as React from "react";
 import cx from "classnames";
 
 import {
+    LegacyTextIcon,
+    LegacyOptionScaleIcon,
+    LegacyMultipleChoiceIcon,
+    LegacyLikertIcon,
     TextIcon,
     OptionScaleIcon,
     MultipleChoiceIcon,
@@ -40,6 +44,10 @@ export interface OptionButtonProps extends React.ComponentProps<"input"> {
     unchecked?: boolean;
 }
 
+const getBrand = (): string => {
+    return document.documentElement.getAttribute("data-brand") ?? "igloo";
+};
+
 const OptionButton: React.FunctionComponent<OptionButtonProps> = ({
     buttonType = "text",
     checked,
@@ -58,41 +66,55 @@ const OptionButton: React.FunctionComponent<OptionButtonProps> = ({
         if (icon) {
             return icon;
         }
-        let disabledClass = "";
-        if (disabled || unchecked) {
-            disabledClass = "disabled";
+
+        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 (
-                    <OptionScaleIcon
-                        className={`ids-option-button__option-scale-icon ${disabledClass}`}
+                    <OptionScale
+                        className={`ids-option-button__icon 
+                        ids-option-button__option-scale-icon`}
                     />
                 );
             case "multipleChoice":
                 return (
-                    <MultipleChoiceIcon
-                        // eslint-disable-next-line max-len
-                        className={`ids-option-button__multiple-choice-icon ${disabledClass}`}
+                    <MultipleChoice
+                        className={`ids-option-button__icon 
+                        ids-option-button__multiple-choice-icon`}
                     />
                 );
             case "likert":
                 return (
-                    <LikertIcon
-                        className={`ids-option-button__likert-icon ${disabledClass}`}
+                    <Likert
+                        className={`ids-option-button__icon 
+                        ids-option-button__likert-icon`}
                     />
                 );
             default:
                 return (
-                    <TextIcon
-                        className={`ids-option-button__text-icon ${disabledClass}`}
+                    <Text
+                        className={`ids-option-button__icon 
+                        ids-option-button__text-icon`}
                     />
                 );
         }
     };
 
     const classes = cx("ids-option-button", className, {
-        "ids-option-button--unchecked": unchecked
+        "ids-option-button--unchecked": unchecked,
+        "ids-option-button--checked": checked,
+        "ids-option-button--disabled": disabled
     });
 
     return (

diff --git a/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap b/packages/OptionButton/src/__snapshots__/OptionButton.test.tsx.snap
@@ -19,7 +19,8 @@ exports[`OptionButton It should render a snapshot 1`] = `
         class="ids-option-button__icon-container"
       >
         <svg
-          class="ids-option-button__text-icon "
+          class="ids-option-button__icon 
+                        ids-option-button__text-icon"
           fill="none"
           height="32"
           viewBox="0 0 32 32"
@@ -40,27 +41,27 @@ exports[`OptionButton It should render a snapshot 1`] = `
               fill="white"
             />
             <path
-              class="ids-option-button__icon-path"
               clip-rule="evenodd"
               d="M15.5358 11.2583C13.4703 11.2877 11.5563 11.3885 11.1234 11.4607C10.7148 11.5288 10.3284 11.2527 10.2603 10.8442C10.1922 10.4356 10.4682 10.0492 10.8768 9.98107C11.4439 9.88655 13.48 9.78738 15.5144 9.75844C16.5465 9.74375 17.6038 9.74678 18.5082 9.77915C19.3876 9.81064 20.1947 9.87143 20.682 9.99325C21.0839 10.0937 21.3282 10.5009 21.2277 10.9028C21.1273 11.3046 20.7201 11.5489 20.3182 11.4485C20.0055 11.3703 19.3501 11.3103 18.4545 11.2782C17.584 11.247 16.5537 11.2438 15.5358 11.2583Z"
+              fill="currentColor"
               fill-rule="evenodd"
             />
             <path
-              class="ids-option-button__icon-path"
               clip-rule="evenodd"
               d="M20.3768 16.2398C17.4672 15.7549 15.043 15.7505 11.0931 16.2442C10.6821 16.2956 10.3072 16.004 10.2559 15.593C10.2045 15.182 10.496 14.8071 10.9071 14.7558C14.9571 14.2495 17.533 14.2452 20.6234 14.7602C21.0319 14.8283 21.308 15.2147 21.2399 15.6233C21.1718 16.0319 20.7854 16.3079 20.3768 16.2398Z"
+              fill="currentColor"
               fill-rule="evenodd"
             />
             <path
-              class="ids-option-button__icon-path"
               clip-rule="evenodd"
               d="M14.7057 20.2437C13.0994 20.2798 11.5633 20.3874 11.147 20.4716C10.741 20.5537 10.3453 20.2912 10.2632 19.8852C10.1811 19.4792 10.4436 19.0835 10.8496 19.0014C11.4189 18.8862 13.0906 18.7796 14.672 18.7441C15.4776 18.7259 16.2896 18.7256 16.9636 18.754C17.3 18.7682 17.6116 18.7899 17.8755 18.822C18.1196 18.8516 18.39 18.8972 18.6031 18.9843C18.9865 19.1412 19.1701 19.5791 19.0133 19.9625C18.8565 20.3458 18.4186 20.5295 18.0352 20.3727C18.0356 20.3729 18.0355 20.3728 18.0348 20.3726C18.0305 20.3711 18.0042 20.3623 17.9462 20.3503C17.883 20.3372 17.7996 20.3238 17.6947 20.311C17.4846 20.2855 17.2158 20.266 16.9004 20.2527C16.2708 20.2261 15.494 20.226 14.7057 20.2437Z"
+              fill="currentColor"
               fill-rule="evenodd"
             />
             <path
-              class="ids-option-button__icon-path"
               clip-rule="evenodd"
               d="M8.27614 12.5686C8.29077 13.3727 8.30604 14.2119 8.30606 15.0696C8.30609 17.4809 8.30618 19.7263 8.36854 21.5679C8.42383 23.2007 8.52714 24.4356 8.69522 25.1787C8.81252 25.2193 8.98242 25.2678 9.21711 25.318C9.64611 25.4096 10.2034 25.4893 10.8607 25.5543C12.1731 25.684 13.8294 25.75 15.5429 25.75C17.2552 25.75 19.0097 25.6841 20.517 25.5534C21.8058 25.4417 22.864 25.2863 23.5583 25.1018C23.5865 24.9612 23.6163 24.7685 23.6429 24.515C23.6938 24.029 23.7258 23.402 23.7405 22.6606C23.77 21.1795 23.7297 19.2894 23.6482 17.2528C23.4972 13.4812 23.2061 9.24315 22.9646 6.25H9.06538C8.97554 6.25 8.92757 6.27219 8.88543 6.30522C8.83102 6.34787 8.75019 6.44003 8.66434 6.63052C8.48576 7.02682 8.3659 7.66299 8.30421 8.54296C8.22378 9.69028 8.24885 11.0682 8.27614 12.5686ZM7.96007 5.12467C8.27561 4.87733 8.65213 4.75 9.06538 4.75H23.6555C24.0455 4.75 24.3705 5.04893 24.4029 5.43759C24.6551 8.4571 24.9829 13.0938 25.147 17.1928C25.229 19.241 25.2705 21.1654 25.2402 22.6904C25.2251 23.4519 25.1918 24.1258 25.1347 24.6713C25.0809 25.1847 24.9977 25.6827 24.8366 26.0233C24.751 26.2042 24.5966 26.3434 24.4078 26.4099C23.5554 26.7102 22.1821 26.9147 20.6466 27.0478C19.0881 27.183 17.2895 27.25 15.5429 27.25C13.7975 27.25 12.0893 27.1831 10.7132 27.047C10.0263 26.9791 9.40832 26.8926 8.90382 26.7849C8.43294 26.6843 7.95202 26.5445 7.62722 26.3157C7.49288 26.221 7.39334 26.0849 7.34391 25.9282C7.05634 25.0165 6.93167 23.4577 6.8694 21.6187C6.80613 19.75 6.80609 17.4817 6.80606 15.084L6.80606 15.0696C6.80604 14.285 6.79168 13.4831 6.77757 12.6947C6.74983 11.1454 6.72302 9.64853 6.80788 8.43806C6.87199 7.52372 7.0037 6.66464 7.29679 6.01425C7.44678 5.68141 7.65681 5.36238 7.96007 5.12467Z"
+              fill="currentColor"
               fill-rule="evenodd"
             />
           </g>

diff --git a/packages/OptionButton/src/option-button.scss b/packages/OptionButton/src/option-button.scss
@@ -29,19 +29,19 @@
         --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;
-        --ids-option-button-icon-circle-fill: #{tokens.$sky-100};
-        --ids-option-button-icon-path-fill: #{tokens.$grey-800};
-        --ids-option-button-icon-stroke: #{tokens.$grey-800};
-        --ids-option-button-icon-circle-fill-hover: #{tokens.$sky-100};
-        --ids-option-button-icon-circle-fill-disabled: #{tokens.$sky-100};
 
         /* Text */
         --ids-option-button-text-container-padding: #{tokens.$space-1} #{tokens.$space-3};
@@ -67,32 +67,32 @@
 
         /* Hover */
         --ids-option-button-hover-border-color: var(--hop-neutral-border-hover);
-        --ids-option-button-hover-background-color: var(--hop-neutral-surface-weak-hover);
+        --ids-option-button-hover-background-color: var(--hop-neutral-surface-hover);
 
         /* Checked */
         --ids-option-button-checked-box-shadow: none;
         --ids-option-button-checked-border-color: var(--hop-neutral-border-active);
-        --ids-option-button-checked-background-color: var(--hop-neutral-surface-weak-hover);
+        --ids-option-button-checked-background-color: var(--hop-neutral-surface-weak-active);
         --ids-option-button-checked-outline: 0.125rem solid var(--hop-neutral-border-active);
         --ids-option-button-checked-outline-offset: -0.125rem;
 
         /* Disabled */
         --ids-option-button-icon-container-disabled-background: transparent;
         --ids-option-button-border-color-disabled: var(--hop-neutral-border-disabled);
         --ids-option-button-background-color-disabled: var(--hop-neutral-surface-disabled);
+        --ids-option-button-text-color-disabled: var(--hop-neutral-text-disabled);
 
         /* Icon */
         --ids-option-button-icon-container-background: transparent;
         --ids-option-button-icon-container-height: 3.5rem;
         --ids-option-button-icon-container-width: 2.5rem;
+        --ids-option-button-icon-background: var(--hop-decorative-option7-surface);
         --ids-option-button-icon-background-disabled: transparent;
+        --ids-option-button-icon-background-hover: var(--hop-decorative-option7-surface-hover);
+        --ids-option-button-icon-color: var(--hop-decorative-option7-icon);
+        --ids-option-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
         --ids-option-button-icon-width: 2.5rem;
         --ids-option-button-icon-height: 2.5rem;
-        --ids-option-button-icon-circle-fill: #F0EAE3; // will be decorative-option7-surface
-        --ids-option-button-icon-path-fill: #2A2620; // will be decorative-option7-icon
-        --ids-option-button-icon-stroke: #2A2620; // will be decorative-option7-icon
-        --ids-option-button-icon-circle-fill-hover: #E5DED6; // will be decorative-option7-surface-strong
-        --ids-option-button-icon-circle-fill-disabled: transparent;
 
         /* Text */
         --ids-option-button-text-container-padding: var(--hop-space-inset-sm) var(--hop-space-inset-lg) var(--hop-space-inset-sm) var(--hop-space-inset-sm);
@@ -149,20 +149,16 @@
             padding: var(--ids-option-button-padding);
         }
 
-        &__radio:hover:not(:disabled) ~ &__label {
+        &:hover:not(.ids-option-button--disabled, .ids-option-button--checked) &__label {
             border-color: var(--ids-option-button-hover-border-color);
             background-color: var(--ids-option-button-hover-background-color);
         }
 
-        &__radio:hover:not(:disabled) ~ &__label &__icon-circle {
-            fill: var(--ids-option-button-icon-circle-fill-hover);
-        }
-
         &__radio:focus ~ &__label {
             box-shadow: var(--ids-option-focus);
         }
 
-        &__radio:checked ~ &__label {
+        &--checked &__label {
             background-color: var(--ids-option-button-checked-background-color);
             border: var(--ids-option-button-border-dimension) solid var(--ids-option-button-checked-border-color);
             box-shadow: var(--ids-option-button-checked-box-shadow);
@@ -171,23 +167,22 @@
             outline-offset: var(--ids-option-button-checked-outline-offset);
         }
 
-        &__radio:checked ~ &__label &__icon-circle {
-            fill: var(--ids-option-button-icon-circle-fill-hover);
-        }
-
-        &__radio:disabled ~ &__label {
+        &--disabled &__label {
             border: var(--ids-option-button-border-dimension) solid var(--ids-option-button-border-color-disabled);
             box-shadow: none;
             cursor: not-allowed;
             outline: none;
             background-color: var(--ids-option-button-background-color-disabled);
         }
 
-        &__radio:disabled ~ &__label &__icon-circle {
-            fill: var(--ids-option-button-icon-circle-fill-disabled);
+        &--checked.ids-option-button--disabled &__label {
+            border: var(--ids-option-button-border-dimension) solid var(--ids-option-button-checked-border-color);
+            box-shadow: var(--ids-option-button-checked-box-shadow);
+            outline: var(--ids-option-button-checked-outline);
+            outline-offset: var(--ids-option-button-checked-outline-offset);
         }
 
-        &--unchecked &__radio:checked ~ &__label {
+        &--unchecked.ids-option-button--checked &__label {
             box-shadow: none;
         }
 
@@ -204,40 +199,43 @@
             width: var(--ids-option-button-icon-container-width);
         }
 
-        &__icon-circle {
-            fill: var(--ids-option-button-icon-circle-fill);
+        &--unchecked &__icon-container {
+            @extend %disabled-icon-container;
         }
 
-        &__icon-path {
-            fill: var(--ids-option-button-icon-path-fill);
+        &--checked &__icon-container {
+            @extend %active-icon-container;
         }
 
-        &__icon-stroke {
-            stroke: var(--ids-option-button-icon-stroke);
+        &--disabled &__icon-container,
+        &--unchecked.ids-option-button--checked &__icon-container {
+            @extend %disabled-icon-container;
         }
 
-        &__multiple-choice-icon,
-        &__text-icon,
-        &__option-scale-icon,
-        &__likert-icon {
+        &__icon {
+            color: var(--ids-option-button-icon-color);
             height: var(--ids-option-button-icon-width);
             width: var(--ids-option-button-icon-width);
         }
 
-        &--unchecked &__icon-container {
-            @extend %disabled-icon-container;
+        &--disabled &__icon {
+            color: var(--ids-option-button-icon-color-disabled);
         }
 
-        &__radio:checked ~ &__label &__icon-container {
-            @extend %active-icon-container;
+        &__icon-circle {
+            fill: var(--ids-option-button-icon-background);
         }
 
-        &__radio:disabled ~ &__label &__icon-container,
-        &--unchecked &__radio:checked ~ &__label &__icon-container {
-            @extend %disabled-icon-container;
+        &:hover:not(.ids-option-button--disabled, .ids-option-button--checked) &__icon-circle {
+            fill: var(--ids-option-button-icon-background-hover);
+        }
+
+        &--checked &__icon-circle {
+            fill: var(--ids-option-button-icon-background-hover);
         }
 
-        &__icon-container svg.disabled [fill$='#{tokens.$sky-100}'] {
+
+        &--disabled &__icon-circle {
             fill: var(--ids-option-button-icon-background-disabled);
         }
 
@@ -254,6 +252,10 @@
             line-height: var(--ids-option-button-text-line-height);
 
             @extend %ellipsis;
+
+            .ids-option-button--disabled & {
+                color: var(--ids-option-button-text-color-disabled);
+            }
         }
 
         &__desc {