Skip to content

Fixes ActionList css #8540

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 4 commits into from
Mar 6, 2023
Merged

Fixes ActionList css #8540

merged 4 commits into from
Mar 6, 2023

Conversation

Ipriyankrajai
Copy link
Contributor

@Ipriyankrajai Ipriyankrajai commented Mar 2, 2023 •
edited
Loading

WHY are these changes introduced?

Fixes #8459

WHAT is this pull request doing?

Making minor changes in css in ActionList. Using gap property instead of Padding.

Four components are wrapped in flex box with flex-wrap: wrap.
using gap property to solve the issue.

Before

Screenshot from 2023-03-02 13-07-53
As we can se when content is overflow. There is a paddingleft to suffix.

After

Screenshot from 2023-03-02 13-12-49
Using gap property wont add any padding to Suffix.

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

@github-actions github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Mar 2, 2023
@Ipriyankrajai
Copy link
Contributor Author

Hey @alex-page, I've signed CLA. Can anyone review this from Shopify team?

@github-actions github-actions bot removed the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Mar 3, 2023
chloerice
chloerice approved these changes Mar 6, 2023
View reviewed changes
Copy link
Member

@chloerice chloerice left a comment

Choose a reason for hiding this comment

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

Thanks for contributing this bug fix @lpriyankrajai! 🙌🏽

@chloerice chloerice added Bug Something is broken and not working as intended in the system. Contribution labels Mar 6, 2023
@chloerice chloerice merged commit 70c1662 into Shopify:main Mar 6, 2023
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Mar 6, 2023
Merged
kyledurand
kyledurand reviewed Mar 6, 2023
View reviewed changes
polaris-react/src/components/ActionList/components/Item/Item.tsx

const suffixMarkup = suffix && (
<Box paddingInlineStart="4">
<Box>
Copy link
Member

Choose a reason for hiding this comment

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

Can Box be removed completely now?

Copy link
Contributor Author

@Ipriyankrajai Ipriyankrajai Mar 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Yes @kyledurand, we can remove Box as Suffix is already wrapped in span.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hey @kyledurand, I made changes as you suggested. Added a commit and pushed it to the main branch(i.e. same branch I created pr). But for some reason, I'm unable to see my commit here. Can you help me with this issue?

Copy link
Member

Choose a reason for hiding this comment

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

Can you create a new pull request for this change? That will run all the necessary checks including chromatic and make sure we don't cause any visual regressions

laurkim pushed a commit that referenced this pull request Mar 6, 2023
@shopify-github-actions-access @github-actions
Version Packages (#8504)
420f8da 
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-migrator@0.15.0

### Minor Changes

- [#8229](#8229)
[`e21fd8d79`](e21fd8d)
Thanks [@aveline](https://github.com/aveline)! - Created migration to
rename `Card` to `LegacyCard`

### Patch Changes

- Updated dependencies
\[[`6c0dda128`](6c0dda1)]:
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/stylelint-polaris@8.0.1

## @shopify/polaris@10.33.0

### Minor Changes

- [#8514](#8514)
[`78d686db5`](78d686d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Add additional
changes for migrating `legacy` custom properties from `v10` to `v11`


- [#8512](#8512)
[`b77c1fe51`](b77c1fe)
Thanks [@fatimasajadi](https://github.com/fatimasajadi)! - Add
onMouseEnter prop to the each item on the ActionList component


- [#8530](#8530)
[`bec50d4d8`](bec50d4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Removed alignment
defaults from Inline and AlphaStack


- [#8448](#8448)
[`590e495fd`](590e495)
Thanks [@alex-page](https://github.com/alex-page)! - [Text] adds
optional numeric font variant to render characters with a monospace
apperance and consistent height and width


- [#8130](#8130)
[`6c0dda128`](6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`


- [#8556](#8556)
[`de3a925a7`](de3a925)
Thanks [@laurkim](https://github.com/laurkim)! - Deprecated `Stack` and
`Stack.Item` and updated documentation on style guide


- [#8498](#8498)
[`624751155`](6247511)
Thanks [@lgriffee](https://github.com/lgriffee)! - Migrated `legacy`
custom properties from `v10` to `v11`

### Patch Changes

- [#8534](#8534)
[`eeb8a4fc5`](eeb8a4f)
Thanks [@laurkim](https://github.com/laurkim)! - Migrated usage of
`Stack` to `LegacyStack`


- [#8540](#8540)
[`70c166290`](70c1662)
Thanks [@Ipriyankrajai](https://github.com/Ipriyankrajai)! - Fixed
`ActionList` item `suffix` having extra padding when wrapped


- [#8523](#8523)
[`f644ad671`](f644ad6)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed deprecation
warning on Card


- [#8531](#8531)
[`7ecc8a9a6`](7ecc8a9)
Thanks [@chloerice](https://github.com/chloerice)! - - Fixed header of
`IndexTable` with `bulkActions` not having border radius
- Fixed header of `selectable` `ResourceList` not having border radius
- Fixed `selectable` `ResourceList` with no `bulkActions` having extra
bottom padding in select mode
- Fixed last `ResourceItem` in a `selectable` `ResourceList` with
`bulkActions` having a border radius when in select mode
- Updated dependencies
\[[`6c0dda128`](6c0dda1),
[`886da4fc3`](886da4f)]:
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/polaris-icons@6.11.3

## @shopify/polaris-tokens@6.7.0

### Minor Changes

- [#8130](#8130)
[`6c0dda128`](6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`

## @shopify/polaris-cli@0.1.14

### Patch Changes

- Updated dependencies
\[[`e21fd8d79`](e21fd8d)]:
    -   @shopify/polaris-migrator@0.15.0

## @shopify/polaris-icons@6.11.3

### Patch Changes

- [#8505](#8505)
[`886da4fc3`](886da4f)
Thanks [@lfroms](https://github.com/lfroms)! - Converted percentage
fill-opacity to float in two icons for better compatibility

## @shopify/stylelint-polaris@8.0.1

### Patch Changes

- Updated dependencies
\[[`6c0dda128`](6c0dda1)]:
    -   @shopify/polaris-tokens@6.7.0

## polaris.shopify.com@0.38.0

### Minor Changes

- [#8129](#8129)
[`6d3843755`](6d38437)
Thanks [@jesstelford](https://github.com/jesstelford)! - Patterns
documentation is now written in Markdown to match all other site
content.


- [#8130](#8130)
[`6c0dda128`](6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`


- [#8559](#8559)
[`668afa51c`](668afa5)
Thanks [@jjgali](https://github.com/jjgali)! - Update voice and tone of
Trustworthy experience value.

### Patch Changes

- [#8534](#8534)
[`eeb8a4fc5`](eeb8a4f)
Thanks [@laurkim](https://github.com/laurkim)! - Migrated usage of
`Stack` to `LegacyStack`


- [#8519](#8519)
[`f411cf0b6`](f411cf0)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added missing
redirect, updated content


- [#8553](#8553)
[`d2672648a`](d267264)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix legacy
patterns wrongly being categorised as deprecated. These are now
correctly labeled "legacy"


- [#8556](#8556)
[`de3a925a7`](de3a925)
Thanks [@laurkim](https://github.com/laurkim)! - Deprecated `Stack` and
`Stack.Item` and updated documentation on style guide


- [#8493](#8493)
[`a6fb3fbb7`](a6fb3fb)
Thanks [@kyledurand](https://github.com/kyledurand)! - Moved props.json
to cache and automate generation


- [#8528](#8528)
[`191ff96df`](191ff96)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fixed grid
alignment on component group page

- Updated dependencies
\[[`eeb8a4fc5`](eeb8a4f),
[`78d686db5`](78d686d),
[`70c166290`](70c1662),
[`b77c1fe51`](b77c1fe),
[`bec50d4d8`](bec50d4),
[`f644ad671`](f644ad6),
[`590e495fd`](590e495),
[`6c0dda128`](6c0dda1),
[`de3a925a7`](de3a925),
[`886da4fc3`](886da4f),
[`7ecc8a9a6`](7ecc8a9),
[`624751155`](6247511)]:
    -   @shopify/polaris@10.33.0
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/polaris-icons@6.11.3

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
@Ipriyankrajai @priyankrajai97
@chloerice @juzser
Fixes ActionList css (Shopify#8540)
da5037c 
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes Shopify#8459  <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?
Making minor changes in css in ActionList. Using gap property instead of
Padding.

Four components are wrapped in flex box with flex-wrap: wrap.
using gap property to solve the issue.   

## Before
![Screenshot from 2023-03-02
13-07-53](https://user-images.githubusercontent.com/32142351/222416610-c83a0c78-6354-4150-a3ef-35221593b4ed.png)
As we can se when content is overflow. There is a paddingleft to suffix.


## After
![Screenshot from 2023-03-02
13-12-49](https://user-images.githubusercontent.com/32142351/222418463-b460db3a-ddd3-409e-88ea-c54e93b6c4a6.png)
Using gap property wont add any padding to Suffix.

 

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### 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 experiment 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)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: priyank.rajai <priyank.rajai@openxcell.com>
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
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#8504)
5e15ce4 
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-migrator@0.15.0

### Minor Changes

- [Shopify#8229](Shopify#8229)
[`e21fd8d79`](Shopify@e21fd8d)
Thanks [@aveline](https://github.com/aveline)! - Created migration to
rename `Card` to `LegacyCard`

### Patch Changes

- Updated dependencies
\[[`6c0dda128`](Shopify@6c0dda1)]:
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/stylelint-polaris@8.0.1

## @shopify/polaris@10.33.0

### Minor Changes

- [Shopify#8514](Shopify#8514)
[`78d686db5`](Shopify@78d686d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Add additional
changes for migrating `legacy` custom properties from `v10` to `v11`


- [Shopify#8512](Shopify#8512)
[`b77c1fe51`](Shopify@b77c1fe)
Thanks [@fatimasajadi](https://github.com/fatimasajadi)! - Add
onMouseEnter prop to the each item on the ActionList component


- [Shopify#8530](Shopify#8530)
[`bec50d4d8`](Shopify@bec50d4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Removed alignment
defaults from Inline and AlphaStack


- [Shopify#8448](Shopify#8448)
[`590e495fd`](Shopify@590e495)
Thanks [@alex-page](https://github.com/alex-page)! - [Text] adds
optional numeric font variant to render characters with a monospace
apperance and consistent height and width


- [Shopify#8130](Shopify#8130)
[`6c0dda128`](Shopify@6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`


- [Shopify#8556](Shopify#8556)
[`de3a925a7`](Shopify@de3a925)
Thanks [@laurkim](https://github.com/laurkim)! - Deprecated `Stack` and
`Stack.Item` and updated documentation on style guide


- [Shopify#8498](Shopify#8498)
[`624751155`](Shopify@6247511)
Thanks [@lgriffee](https://github.com/lgriffee)! - Migrated `legacy`
custom properties from `v10` to `v11`

### Patch Changes

- [Shopify#8534](Shopify#8534)
[`eeb8a4fc5`](Shopify@eeb8a4f)
Thanks [@laurkim](https://github.com/laurkim)! - Migrated usage of
`Stack` to `LegacyStack`


- [Shopify#8540](Shopify#8540)
[`70c166290`](Shopify@70c1662)
Thanks [@Ipriyankrajai](https://github.com/Ipriyankrajai)! - Fixed
`ActionList` item `suffix` having extra padding when wrapped


- [Shopify#8523](Shopify#8523)
[`f644ad671`](Shopify@f644ad6)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed deprecation
warning on Card


- [Shopify#8531](Shopify#8531)
[`7ecc8a9a6`](Shopify@7ecc8a9)
Thanks [@chloerice](https://github.com/chloerice)! - - Fixed header of
`IndexTable` with `bulkActions` not having border radius
- Fixed header of `selectable` `ResourceList` not having border radius
- Fixed `selectable` `ResourceList` with no `bulkActions` having extra
bottom padding in select mode
- Fixed last `ResourceItem` in a `selectable` `ResourceList` with
`bulkActions` having a border radius when in select mode
- Updated dependencies
\[[`6c0dda128`](Shopify@6c0dda1),
[`886da4fc3`](Shopify@886da4f)]:
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/polaris-icons@6.11.3

## @shopify/polaris-tokens@6.7.0

### Minor Changes

- [Shopify#8130](Shopify#8130)
[`6c0dda128`](Shopify@6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`

## @shopify/polaris-cli@0.1.14

### Patch Changes

- Updated dependencies
\[[`e21fd8d79`](Shopify@e21fd8d)]:
    -   @shopify/polaris-migrator@0.15.0

## @shopify/polaris-icons@6.11.3

### Patch Changes

- [Shopify#8505](Shopify#8505)
[`886da4fc3`](Shopify@886da4f)
Thanks [@lfroms](https://github.com/lfroms)! - Converted percentage
fill-opacity to float in two icons for better compatibility

## @shopify/stylelint-polaris@8.0.1

### Patch Changes

- Updated dependencies
\[[`6c0dda128`](Shopify@6c0dda1)]:
    -   @shopify/polaris-tokens@6.7.0

## polaris.shopify.com@0.38.0

### Minor Changes

- [Shopify#8129](Shopify#8129)
[`6d3843755`](Shopify@6d38437)
Thanks [@jesstelford](https://github.com/jesstelford)! - Patterns
documentation is now written in Markdown to match all other site
content.


- [Shopify#8130](Shopify#8130)
[`6c0dda128`](Shopify@6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`


- [Shopify#8559](Shopify#8559)
[`668afa51c`](Shopify@668afa5)
Thanks [@jjgali](https://github.com/jjgali)! - Update voice and tone of
Trustworthy experience value.

### Patch Changes

- [Shopify#8534](Shopify#8534)
[`eeb8a4fc5`](Shopify@eeb8a4f)
Thanks [@laurkim](https://github.com/laurkim)! - Migrated usage of
`Stack` to `LegacyStack`


- [Shopify#8519](Shopify#8519)
[`f411cf0b6`](Shopify@f411cf0)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added missing
redirect, updated content


- [Shopify#8553](Shopify#8553)
[`d2672648a`](Shopify@d267264)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix legacy
patterns wrongly being categorised as deprecated. These are now
correctly labeled "legacy"


- [Shopify#8556](Shopify#8556)
[`de3a925a7`](Shopify@de3a925)
Thanks [@laurkim](https://github.com/laurkim)! - Deprecated `Stack` and
`Stack.Item` and updated documentation on style guide


- [Shopify#8493](Shopify#8493)
[`a6fb3fbb7`](Shopify@a6fb3fb)
Thanks [@kyledurand](https://github.com/kyledurand)! - Moved props.json
to cache and automate generation


- [Shopify#8528](Shopify#8528)
[`191ff96df`](Shopify@191ff96)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fixed grid
alignment on component group page

- Updated dependencies
\[[`eeb8a4fc5`](Shopify@eeb8a4f),
[`78d686db5`](Shopify@78d686d),
[`70c166290`](Shopify@70c1662),
[`b77c1fe51`](Shopify@b77c1fe),
[`bec50d4d8`](Shopify@bec50d4),
[`f644ad671`](Shopify@f644ad6),
[`590e495fd`](Shopify@590e495),
[`6c0dda128`](Shopify@6c0dda1),
[`de3a925a7`](Shopify@de3a925),
[`886da4fc3`](Shopify@886da4f),
[`7ecc8a9a6`](Shopify@7ecc8a9),
[`624751155`](Shopify@6247511)]:
    -   @shopify/polaris@10.33.0
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/polaris-icons@6.11.3

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@chloerice chloerice added Component 2023 Contribution tracking for 2023 Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023" labels Dec 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kyledurand kyledurand kyledurand left review comments

@chloerice chloerice chloerice approved these changes

Assignees

No one assigned

Labels

2023 Contribution tracking for 2023 Bug Something is broken and not working as intended in the system. Component Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023"

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

ActionList suffix has unexpected margin on the left when being wrapped

4 participants

@Ipriyankrajai @kyledurand @chloerice @priyankrajai97