refactoring: added IconButton

openedx · Oct 12, 2023 · fe91e91 · fe91e91
1 parent 39d0253
commit fe91e91
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 40 deletions.
diff --git a/src/Chip/README.md b/src/Chip/README.md
@@ -16,39 +16,61 @@ notes: |
 ## Basic Usage
 
 ```jsx live
-<div>
-  <Chip>New</Chip>
-  <Chip disabled>New</Chip>
-</div>
+<Stack
+    gap={2}
+    direction="horizontal"
+>
+    <Chip>New</Chip>
+    <Chip disabled>New</Chip>
+</Stack>
 ```
 
 ## With Icon Before and After
+### Basic Usage
 
 ```jsx live
-<div>
-  <Chip iconBefore={Person}>New</Chip>
-  <Chip
-    iconBefore={Person}
-    iconAfter={Close}
-    onIconAfterClick={() => console.log('Remove Chip')}
-  >
-    New
-  </Chip>
-  <Chip
-    iconBefore={Person}
-    iconAfter={Close}
-    onIconAfterClick={() => console.log('Remove Chip')}
-    disabled
-  >
-    New
-  </Chip>
-</div>
+<Stack
+    gap={2}
+    direction="horizontal"
+>
+    <Chip iconBefore={Person}>New</Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => alert('onIconAfterClick')}
+    >
+        New 1
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => alert('Remove Chip')}
+    >
+        New
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => alert('onIconBeforeClick')}
+        onIconAfterClick={() => alert('onIconAfterClick')}
+    >
+        New
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => alert('onIconAfterClick')}
+        disabled
+    >
+        New
+    </Chip>
+</Stack>
 ```
 
-## With Icon Before and After
+### Inverse Pallete
 
 ```jsx live
-    <Stack
+<Stack
     className="bg-dark-700 p-4"
     gap={2}
     direction="horizontal"

diff --git a/src/Chip/index.scss b/src/Chip/index.scss
@@ -10,15 +10,7 @@
   cursor: pointer;
   position: relative;
   outline: none;
-  transition: all .3s;
-
-  &.selected {
-    border: 3px solid $primary-500;
-
-    &:focus {
-      border: 1px solid $dark-500;
-    }
-  }
+  //transition: all .3s;
 
   .pgn__chip__label {
     font-size: $font-size-xs;
@@ -56,7 +48,7 @@
     display: flex;
     outline: none;
 
-    .pgn__icon {
+    .btn-icon {
       width: $chip-icon-size;
       height: $chip-icon-size;
     }
@@ -70,6 +62,14 @@
   &.pgn__chip-light {
     background-color: $white;
 
+    &.selected {
+      @include chip-outline($primary-500, -3px, calc($chip-border-radius + .188rem), 3px);
+
+      &:focus {
+        border: 1px solid $dark-500;
+      }
+    }
+
     .pgn__chip__label {
       color: $primary-700;
     }
@@ -91,6 +91,14 @@
   &.pgn__chip-dark {
     background-color: $primary-300;
 
+    &.selected {
+      @include chip-outline($white, -3px, calc($chip-border-radius + .188rem), 3px);
+
+      &:focus {
+        border: 1px solid $white;
+      }
+    }
+
     .pgn__chip__label {
       color: $white;
     }

diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 // @ts-ignore
 import Icon from '../Icon';
+// @ts-ignore
+import IconButton from '../IconButton';
 
 const STYLE_VARIANTS = [
   'light',
@@ -43,8 +45,10 @@ const Chip = React.forwardRef(({
 
   return (
     <div
-      tabIndex="0"
+      tabIndex={0}
+      role="button"
       onClick={handleClick}
+      onKeyPress={handleClick}
       className={classNames(
         CHIP_PGN_CLASS,
         `pgn__chip-${variant}`,
@@ -56,12 +60,21 @@ const Chip = React.forwardRef(({
     >
       {iconBefore && (
         <div
-          className={classNames('pgn__chip__icon-before')}
+          className={classNames('pgn__chip__icon-before', { active: onIconBeforeClick })}
+          role="button"
           onClick={onIconBeforeClick}
           onKeyPress={onIconBeforeClick}
           tabIndex={disabled ? -1 : 0}
         >
-          <Icon src={iconBefore} />
+          {onIconBeforeClick ? (
+            <IconButton
+              src={iconBefore}
+              iconAs={Icon}
+              alt="Close"
+            />
+          ) : (
+            <Icon src={iconBefore} />
+          )}
         </div>
       )}
       <div
@@ -80,7 +93,15 @@ const Chip = React.forwardRef(({
           onKeyPress={onIconAfterClick}
           tabIndex={disabled ? -1 : 0}
         >
-          <Icon src={iconAfter} />
+          {onIconAfterClick ? (
+            <IconButton
+              src={iconAfter}
+              iconAs={Icon}
+              alt="Close"
+            />
+          ) : (
+            <Icon src={iconAfter} />
+          )}
         </div>
       )}
     </div>

diff --git a/src/Chip/mixins.scss b/src/Chip/mixins.scss
@@ -1,12 +1,12 @@
-@mixin chip-outline($ring-color: $white, $distance-to-border: 0, $border-radius: 50%) {
+@mixin chip-outline($ring-color: $white, $distance-to-border: 0, $border-radius: 50%, $border-width: .125rem) {
   &:before {
     content: '';
     position: absolute;
     top: $distance-to-border;
     right: $distance-to-border;
     bottom: $distance-to-border;
     left: $distance-to-border;
-    border: solid .125rem $ring-color;
+    border: solid $border-width $ring-color;
     border-radius: $border-radius;
   }
 }