refactor: styles refactoring

openedx · Oct 16, 2023 · a79c5b5 · a79c5b5
1 parent fe91e91
commit a79c5b5
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 85 deletions.
diff --git a/src/Chip/README.md b/src/Chip/README.md
@@ -37,29 +37,29 @@ notes: |
     <Chip
         iconBefore={Person}
         iconAfter={Close}
-        onIconAfterClick={() => alert('onIconAfterClick')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
     >
         New 1
     </Chip>
     <Chip
         iconBefore={Person}
         iconAfter={Close}
-        onIconBeforeClick={() => alert('Remove Chip')}
+        onIconBeforeClick={() => console.log('Remove Chip')}
     >
         New
     </Chip>
     <Chip
         iconBefore={Person}
         iconAfter={Close}
-        onIconBeforeClick={() => alert('onIconBeforeClick')}
-        onIconAfterClick={() => alert('onIconAfterClick')}
+        onIconBeforeClick={() => console.log('onIconBeforeClick')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
     >
         New
     </Chip>
     <Chip
         iconBefore={Person}
         iconAfter={Close}
-        onIconAfterClick={() => alert('onIconAfterClick')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
         disabled
     >
         New
@@ -80,15 +80,32 @@ notes: |
         variant="dark"
         iconBefore={Person}
         iconAfter={Close}
-        onIconAfterClick={() => console.log('Remove Chip')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New 1
+    </Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('Remove Chip')}
+    >
+        New
+    </Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('onIconBeforeClick')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
     >
         New
     </Chip>
     <Chip
         variant="dark"
         iconBefore={Person}
         iconAfter={Close}
-        onIconAfterClick={() => console.log('Remove Chip')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
         disabled
     >
         New

diff --git a/src/Chip/index.scss b/src/Chip/index.scss
@@ -10,7 +10,7 @@
   cursor: pointer;
   position: relative;
   outline: none;
-  //transition: all .3s;
+  transition: all .3s;
 
   .pgn__chip__label {
     font-size: $font-size-xs;
@@ -54,7 +54,6 @@
     }
 
     &.active {
-      position: relative;
       border-radius: 50%;
     }
   }
@@ -70,17 +69,51 @@
       }
     }
 
-    .pgn__chip__label {
-      color: $primary-700;
-    }
-
     &:hover {
-      @include chip-hover($dark-500, $white);
+      background-color: $dark-500;
+      border-color: $dark-500;
+
+      .pgn__chip__label {
+        color: $white;
+      }
+
+      .pgn__chip__icon-before,
+      .pgn__chip__icon-after {
+        .pgn__icon {
+          color: $white;
+        }
+
+        &.active {
+          &:hover .btn-icon .pgn__icon {
+              color: $dark-500;
+          }
+
+          .btn-icon:focus {
+            .pgn__icon {
+              border-color: $white;
+            }
+
+            &:hover .pgn__icon {
+              border-color: $white;
+              background-color: $white;
+              color: $dark-500;
+            }
+          }
+        }
+      }
     }
 
     .pgn__chip__icon-before,
     .pgn__chip__icon-after {
-      @include chip-icon-states($primary-700, $white);
+      .pgn__icon {
+        color: $primary-700;
+        border: 2px solid transparent;
+      }
+
+      &.active .btn-icon:focus .pgn__icon {
+        border: 2px solid $dark-500;
+        border-radius: 50%;
+      }
     }
 
     &:focus {
@@ -104,12 +137,48 @@
     }
 
     &:hover {
-      @include chip-hover($white, $primary-500);
+      background-color: $white;
+      border-color: $white;
+
+      .pgn__chip__label {
+        color: $primary-500;
+      }
+
+      .pgn__chip__icon-before,
+      .pgn__chip__icon-after {
+        .pgn__icon {
+          color: $primary-500;
+          border-radius: 50%;
+        }
+
+        &.active {
+          &:hover .btn-icon .pgn__icon {
+            background-color: $primary-500;
+            color: $white;
+          }
+
+          .btn-icon:focus .pgn__icon {
+            border: 2px solid $primary-500;
+
+            &:hover {
+              background-color: $primary-500;
+              color: $white;
+            }
+          }
+        }
+      }
     }
 
     .pgn__chip__icon-before,
     .pgn__chip__icon-after {
-      @include chip-icon-states($white, $primary-500);
+      .pgn__icon {
+        color: $white;
+        border: 2px solid transparent;
+      }
+
+      &.active .btn-icon:focus .pgn__icon {
+        border: 2px solid transparent;
+      }
     }
 
     &:focus {

diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
@@ -59,18 +59,15 @@ const Chip = React.forwardRef(({
       {...props}
     >
       {iconBefore && (
-        <div
-          className={classNames('pgn__chip__icon-before', { active: onIconBeforeClick })}
-          role="button"
-          onClick={onIconBeforeClick}
-          onKeyPress={onIconBeforeClick}
-          tabIndex={disabled ? -1 : 0}
-        >
+        <div className={classNames('pgn__chip__icon-before', { active: onIconBeforeClick })}>
           {onIconBeforeClick ? (
             <IconButton
               src={iconBefore}
+              onClick={onIconBeforeClick}
+              onKeyPress={onIconBeforeClick}
               iconAs={Icon}
-              alt="Close"
+              alt="Chip icon before"
+              invertColors
             />
           ) : (
             <Icon src={iconBefore} />
@@ -86,18 +83,15 @@ const Chip = React.forwardRef(({
         {children}
       </div>
       {iconAfter && (
-        <div
-          className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}
-          role="button"
-          onClick={onIconAfterClick}
-          onKeyPress={onIconAfterClick}
-          tabIndex={disabled ? -1 : 0}
-        >
+        <div className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}>
           {onIconAfterClick ? (
             <IconButton
+              onClick={onIconAfterClick}
+              onKeyPress={onIconAfterClick}
               src={iconAfter}
               iconAs={Icon}
-              alt="Close"
+              alt="Chip icon after"
+              invertColors
             />
           ) : (
             <Icon src={iconAfter} />

diff --git a/src/Chip/mixins.scss b/src/Chip/mixins.scss
@@ -10,55 +10,3 @@
     border-radius: $border-radius;
   }
 }
-
-@mixin chip-icon-states($color, $bg) {
-  .pgn__icon {
-    color: $color;
-  }
-
-  &.active {
-    &:hover {
-      background-color: $bg;
-
-      .pgn__icon {
-        color: $color;
-      }
-    }
-
-    &:focus {
-      @include chip-outline($color);
-    }
-
-    &:active .pgn__icon {
-      background-color: darken($bg, 7%);
-      border-radius: 50%;
-    }
-  }
-}
-
-@mixin chip-hover($base-color, $secondary-color) {
-  background-color: $base-color;
-  border-color: $base-color;
-  transition: all .3s;
-
-  .pgn__chip__label {
-    color: $secondary-color;
-  }
-
-  .pgn__chip__icon-before,
-  .pgn__chip__icon-after {
-    .pgn__icon {
-      color: $secondary-color;
-    }
-
-    &.active {
-      &:hover {
-        background-color: $secondary-color;
-      }
-
-      &:focus {
-        @include chip-outline($secondary-color);
-      }
-    }
-  }
-}