Skip to content

Commit

Permalink
fix(chip): update chip design (#293)
Browse files Browse the repository at this point in the history 
* fix(chip): fix chip component design

287

* fix(chip): fix chip avatar size
  • Loading branch information
@rishichawda
rishichawda authored Jan 2, 2019
1 parent c4d9397 commit 3e544ed
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 130 deletions.
2 changes: 1 addition & 1 deletion lib/avatar/theme.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-size: 150%;
font-weight: bold;
color: $secondary-white;
fill: $secondary-white; // if element provided is SVG
Expand Down
9 changes: 7 additions & 2 deletions lib/chip/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,11 @@ const Chip = ({
className: classnames(
avatarElement.props.className,
theme[`${size}Avatar`],
theme['chip-avatar'],
),
});
} else if (typeof avatarElement === 'string') {
avatar = <img src={avatarElement} alt="A" className={classnames(theme[`${size}Avatar`])} />;
avatar = <img src={avatarElement} alt="A" className={classnames(theme[`${size}Avatar`], theme['chip-avatar'])} />;
}

/* DeleteIcon related block */
Expand All @@ -65,7 +66,11 @@ const Chip = ({

return (
<Element href="#" className={classes} {...props} onClick={Element === 'a' ? handleChipClick : () => {}}>
{ avatar }
{ avatar !== null ? (
<div className={classnames(theme[`${size}Avatar`], theme['chip-avatar'])}>
{ avatar }
</div>
) : null }
<span className={theme.label}>{ label }</span>
{ deleteIcon }
</Element>
Expand Down
271 changes: 144 additions & 127 deletions lib/chip/theme.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,210 +1,227 @@
@import '../globals/theme.scss';

:local(.chip) {
display: inline-flex;
align-items: center;
justify-content: space-between;
height: auto;
border: 1px solid $secondary-white;
box-sizing: border-box;
&[disabled] {
cursor: not-allowed;
opacity: 0.6;
}
&.avatarMarginLeft {
margin-left: 0.5%;
}
.icon-cross {
display: inline-flex;
align-items: center;
justify-content: space-between;
height: auto;
border: 1px solid $secondary-white;
box-sizing: border-box;
overflow: none;
&[disabled] {
cursor: not-allowed;
opacity: 0.6;
}
.icon-cross {
height: 100%;
width: 100%;
}
}

:local(.chip-avatar) {
height: 100%;
width: 100%;
}
max-width: 2em;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
* {
height: 100%;
}
img {
height: 100%;
width: auto;
}
}

:local(.clickable) {
cursor: pointer;
text-decoration: none;
cursor: pointer;
text-decoration: none;
}

:local(.label) {
text-transform: capitalize;
padding: 6px 12px;
text-transform: capitalize;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
white-space: nowrap;
padding: 0.5em;
margin: auto;
}

:local(.smallAvatar) {
overflow: hidden;
border-radius: 50%;
max-height: 28px;
max-width: 28px;
object-fit: contain;
margin-left: -2%;
overflow: hidden;
border-radius: 50%;
max-width: 2.5em;
object-fit: contain;
}

:local(.mediumAvatar) {
overflow: hidden;
border-radius: 50%;
max-height: 36px;
max-width: 36px;
object-fit: contain;
margin-left: -2%;
overflow: hidden;
border-radius: 50%;
object-fit: contain;
}

:local(.largeAvatar) {
overflow: hidden;
border-radius: 50%;
max-height: 52px;
max-width: 52px;
object-fit: contain;
margin-left: -2%;
overflow: hidden;
border-radius: 50%;
object-fit: contain;
}

:local(.deleteIcon) {
font-weight: bold;
padding: 2px;
border-radius: 50%;
cursor: pointer;
outline: none;
border: none;
overflow: hidden;
font-weight: bold;
padding: 2px;
border-radius: 50%;
cursor: pointer;
outline: none;
border: none;
overflow: hidden;
}

:local(.smallDelete) {
width: 16px;
height: 16px;
font-size: 10px;
margin: 0 4px;
width: 16px;
height: 16px;
font-size: 10px;
margin: 0 4px;
}

:local(.mediumDelete) {
width: 19px;
height: 19px;
font-size: 12px;
line-height: 16px;
margin: 0 6px;
width: 19px;
height: 19px;
font-size: 12px;
line-height: 16px;
margin: 0 6px;
}

:local(.largeDelete) {
width: 25px;
height: 25px;
font-size: 16px;
line-height: 20px;
margin: 0 8px;
width: 25px;
height: 25px;
font-size: 16px;
line-height: 20px;
margin: 0 8px;
}

:local(.small) {
font-size: 10px;
line-height: 11px;
border-radius: 34px;
padding: 0;
min-width: 55px;
height: 22px;
font-size: 10px;
line-height: 11px;
border-radius: 34px;
padding: 0;
min-width: 55px;
height: 1.8rem;
}

:local(.medium) {
font-size: 16px;
line-height: 19px;
border-radius: 34px;
padding: 0;
min-width: 90px;
height: 30px;
font-size: 16px;
line-height: 19px;
border-radius: 34px;
padding: 0;
min-width: 90px;
height: 2.2rem;
}

:local(.large) {
font-size: 18px;
line-height: 20px;
border-radius: 34px;
padding: 0;
min-width: 105px;
height: 45px;
font-size: 18px;
line-height: 20px;
border-radius: 34px;
padding: 0;
min-width: 105px;
height: 2.5rem;
}

:local(.primary) {
color: $original-white;
background-color: $secondary-violet;
border-color: $secondary-violet;
color: $original-white;
background-color: $secondary-violet;
border-color: $secondary-violet;
}

:local(.secondary) {
color: $original-white;
background-color: $secondary-grey;
border-color: $secondary-grey;
color: $original-white;
background-color: $secondary-grey;
border-color: $secondary-grey;
}

:local(.success) {
color: $original-white;
background-color: $secondary-green;
border-color: $secondary-green;
color: $original-white;
background-color: $secondary-green;
border-color: $secondary-green;
}

:local(.danger) {
color: $original-white;
background-color: $secondary-red;
border-color: $secondary-red;
color: $original-white;
background-color: $secondary-red;
border-color: $secondary-red;
}

:local(.warning) {
color: $secondary-black;
background-color: $secondary-yellow;
border-color: $secondary-yellow;
color: $secondary-black;
background-color: $secondary-yellow;
border-color: $secondary-yellow;
}

:local(.info) {
color: $original-white;
background-color: $secondary-blue;
border-color: $secondary-blue;
color: $original-white;
background-color: $secondary-blue;
border-color: $secondary-blue;
}

:local(.light) {
color: $secondary-black;
background-color: $secondary-white;
border-color: $secondary-white;
color: $secondary-black;
background-color: $secondary-white;
border-color: $secondary-white;
}

:local(.dark) {
color: $original-white;
background-color: $secondary-black;
border-color: $secondary-black;
color: $original-white;
background-color: $secondary-black;
border-color: $secondary-black;
}

/* Outlined */

:local(.primaryOutlined) {
color: $secondary-violet;
background-color: $original-white;
border-color: $secondary-violet;
color: $secondary-violet;
background-color: $original-white;
border-color: $secondary-violet;
}

:local(.secondaryOutlined) {
color: $secondary-grey;
background-color: $original-white;
border-color: $secondary-grey;
color: $secondary-grey;
background-color: $original-white;
border-color: $secondary-grey;
}

:local(.successOutlined) {
color: $secondary-green;
background-color: $original-white;
border-color: $secondary-green;
color: $secondary-green;
background-color: $original-white;
border-color: $secondary-green;
}

:local(.dangerOutlined) {
color: $secondary-red;
background-color: $original-white;
border-color: $secondary-red;
color: $secondary-red;
background-color: $original-white;
border-color: $secondary-red;
}

:local(.warningOutlined) {
color: $secondary-yellow;
background-color: $secondary-black;
border-color: $secondary-yellow;
color: $secondary-yellow;
background-color: $secondary-black;
border-color: $secondary-yellow;
}

:local(.infoOutlined) {
color: $secondary-blue;
background-color: $original-white;
border-color: $secondary-blue;
color: $secondary-blue;
background-color: $original-white;
border-color: $secondary-blue;
}

:local(.lightOutlined) {
color: $secondary-white;
background-color: transparent;
border-color: $secondary-white;
color: $secondary-white;
background-color: transparent;
border-color: $secondary-white;
}

:local(.darkOutlined) {
color: $secondary-black;
background-color: $original-white;
border-color: $secondary-black;
}
color: $secondary-black;
background-color: $original-white;
border-color: $secondary-black;
}

0 comments on commit 3e544ed

Please sign in to comment.