Skip to content

Commit 3e544ed

Browse files
rishichawdarishichawda
authored
fix(chip): update chip design (#293)
* fix(chip): fix chip component design 287 * fix(chip): fix chip avatar size
1 parent c4d9397 commit 3e544ed

File tree

3 files changed

+152
-130
lines changed

3 files changed

+152
-130
lines changed

‎lib/avatar/theme.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
display: flex;
2222
justify-content: center;
2323
align-items: center;
24-
font-size: 24px;
24+
font-size: 150%;
2525
font-weight: bold;
2626
color: $secondary-white;
2727
fill: $secondary-white; // if element provided is SVG

‎lib/chip/index.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,11 @@ const Chip = ({
4646
className: classnames(
4747
avatarElement.props.className,
4848
theme[`${size}Avatar`],
49+
theme['chip-avatar'],
4950
),
5051
});
5152
} else if (typeof avatarElement === 'string') {
52-
avatar = <img src={avatarElement} alt="A" className={classnames(theme[`${size}Avatar`])} />;
53+
avatar = <img src={avatarElement} alt="A" className={classnames(theme[`${size}Avatar`], theme['chip-avatar'])} />;
5354
}
5455

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

6667
return (
6768
<Element href="#" className={classes} {...props} onClick={Element === 'a' ? handleChipClick : () => {}}>
68-
{ avatar }
69+
{ avatar !== null ? (
70+
<div className={classnames(theme[`${size}Avatar`], theme['chip-avatar'])}>
71+
{ avatar }
72+
</div>
73+
) : null }
6974
<span className={theme.label}>{ label }</span>
7075
{ deleteIcon }
7176
</Element>

‎lib/chip/theme.module.scss

Lines changed: 144 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,210 +1,227 @@
11
@import '../globals/theme.scss';
2-
32
:local(.chip) {
4-
display: inline-flex;
5-
align-items: center;
6-
justify-content: space-between;
7-
height: auto;
8-
border: 1px solid $secondary-white;
9-
box-sizing: border-box;
10-
&[disabled] {
11-
cursor: not-allowed;
12-
opacity: 0.6;
13-
}
14-
&.avatarMarginLeft {
15-
margin-left: 0.5%;
16-
}
17-
.icon-cross {
3+
display: inline-flex;
4+
align-items: center;
5+
justify-content: space-between;
6+
height: auto;
7+
border: 1px solid $secondary-white;
8+
box-sizing: border-box;
9+
overflow: none;
10+
&[disabled] {
11+
cursor: not-allowed;
12+
opacity: 0.6;
13+
}
14+
.icon-cross {
15+
height: 100%;
16+
width: 100%;
17+
}
18+
}
19+
20+
:local(.chip-avatar) {
1821
height: 100%;
19-
width: 100%;
20-
}
22+
max-width: 2em;
23+
display: flex;
24+
box-sizing: border-box;
25+
align-items: center;
26+
justify-content: center;
27+
* {
28+
height: 100%;
29+
}
30+
img {
31+
height: 100%;
32+
width: auto;
33+
}
2134
}
2235

2336
:local(.clickable) {
24-
cursor: pointer;
25-
text-decoration: none;
37+
cursor: pointer;
38+
text-decoration: none;
2639
}
40+
2741
:local(.label) {
28-
text-transform: capitalize;
29-
padding: 6px 12px;
42+
text-transform: capitalize;
43+
height: 100%;
44+
box-sizing: border-box;
45+
display: flex;
46+
align-items: center;
47+
white-space: nowrap;
48+
padding: 0.5em;
49+
margin: auto;
3050
}
3151

3252
:local(.smallAvatar) {
33-
overflow: hidden;
34-
border-radius: 50%;
35-
max-height: 28px;
36-
max-width: 28px;
37-
object-fit: contain;
38-
margin-left: -2%;
53+
overflow: hidden;
54+
border-radius: 50%;
55+
max-width: 2.5em;
56+
object-fit: contain;
3957
}
58+
4059
:local(.mediumAvatar) {
41-
overflow: hidden;
42-
border-radius: 50%;
43-
max-height: 36px;
44-
max-width: 36px;
45-
object-fit: contain;
46-
margin-left: -2%;
60+
overflow: hidden;
61+
border-radius: 50%;
62+
object-fit: contain;
4763
}
64+
4865
:local(.largeAvatar) {
49-
overflow: hidden;
50-
border-radius: 50%;
51-
max-height: 52px;
52-
max-width: 52px;
53-
object-fit: contain;
54-
margin-left: -2%;
66+
overflow: hidden;
67+
border-radius: 50%;
68+
object-fit: contain;
5569
}
5670

5771
:local(.deleteIcon) {
58-
font-weight: bold;
59-
padding: 2px;
60-
border-radius: 50%;
61-
cursor: pointer;
62-
outline: none;
63-
border: none;
64-
overflow: hidden;
72+
font-weight: bold;
73+
padding: 2px;
74+
border-radius: 50%;
75+
cursor: pointer;
76+
outline: none;
77+
border: none;
78+
overflow: hidden;
6579
}
6680

6781
:local(.smallDelete) {
68-
width: 16px;
69-
height: 16px;
70-
font-size: 10px;
71-
margin: 0 4px;
82+
width: 16px;
83+
height: 16px;
84+
font-size: 10px;
85+
margin: 0 4px;
7286
}
87+
7388
:local(.mediumDelete) {
74-
width: 19px;
75-
height: 19px;
76-
font-size: 12px;
77-
line-height: 16px;
78-
margin: 0 6px;
89+
width: 19px;
90+
height: 19px;
91+
font-size: 12px;
92+
line-height: 16px;
93+
margin: 0 6px;
7994
}
95+
8096
:local(.largeDelete) {
81-
width: 25px;
82-
height: 25px;
83-
font-size: 16px;
84-
line-height: 20px;
85-
margin: 0 8px;
97+
width: 25px;
98+
height: 25px;
99+
font-size: 16px;
100+
line-height: 20px;
101+
margin: 0 8px;
86102
}
87103

88104
:local(.small) {
89-
font-size: 10px;
90-
line-height: 11px;
91-
border-radius: 34px;
92-
padding: 0;
93-
min-width: 55px;
94-
height: 22px;
105+
font-size: 10px;
106+
line-height: 11px;
107+
border-radius: 34px;
108+
padding: 0;
109+
min-width: 55px;
110+
height: 1.8rem;
95111
}
96112

97113
:local(.medium) {
98-
font-size: 16px;
99-
line-height: 19px;
100-
border-radius: 34px;
101-
padding: 0;
102-
min-width: 90px;
103-
height: 30px;
114+
font-size: 16px;
115+
line-height: 19px;
116+
border-radius: 34px;
117+
padding: 0;
118+
min-width: 90px;
119+
height: 2.2rem;
104120
}
105121

106122
:local(.large) {
107-
font-size: 18px;
108-
line-height: 20px;
109-
border-radius: 34px;
110-
padding: 0;
111-
min-width: 105px;
112-
height: 45px;
123+
font-size: 18px;
124+
line-height: 20px;
125+
border-radius: 34px;
126+
padding: 0;
127+
min-width: 105px;
128+
height: 2.5rem;
113129
}
114130

115131
:local(.primary) {
116-
color: $original-white;
117-
background-color: $secondary-violet;
118-
border-color: $secondary-violet;
132+
color: $original-white;
133+
background-color: $secondary-violet;
134+
border-color: $secondary-violet;
119135
}
120136

121137
:local(.secondary) {
122-
color: $original-white;
123-
background-color: $secondary-grey;
124-
border-color: $secondary-grey;
138+
color: $original-white;
139+
background-color: $secondary-grey;
140+
border-color: $secondary-grey;
125141
}
126142

127143
:local(.success) {
128-
color: $original-white;
129-
background-color: $secondary-green;
130-
border-color: $secondary-green;
144+
color: $original-white;
145+
background-color: $secondary-green;
146+
border-color: $secondary-green;
131147
}
132148

133149
:local(.danger) {
134-
color: $original-white;
135-
background-color: $secondary-red;
136-
border-color: $secondary-red;
150+
color: $original-white;
151+
background-color: $secondary-red;
152+
border-color: $secondary-red;
137153
}
138154

139155
:local(.warning) {
140-
color: $secondary-black;
141-
background-color: $secondary-yellow;
142-
border-color: $secondary-yellow;
156+
color: $secondary-black;
157+
background-color: $secondary-yellow;
158+
border-color: $secondary-yellow;
143159
}
144160

145161
:local(.info) {
146-
color: $original-white;
147-
background-color: $secondary-blue;
148-
border-color: $secondary-blue;
162+
color: $original-white;
163+
background-color: $secondary-blue;
164+
border-color: $secondary-blue;
149165
}
150166

151167
:local(.light) {
152-
color: $secondary-black;
153-
background-color: $secondary-white;
154-
border-color: $secondary-white;
168+
color: $secondary-black;
169+
background-color: $secondary-white;
170+
border-color: $secondary-white;
155171
}
156172

157173
:local(.dark) {
158-
color: $original-white;
159-
background-color: $secondary-black;
160-
border-color: $secondary-black;
174+
color: $original-white;
175+
background-color: $secondary-black;
176+
border-color: $secondary-black;
161177
}
162178

163179
/* Outlined */
180+
164181
:local(.primaryOutlined) {
165-
color: $secondary-violet;
166-
background-color: $original-white;
167-
border-color: $secondary-violet;
182+
color: $secondary-violet;
183+
background-color: $original-white;
184+
border-color: $secondary-violet;
168185
}
169186

170187
:local(.secondaryOutlined) {
171-
color: $secondary-grey;
172-
background-color: $original-white;
173-
border-color: $secondary-grey;
188+
color: $secondary-grey;
189+
background-color: $original-white;
190+
border-color: $secondary-grey;
174191
}
175192

176193
:local(.successOutlined) {
177-
color: $secondary-green;
178-
background-color: $original-white;
179-
border-color: $secondary-green;
194+
color: $secondary-green;
195+
background-color: $original-white;
196+
border-color: $secondary-green;
180197
}
181198

182199
:local(.dangerOutlined) {
183-
color: $secondary-red;
184-
background-color: $original-white;
185-
border-color: $secondary-red;
200+
color: $secondary-red;
201+
background-color: $original-white;
202+
border-color: $secondary-red;
186203
}
187204

188205
:local(.warningOutlined) {
189-
color: $secondary-yellow;
190-
background-color: $secondary-black;
191-
border-color: $secondary-yellow;
206+
color: $secondary-yellow;
207+
background-color: $secondary-black;
208+
border-color: $secondary-yellow;
192209
}
193210

194211
:local(.infoOutlined) {
195-
color: $secondary-blue;
196-
background-color: $original-white;
197-
border-color: $secondary-blue;
212+
color: $secondary-blue;
213+
background-color: $original-white;
214+
border-color: $secondary-blue;
198215
}
199216

200217
:local(.lightOutlined) {
201-
color: $secondary-white;
202-
background-color: transparent;
203-
border-color: $secondary-white;
218+
color: $secondary-white;
219+
background-color: transparent;
220+
border-color: $secondary-white;
204221
}
205222

206223
:local(.darkOutlined) {
207-
color: $secondary-black;
208-
background-color: $original-white;
209-
border-color: $secondary-black;
210-
}
224+
color: $secondary-black;
225+
background-color: $original-white;
226+
border-color: $secondary-black;
227+
}

0 commit comments

Comments
 (0)