Skip to content

[Avatar] Fix initials overflowing when round #9295

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
May 31, 2023
Merged

[Avatar] Fix initials overflowing when round #9295

merged 1 commit into from
May 31, 2023

Conversation

@chloerice
Copy link
Member

@chloerice chloerice commented May 25, 2023 •
edited
Loading

WHY are these changes introduced?

Avatars with initials can overflow when the letters are wide, the worst case is "WW"

WHAT is this pull request doing?

This PR lowers the font-size of the initial text in round avatars to the same sizes of the square avatar initials.

Before After
Screenshot 2023-05-25 at 7 38 28 PM Screenshot 2023-05-25 at 7 36 46 PM
Screenshot 2023-05-25 at 7 38 19 PM Screenshot 2023-05-25 at 7 37 04 PM

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx: 
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

@chloerice chloerice requested review from aveline, raschin and sarahill May 25, 2023 23:44
@chloerice chloerice added the Bug Something is broken and not working as intended in the system. label May 25, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 25, 2023 •
edited
Loading

size-limit report 📦

Path Size
polaris-react-cjs 243.03 KB (0%)
polaris-react-esm 157.33 KB (0%)
polaris-react-esnext 219.81 KB (-0.01% 🔽)
polaris-react-css 47.44 KB (-0.02% 🔽)

@chloerice chloerice force-pushed the fix-avatar-initials branch from 5f5bc35 to db21490 Compare May 25, 2023 23:59
@chloerice chloerice merged commit 7e21fe0 into main May 31, 2023
@chloerice chloerice deleted the fix-avatar-initials branch May 31, 2023 00:13
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request May 31, 2023
Merged
alex-page pushed a commit that referenced this pull request Jun 5, 2023
@shopify-github-actions-access @github-actions
Version Packages (#9308)
a5cf62c 
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@11.1.0

### Minor Changes

- [#9269](#9269)
[`bf3bc75a1`](bf3bc75)
Thanks [@nat-king](https://github.com/nat-king)! - Added optional
`onAddFilterClick` callback prop to the indexFilters component

### Patch Changes

- [#9295](#9295)
[`7e21fe093`](7e21fe0)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `initials`
overflowing when `Avatar` is round


- [#9343](#9343)
[`ae3208332`](ae32083)
Thanks [@qt314](https://github.com/qt314)! - Alphabetized locale files


- [#9314](#9314)
[`e7d836819`](e7d8368)
Thanks [@FCalabria](https://github.com/FCalabria)! - Removed focus
styles on TextField while disabled


- [#9223](#9223)
[`221426aaf`](221426a)
Thanks [@aveline](https://github.com/aveline)! - Deprecated `external`
prop in `Link` component


- [#9229](#9229)
[`821535820`](8215358)
Thanks [@aeperea](https://github.com/aeperea)! - Tabs update disabled
state


- [#9323](#9323)
[`cd43c8b47`](cd43c8b)
Thanks [@qt314](https://github.com/qt314)! - Added internationalized
accessibility label to Banner dismiss button


- [#9263](#9263)
[`a3f3462a6`](a3f3462)
Thanks [@mattkubej](https://github.com/mattkubej)! - Protect border
radius of `LegacyCard` with overflow clip


- [#9273](#9273)
[`e823538ad`](e823538)
Thanks [@aishad](https://github.com/aishad)! - Fixed inline padding on
Modal Footer

## @shopify/polaris-cli@0.2.2



## polaris.shopify.com@0.55.0

### Minor Changes

- [#9311](#9311)
[`b6f2d7928`](b6f2d79)
Thanks [@lgriffee](https://github.com/lgriffee)! - Created a "What's
new" page for v11 token changes.

### Patch Changes

- [#8840](#8840)
[`a7569b7f5`](a7569b7)
Thanks [@alex-page](https://github.com/alex-page)! - Updated Colors page
with v11 content

- Updated dependencies
\[[`7e21fe093`](7e21fe0),
[`ae3208332`](ae32083),
[`e7d836819`](e7d8368),
[`221426aaf`](221426a),
[`821535820`](8215358),
[`cd43c8b47`](cd43c8b),
[`a3f3462a6`](a3f3462),
[`e823538ad`](e823538),
[`bf3bc75a1`](bf3bc75)]:
    -   @shopify/polaris@11.1.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@chloerice @juzser
[Avatar] Fix initials overflowing when round (Shopify#9295)
b932d07 
### WHY are these changes introduced?

Avatars with initials can overflow when the letters are wide, the worst
case is "WW"

### WHAT is this pull request doing?

This PR lowers the font-size of the initial text in round avatars to the
same sizes of the square avatar initials.

| Before | After |
|--------|--------|
| <img width="62" alt="Screenshot 2023-05-25 at 7 38 28 PM"
src="https://github.com/Shopify/polaris/assets/18447883/9c48af3c-2711-42dd-9ed0-bfd2cb1c9330">
|<img width="66" alt="Screenshot 2023-05-25 at 7 36 46 PM"
src="https://github.com/Shopify/polaris/assets/18447883/0da6afa6-1025-47fb-ab5b-d6a2d2fa1700">
|
| <img width="92" alt="Screenshot 2023-05-25 at 7 38 19 PM"
src="https://github.com/Shopify/polaris/assets/18447883/9410c39b-8154-4997-bd9f-22f6fc671c6c">
| <img width="76" alt="Screenshot 2023-05-25 at 7 37 04 PM"
src="https://github.com/Shopify/polaris/assets/18447883/97de1ee6-cb2b-4dc0-bb5f-bd9d25681bad">
|

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experimen
<img width="76" alt="Screenshot 2023-05-25 at 7 37 04 PM"
src="https://github.com/Shopify/polaris/assets/18447883/e60eddfa-3335-4f31-a6c4-c6c3fca1fe41">
t with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#9308)
8aaa3f5 
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@11.1.0

### Minor Changes

- [Shopify#9269](Shopify#9269)
[`bf3bc75a1`](Shopify@bf3bc75)
Thanks [@nat-king](https://github.com/nat-king)! - Added optional
`onAddFilterClick` callback prop to the indexFilters component

### Patch Changes

- [Shopify#9295](Shopify#9295)
[`7e21fe093`](Shopify@7e21fe0)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `initials`
overflowing when `Avatar` is round


- [Shopify#9343](Shopify#9343)
[`ae3208332`](Shopify@ae32083)
Thanks [@qt314](https://github.com/qt314)! - Alphabetized locale files


- [Shopify#9314](Shopify#9314)
[`e7d836819`](Shopify@e7d8368)
Thanks [@FCalabria](https://github.com/FCalabria)! - Removed focus
styles on TextField while disabled


- [Shopify#9223](Shopify#9223)
[`221426aaf`](Shopify@221426a)
Thanks [@aveline](https://github.com/aveline)! - Deprecated `external`
prop in `Link` component


- [Shopify#9229](Shopify#9229)
[`821535820`](Shopify@8215358)
Thanks [@aeperea](https://github.com/aeperea)! - Tabs update disabled
state


- [Shopify#9323](Shopify#9323)
[`cd43c8b47`](Shopify@cd43c8b)
Thanks [@qt314](https://github.com/qt314)! - Added internationalized
accessibility label to Banner dismiss button


- [Shopify#9263](Shopify#9263)
[`a3f3462a6`](Shopify@a3f3462)
Thanks [@mattkubej](https://github.com/mattkubej)! - Protect border
radius of `LegacyCard` with overflow clip


- [Shopify#9273](Shopify#9273)
[`e823538ad`](Shopify@e823538)
Thanks [@aishad](https://github.com/aishad)! - Fixed inline padding on
Modal Footer

## @shopify/polaris-cli@0.2.2



## polaris.shopify.com@0.55.0

### Minor Changes

- [Shopify#9311](Shopify#9311)
[`b6f2d7928`](Shopify@b6f2d79)
Thanks [@lgriffee](https://github.com/lgriffee)! - Created a "What's
new" page for v11 token changes.

### Patch Changes

- [Shopify#8840](Shopify#8840)
[`a7569b7f5`](Shopify@a7569b7)
Thanks [@alex-page](https://github.com/alex-page)! - Updated Colors page
with v11 content

- Updated dependencies
\[[`7e21fe093`](Shopify@7e21fe0),
[`ae3208332`](Shopify@ae32083),
[`e7d836819`](Shopify@e7d8368),
[`221426aaf`](Shopify@221426a),
[`821535820`](Shopify@8215358),
[`cd43c8b47`](Shopify@cd43c8b),
[`a3f3462a6`](Shopify@a3f3462),
[`e823538ad`](Shopify@e823538),
[`bf3bc75a1`](Shopify@bf3bc75)]:
    -   @shopify/polaris@11.1.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@chloerice
[Avatar] Fix initials overflowing when round (Shopify#9295)
1e6866e 
### WHY are these changes introduced?

Avatars with initials can overflow when the letters are wide, the worst
case is "WW"

### WHAT is this pull request doing?

This PR lowers the font-size of the initial text in round avatars to the
same sizes of the square avatar initials.

| Before | After |
|--------|--------|
| <img width="62" alt="Screenshot 2023-05-25 at 7 38 28 PM"
src="https://github.com/Shopify/polaris/assets/18447883/9c48af3c-2711-42dd-9ed0-bfd2cb1c9330">
|<img width="66" alt="Screenshot 2023-05-25 at 7 36 46 PM"
src="https://github.com/Shopify/polaris/assets/18447883/0da6afa6-1025-47fb-ab5b-d6a2d2fa1700">
|
| <img width="92" alt="Screenshot 2023-05-25 at 7 38 19 PM"
src="https://github.com/Shopify/polaris/assets/18447883/9410c39b-8154-4997-bd9f-22f6fc671c6c">
| <img width="76" alt="Screenshot 2023-05-25 at 7 37 04 PM"
src="https://github.com/Shopify/polaris/assets/18447883/97de1ee6-cb2b-4dc0-bb5f-bd9d25681bad">
|

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experimen
<img width="76" alt="Screenshot 2023-05-25 at 7 37 04 PM"
src="https://github.com/Shopify/polaris/assets/18447883/e60eddfa-3335-4f31-a6c4-c6c3fca1fe41">
t with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions
Version Packages (Shopify#9308)
a40d9ba 
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@11.1.0

### Minor Changes

- [Shopify#9269](Shopify#9269)
[`bf3bc75a1`](Shopify@4c4ea3f)
Thanks [@nat-king](https://github.com/nat-king)! - Added optional
`onAddFilterClick` callback prop to the indexFilters component

### Patch Changes

- [Shopify#9295](Shopify#9295)
[`7e21fe093`](Shopify@1e6866e)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `initials`
overflowing when `Avatar` is round


- [Shopify#9343](Shopify#9343)
[`ae3208332`](Shopify@8e37127)
Thanks [@qt314](https://github.com/qt314)! - Alphabetized locale files


- [Shopify#9314](Shopify#9314)
[`e7d836819`](Shopify@77a0b7f)
Thanks [@FCalabria](https://github.com/FCalabria)! - Removed focus
styles on TextField while disabled


- [Shopify#9223](Shopify#9223)
[`221426aaf`](Shopify@7a8633b)
Thanks [@aveline](https://github.com/aveline)! - Deprecated `external`
prop in `Link` component


- [Shopify#9229](Shopify#9229)
[`821535820`](Shopify@b3044bb)
Thanks [@aeperea](https://github.com/aeperea)! - Tabs update disabled
state


- [Shopify#9323](Shopify#9323)
[`cd43c8b47`](Shopify@6069404)
Thanks [@qt314](https://github.com/qt314)! - Added internationalized
accessibility label to Banner dismiss button


- [Shopify#9263](Shopify#9263)
[`a3f3462a6`](Shopify@813bf03)
Thanks [@mattkubej](https://github.com/mattkubej)! - Protect border
radius of `LegacyCard` with overflow clip


- [Shopify#9273](Shopify#9273)
[`e823538ad`](Shopify@4cc79bb)
Thanks [@aishad](https://github.com/aishad)! - Fixed inline padding on
Modal Footer

## @shopify/polaris-cli@0.2.2



## polaris.shopify.com@0.55.0

### Minor Changes

- [Shopify#9311](Shopify#9311)
[`b6f2d7928`](Shopify@7ddf98f)
Thanks [@lgriffee](https://github.com/lgriffee)! - Created a "What's
new" page for v11 token changes.

### Patch Changes

- [Shopify#8840](Shopify#8840)
[`a7569b7f5`](Shopify@7f0860a)
Thanks [@alex-page](https://github.com/alex-page)! - Updated Colors page
with v11 content

- Updated dependencies
\[[`7e21fe093`](Shopify@1e6866e),
[`ae3208332`](Shopify@8e37127),
[`e7d836819`](Shopify@77a0b7f),
[`221426aaf`](Shopify@7a8633b),
[`821535820`](Shopify@b3044bb),
[`cd43c8b47`](Shopify@6069404),
[`a3f3462a6`](Shopify@813bf03),
[`e823538ad`](Shopify@4cc79bb),
[`bf3bc75a1`](Shopify@4c4ea3f)]:
    -   @shopify/polaris@11.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

Reviewers

@sarahill sarahill sarahill approved these changes

@raschin raschin Awaiting requested review from raschin

@aveline aveline Awaiting requested review from aveline

Assignees

No one assigned

Labels

Bug Something is broken and not working as intended in the system.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@chloerice @sarahill