Skip to content

Conversation

@QuintonC
Copy link
Contributor

WHY are these changes introduced?

Fixes #7021

WHAT is this pull request doing?

This resolves an issue that is present with square Avatar components. The issue is that the Avatar and Image classes were defaulting to the rounded border-radius rather than the expected border radius given the shape.

The shape{Round || Square} class instead sets the border-radius value and the Avatar and Image classes inherit the border-radius from their parent component.

Before After
Screen Shot 2022-08-25 at 11 31 02 AM Screen Shot 2022-08-25 at 11 31 34 AM

How to 🎩

Visit Storybook and look at the Square component with an external URL.

🎩 checklist

  • Tested on mobile
    • Not entirely sure this is necessary since this is a simple CSS regression. If you feel strongly against this decision I'm not opposed to including testing on mobile devices. I've tested with Chrome, Firefox, and Safari. Edge is built on Chromium 🤷
  • Tested on multiple browsers
  • Tested for accessibility N/A
  • Updated the component's README.md with documentation changes N/A
  • Tophatted documentation changes in the style guide N/A

@QuintonC QuintonC requested a review from a team August 25, 2022 16:36
@QuintonC QuintonC self-assigned this Aug 25, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Aug 25, 2022

size-limit report 📦

Path Size
polaris-react-cjs 200.77 KB (+0.02% 🔺)
polaris-react-esm 128.94 KB (+0.01% 🔺)
polaris-react-esnext 183.05 KB (+0.02% 🔺)
polaris-react-css 40.61 KB (+0.02% 🔺)

Copy link
Contributor

@clarkjennings clarkjennings left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎩 and approach LGTM

Copy link
Member

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good to me 👍

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
@QuintonC
Copy link
Contributor Author

QuintonC commented Aug 25, 2022

/shipit

Creature of habit I suppose.

@QuintonC QuintonC merged commit 716956d into main Aug 25, 2022
@QuintonC QuintonC deleted the bugfix-avatar-style branch August 25, 2022 17:58
@ghost
Copy link

ghost commented Aug 25, 2022

🎉 Thanks for your contribution to Polaris!

@github-actions github-actions bot mentioned this pull request Aug 25, 2022
nickpresta pushed a commit that referenced this pull request Aug 31, 2022
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.


# Releases
## @shopify/polaris-icons@6.0.0

### Major Changes

-   [#7012](#7012) [`bd00ef4ed`](bd00ef4) Thanks [@leileu](https://github.com/leileu)! - Adding Metafields icon to polaris

### Minor Changes

-   [#7013](#7013) [`1e0645f33`](1e0645f) Thanks [@jpmarra](https://github.com/jpmarra)! - Added IdentityCard icon


-   [#7028](#7028) [`635bcfeb7`](635bcfe) Thanks [@joelzwarrington](https://github.com/joelzwarrington)! - add vertical viewport icon variations

## @shopify/polaris@10.1.0

### Minor Changes

-   [#6976](#6976) [`ae7345f0c`](ae7345f) Thanks [@tylernoseworthy](https://github.com/tylernoseworthy)! - - Added a `fixedFirstColumns` prop to `DataTable` so that multiple columns can be fixed
    -   Deprecated the `DataTable` `fixedFirstColumn` prop


-   [#7043](#7043) [`60086a61f`](60086a6) Thanks [@philschoefer](https://github.com/philschoefer)! - Updates to `DataTable`

    -   Fixed `DataTable` cell content not wrapping when the `truncate` prop is `false`
    -   Added support for setting the `DataTable` `truncate` prop without having to set the `fixedFirstColumns` prop

### Patch Changes

-   [#7022](#7022) [`716956df6`](716956d) Thanks [@QuintonC](https://github.com/QuintonC)! - Fixed visual bug for avatar shape prop


-   [#7038](#7038) [`d1a33d8b0`](d1a33d8) Thanks [@kyledurand](https://github.com/kyledurand)! - Applied default background color to image avatar


-   [#6993](#6993) [`fa840e4a9`](fa840e4) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed deprecation from Layout.AnnotatedSection


-   [#7003](#7003) [`2b5f7d0fc`](2b5f7d0) Thanks [@mrcthms](https://github.com/mrcthms)! - Fix visual bug for sortable, selectable index table headings

-   Updated dependencies \[[`bd00ef4ed`](bd00ef4), [`1e0645f33`](1e0645f), [`635bcfeb7`](635bcfe)]:
    -   @shopify/polaris-icons@6.0.0

## polaris.shopify.com@0.14.0

### Minor Changes

-   [#7018](#7018) [`a8087a358`](a8087a3) Thanks [@alex-page](https://github.com/alex-page)! - Generate assets once with a seperate script


-   [#6934](#6934) [`793e26f4d`](793e26f) Thanks [@alex-page](https://github.com/alex-page)! - Use @shopify/polaris-icons instead of /icons and copy-icons


-   [#7049](#7049) [`7a548a00a`](7a548a0) Thanks [@alex-page](https://github.com/alex-page)! - Move search to the server side

### Patch Changes

-   [#7015](#7015) [`e612cbccb`](e612cbc) Thanks [@lgriffee](https://github.com/lgriffee)! - Update navigation column in breakpoints table for MD breakpoint


-   [#7027](#7027) [`a805116a6`](a805116) Thanks [@sarahill](https://github.com/sarahill)! - Updated design guidance for typography

-   Updated dependencies \[[`716956df6`](716956d), [`ae7345f0c`](ae7345f), [`60086a61f`](60086a6), [`bd00ef4ed`](bd00ef4), [`d1a33d8b0`](d1a33d8), [`fa840e4a9`](fa840e4), [`2b5f7d0fc`](2b5f7d0), [`1e0645f33`](1e0645f), [`635bcfeb7`](635bcfe)]:
    -   @shopify/polaris@10.1.0
    -   @shopify/polaris-icons@6.0.0

## polaris-for-figma@0.0.11

### Patch Changes

-   Updated dependencies \[[`716956df6`](716956d), [`ae7345f0c`](ae7345f), [`60086a61f`](60086a6), [`d1a33d8b0`](d1a33d8), [`fa840e4a9`](fa840e4), [`2b5f7d0fc`](2b5f7d0)]:
    -   @shopify/polaris@10.1.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Avatar shape incorrectly classes the wrong DOM element

3 participants