From fe91e91e6f9598eb2fd97227d7ec7f9f0d276d1c Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 12 Oct 2023 17:32:11 +0300 Subject: [PATCH] refactoring: added IconButton --- src/Chip/README.md | 70 +++++++++++++++++++++++++++++--------------- src/Chip/index.scss | 28 +++++++++++------- src/Chip/index.tsx | 29 +++++++++++++++--- src/Chip/mixins.scss | 4 +-- 4 files changed, 91 insertions(+), 40 deletions(-) diff --git a/src/Chip/README.md b/src/Chip/README.md index c98c197c96..93ee9eb745 100644 --- a/src/Chip/README.md +++ b/src/Chip/README.md @@ -16,39 +16,61 @@ notes: | ## Basic Usage ```jsx live -
- New - New -
+ + New + New + ``` ## With Icon Before and After +### Basic Usage ```jsx live -
- New - console.log('Remove Chip')} - > - New - - console.log('Remove Chip')} - disabled - > - New - -
+ + New + alert('onIconAfterClick')} + > + New 1 + + alert('Remove Chip')} + > + New + + alert('onIconBeforeClick')} + onIconAfterClick={() => alert('onIconAfterClick')} + > + New + + alert('onIconAfterClick')} + disabled + > + New + + ``` -## With Icon Before and After +### Inverse Pallete ```jsx live - {iconBefore && (
- + {onIconBeforeClick ? ( + + ) : ( + + )}
)}
- + {onIconAfterClick ? ( + + ) : ( + + )}
)} diff --git a/src/Chip/mixins.scss b/src/Chip/mixins.scss index 9e73404f81..eb36836cc0 100644 --- a/src/Chip/mixins.scss +++ b/src/Chip/mixins.scss @@ -1,4 +1,4 @@ -@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; @@ -6,7 +6,7 @@ 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; } }