Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Avatar and ImageInput components #922

Merged
merged 36 commits into from
Jun 3, 2021
Merged
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
90c4ea6
Create draft Avatar and ImageInput components
May 6, 2021
6e6b5b3
Add SVG placeholders for object and identity variants
May 6, 2021
ac2b34d
Fix linting
May 6, 2021
31fc08b
Update Avatar prop names
May 6, 2021
2ec6862
Wrap Avatar in label in ImageInput instead of passing an as prop
May 10, 2021
42a0ca2
Add icons and logic for removing an image
May 11, 2021
4fcd7a0
Clear file input via ref when the clear button is clicked
May 20, 2021
7ad234b
Add @jsxRuntime pragma to enable usage with React 17
May 20, 2021
d074661
Fix focus state UI bug where the outline appeared behind the ActionBu…
May 20, 2021
2a7d67f
Add active state styles
May 20, 2021
1b96826
Update Avatar docs
May 20, 2021
b93b5ac
Switch Avatar default variant to object
May 21, 2021
bceaece
Add onChange and onClear callbacks with loading and error states
May 25, 2021
0b37bad
Add snapshot tests for Avatar
May 25, 2021
dbb4f8c
Fix types in ImageInput spec to pass CI
May 25, 2021
48fa172
Switch from brightness() to pseudo-elements and clean up styles
May 25, 2021
52f3f0f
Do not call onChange with a falsy file param
May 25, 2021
6817573
Update ImageInput docs
May 25, 2021
a9716ca
Add initial tests for ImageInput
May 25, 2021
e162fe9
Add business logic tests for ImageInput
May 26, 2021
4c0a39e
Rename ImageInput into AvatarInput
May 26, 2021
40f10de
Add test for the logic of clearing an uploaded avatar
May 26, 2021
a73ffc4
Properly export the components
May 27, 2021
b729518
Add pointer-events:none to spinner to fix FF loading UI
May 27, 2021
018f6bf
Address code review feedback
May 27, 2021
c2cf4cf
Optimize SVGs
May 27, 2021
7b825bb
Batched improvements (see commit description)
May 28, 2021
a70e608
Rename AvatarInput back to ImageInput
May 28, 2021
1a6fe89
Move invalid border to inset
May 31, 2021
10d54aa
Move add button out of label element
May 31, 2021
7327509
Add snapshot test for rendering with a custom component
May 31, 2021
0ae1158
Write docs
May 31, 2021
5950ee9
Add changeset
May 31, 2021
5727c31
Address PR review comments
Jun 2, 2021
1d4c229
Make the Avatar's alt prop required
Jun 3, 2021
eb3121e
Update Avatar spec with required alt prop
Jun 3, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Update Avatar spec with required alt prop
Robin Metral committed Jun 3, 2021
commit eb3121eea5be86f6e14b979c697f7f69b0bd0b48
5 changes: 4 additions & 1 deletion packages/circuit-ui/components/Avatar/Avatar.spec.tsx
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ const images = {
};

describe('Avatar', () => {
function renderAvatar(props: AvatarProps = {}, options = {}) {
function renderAvatar(props: AvatarProps = { alt: '' }, options = {}) {
return render(<Avatar {...props} />, options);
}

@@ -40,6 +40,7 @@ describe('Avatar', () => {
it.each(sizes)('should render the %s size', (size) => {
const { container } = renderAvatar({
size,
alt: '',
});
expect(container).toMatchSnapshot();
});
@@ -50,6 +51,7 @@ describe('Avatar', () => {
const { container } = renderAvatar({
src: images[variant],
variant,
alt: '',
});
expect(container).toMatchSnapshot();
},
@@ -58,6 +60,7 @@ describe('Avatar', () => {
it.each(variants)('should render the %s variant placeholder', (variant) => {
const { container } = renderAvatar({
variant,
alt: '',
});
expect(container).toMatchSnapshot();
});