-
Notifications
You must be signed in to change notification settings - Fork 2.7k
[MM-27164] Picture Selector Common Component #5973
Changes from 50 commits
6308348
a2450a8
d2bdbac
6f376e3
776823e
630cc19
afa668e
7f57467
05521d8
b7d78f1
88df376
b8e7ea8
d62b7ef
6b16a03
60ad53a
d56417c
0027735
839f962
e6e10cd
7376698
c604880
b2dc9c3
6d4aaef
d140a63
c63851c
ba4f642
677dfd2
e47ddf4
70dce26
58fcc44
98628b1
202f215
2904373
f429567
1d8c6c0
0c856a5
8615269
05bfd36
7e2e31a
b76aacb
9ba4b80
9e3507c
cb02d04
3b49a13
999d90e
4e81a1b
9eb0fcc
44600dd
bdf625d
c78b9cb
9896a18
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`components/picture_selector should match snapshot, default picture provided 1`] = ` | ||
<div | ||
className="PictureSelector" | ||
> | ||
<input | ||
accept=".jpg,.png,.bmp" | ||
aria-hidden={true} | ||
className="PictureSelector__input" | ||
data-testid="PictureSelector__input" | ||
onChange={[Function]} | ||
tabIndex={-1} | ||
type="file" | ||
/> | ||
<div | ||
className="PictureSelector__imageContainer" | ||
> | ||
<div | ||
aria-label="Picture selector image" | ||
className="PictureSelector__image" | ||
style={ | ||
Object { | ||
"backgroundImage": "url(undefined)", | ||
} | ||
} | ||
/> | ||
<button | ||
aria-label="Select picture" | ||
className="PictureSelector__selectButton" | ||
data-testid="PictureSelector__selectButton" | ||
onClick={[Function]} | ||
> | ||
<i | ||
className="icon icon-pencil-outline" | ||
/> | ||
</button> | ||
</div> | ||
</div> | ||
`; | ||
|
||
exports[`components/picture_selector should match snapshot, existing picture provided 1`] = ` | ||
<div | ||
className="PictureSelector" | ||
> | ||
<input | ||
accept=".jpg,.png,.bmp" | ||
aria-hidden={true} | ||
className="PictureSelector__input" | ||
data-testid="PictureSelector__input" | ||
onChange={[Function]} | ||
tabIndex={-1} | ||
type="file" | ||
/> | ||
<div | ||
className="PictureSelector__imageContainer" | ||
> | ||
<div | ||
aria-label="Picture selector image" | ||
className="PictureSelector__image" | ||
style={ | ||
Object { | ||
"backgroundImage": "url(undefined)", | ||
} | ||
} | ||
/> | ||
<button | ||
aria-label="Select picture" | ||
className="PictureSelector__selectButton" | ||
data-testid="PictureSelector__selectButton" | ||
onClick={[Function]} | ||
> | ||
<i | ||
className="icon icon-pencil-outline" | ||
/> | ||
</button> | ||
</div> | ||
</div> | ||
`; | ||
|
||
exports[`components/picture_selector should match snapshot, no picture selected 1`] = ` | ||
<div | ||
className="PictureSelector" | ||
> | ||
<input | ||
accept=".jpg,.png,.bmp" | ||
aria-hidden={true} | ||
className="PictureSelector__input" | ||
data-testid="PictureSelector__input" | ||
onChange={[Function]} | ||
tabIndex={-1} | ||
type="file" | ||
/> | ||
<div | ||
className="PictureSelector__imageContainer" | ||
> | ||
<div | ||
aria-label="Picture selector image" | ||
className="PictureSelector__image" | ||
style={ | ||
Object { | ||
"backgroundImage": "url(undefined)", | ||
} | ||
} | ||
/> | ||
<button | ||
aria-label="Select picture" | ||
className="PictureSelector__selectButton" | ||
data-testid="PictureSelector__selectButton" | ||
onClick={[Function]} | ||
> | ||
<i | ||
className="icon icon-pencil-outline" | ||
/> | ||
</button> | ||
</div> | ||
</div> | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
.PictureSelector { | ||
display: flex; | ||
flex-direction: column; | ||
width: 96px; | ||
} | ||
|
||
.PictureSelector__imageContainer { | ||
height: 96px; | ||
position: relative; | ||
} | ||
|
||
.PictureSelector__image { | ||
height: 100%; | ||
border-radius: 100%; | ||
background-position: 50% 50%; | ||
background-size: cover; | ||
border: 1px solid rgba(var(--center-channel-color-rgb), 0.08); | ||
} | ||
|
||
.PictureSelector__selectButton { | ||
position: absolute; | ||
top: 0; | ||
right: 0; | ||
border-radius: 100%; | ||
background: var(--center-channel-bg); | ||
border: 1px solid rgba(var(--center-channel-color-rgb), 0.08); | ||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12); | ||
padding: 4px; | ||
width: 28px; | ||
height: 28px; | ||
display: flex; | ||
justify-content: center; | ||
|
||
i { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we make this more specific with a class? We might end up battling it later with another icon. 🤷♀️ There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is already wrapped around the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. HTML elements do have more specificity and it can still clash if we are using a sibling component. I have had this issue multiple times when trying to add a new element to the RHS for example. I think we should strive to target specificity only with classes. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In general, yes. But I don't think we need to be so specific with this case. There's not going to be any sibling components of |
||
font-size: 16px; | ||
line-height: 18px; | ||
color: rgba(var(--center-channel-color-rgb), 0.56); | ||
align-self: center; | ||
|
||
&::before { | ||
margin: 0; | ||
} | ||
} | ||
|
||
&:hover { | ||
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); | ||
box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.12); | ||
|
||
i { | ||
color: rgba(var(--center-channel-color-rgb), 0.72); | ||
} | ||
} | ||
|
||
&:active { | ||
background: linear-gradient(0deg, rgba(22, 109, 224, 0.08), rgba(22, 109, 224, 0.08)), #FFFFFF; | ||
border: 1px solid rgba(22, 109, 224, 0.16); | ||
|
||
i { | ||
color: var(--button-bg); | ||
} | ||
} | ||
|
||
&:focus { | ||
border: 2px solid #166DE0; | ||
} | ||
} | ||
|
||
.PictureSelector__removeButton { | ||
padding: 0; | ||
border: none; | ||
font-size: 12px; | ||
font-weight: 600; | ||
color: var(--button-bg); | ||
margin-top: 12px; | ||
background-color: transparent; | ||
|
||
&:focus { | ||
text-decoration-line: underline; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: I think we can destructure props