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.

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

[Modal] Activator no longer wrapped in Box #10086

Merged
merged 1 commit into from
Aug 16, 2023
Merged

[Modal] Activator no longer wrapped in Box #10086

merged 1 commit into from
Aug 16, 2023

Conversation

joelzwarrington
Copy link
Contributor

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1049

Because <Modal /> wraps the activator in a <Box />, it is not possible to style elements inline. The <Box /> can be removed as it is only used for passing the ref along, which we can pass to the activator instead with React.cloneElement.

WHAT is this pull request doing?

1. Modal activator is no longer wrapped in a Box

BEFORE:

<div class="Polaris-Box">
  <button class="Polaris-Button" type="button">
    <span class="Polaris-Button__Content">
      <span class="Polaris-Button__Text">Click Me</span>
    </span>
  </button>
</div>

AFTER:

<button class="Polaris-Button" type="button">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">Click Me</span>
  </span>
</button>
2. The `ref` is attached to the `activator` instead of the box which used to wrap the `activator`.

🎩 checklist

@joelzwarrington joelzwarrington merged commit 5a5b379 into main Aug 16, 2023
17 checks passed
@joelzwarrington joelzwarrington deleted the dont-wrap-modal-activator branch August 16, 2023 16:24
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Aug 16, 2023
Merged
kyledurand pushed a commit that referenced this pull request Aug 17, 2023
@joelzwarrington @kyledurand
[Modal] Activator no longer wrapped in Box (#10086)
6474bde 
### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1049

Because `<Modal />` wraps the `activator` in a `<Box />`, it is not
possible to style elements inline. The `<Box />` can be removed as it is
only used for passing the ref along, which we can pass to the activator
instead with `React.cloneElement`.

### WHAT is this pull request doing?

<details>
<summary>1. Modal activator is no longer wrapped in a Box</summary>

BEFORE:
```jsx
<div class="Polaris-Box">
  <button class="Polaris-Button" type="button">
    <span class="Polaris-Button__Content">
      <span class="Polaris-Button__Text">Click Me</span>
    </span>
  </button>
</div>
```

AFTER:
```jsx
<button class="Polaris-Button" type="button">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">Click Me</span>
  </span>
</button>
```
</details> 
2. The `ref` is attached to the `activator` instead of the box which
used to wrap the `activator`.

### 🎩 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
sam-b-rose pushed a commit that referenced this pull request Aug 24, 2023
@shopify-github-actions-access @github-actions
Version Packages (#10078)
295feef 
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.20.0

### Minor Changes

- [#10101](#10101)
[`e6a2d352a`](e6a2d35)
Thanks [@samrose3](https://github.com/samrose3)! - Removed the
`@shopify/polaris-cli` and `@shopify/polaris-codemods` package in favor
of using only the `@shopify/polaris-migrator`.

    Removing these packages will provide the following benefits:

- Improve CI time by removing extra packages from our build, test, and
lint workflows
- Reduce confusion on where to add new migrations or update previous
migrations
- Clean up ESLint configs, reduce changelog entries, and remove package
dependencies


- [#10071](#10071)
[`23c1391aa`](23c1391)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added support for
compound components and adding new prop values in the
react-rename-component-prop migration

## @shopify/polaris@11.13.0

### Minor Changes

- [#10086](#10086)
[`5a5b3795a`](5a5b379)
Thanks [@joelzwarrington](https://github.com/joelzwarrington)! - [Modal]
Activator no longer wrapped in Box


- [#10183](#10183)
[`7891c7ed9`](7891c7e)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecate
connectedDisclosure prop on button


- [#10181](#10181)
[`219be15aa`](219be15)
Thanks [@ssetem](https://github.com/ssetem)! - Added support for
[Dynamic
Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically)
in iOS

### Patch Changes

- [#10056](#10056)
[`5ecaafc2b`](5ecaafc)
Thanks [@jesstelford](https://github.com/jesstelford)! - [ResourceList]
Remove layout jank when bulk actions enabled and item selected


-
[`bc1f4aab1`](bc1f4aa)
Thanks [@samrose3](https://github.com/samrose3)! - Reduced surrounding
margin of Tooltip to allow for interaction with nearby UI elements.

## polaris.shopify.com@0.57.1

### Patch Changes

- [#10186](#10186)
[`b340df129`](b340df1)
Thanks [@m4thieulavoie](https://github.com/m4thieulavoie)! - Fixed
landing page for sandbox

- Updated dependencies
\[[`5a5b3795a`](5a5b379),
[`7891c7ed9`](7891c7e),
[`5ecaafc2b`](5ecaafc),
[`bc1f4aab1`](bc1f4aa),
[`219be15aa`](219be15)]:
    -   @shopify/polaris@11.13.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
yurm04 pushed a commit that referenced this pull request Aug 24, 2023
@joelzwarrington
[Modal] Activator no longer wrapped in Box (#10086)
b5699a3 
### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1049

Because `<Modal />` wraps the `activator` in a `<Box />`, it is not
possible to style elements inline. The `<Box />` can be removed as it is
only used for passing the ref along, which we can pass to the activator
instead with `React.cloneElement`.

### WHAT is this pull request doing?

<details>
<summary>1. Modal activator is no longer wrapped in a Box</summary>

BEFORE:
```jsx
<div class="Polaris-Box">
  <button class="Polaris-Button" type="button">
    <span class="Polaris-Button__Content">
      <span class="Polaris-Button__Text">Click Me</span>
    </span>
  </button>
</div>
```

AFTER:
```jsx
<button class="Polaris-Button" type="button">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">Click Me</span>
  </span>
</button>
```
</details> 
2. The `ref` is attached to the `activator` instead of the box which
used to wrap the `activator`.

### 🎩 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
yurm04 pushed a commit that referenced this pull request Aug 24, 2023
@joelzwarrington
[Modal] Activator no longer wrapped in Box (#10086)
0617d25 
### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1049

Because `<Modal />` wraps the `activator` in a `<Box />`, it is not
possible to style elements inline. The `<Box />` can be removed as it is
only used for passing the ref along, which we can pass to the activator
instead with `React.cloneElement`.

### WHAT is this pull request doing?

<details>
<summary>1. Modal activator is no longer wrapped in a Box</summary>

BEFORE:
```jsx
<div class="Polaris-Box">
  <button class="Polaris-Button" type="button">
    <span class="Polaris-Button__Content">
      <span class="Polaris-Button__Text">Click Me</span>
    </span>
  </button>
</div>
```

AFTER:
```jsx
<button class="Polaris-Button" type="button">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">Click Me</span>
  </span>
</button>
```
</details> 
2. The `ref` is attached to the `activator` instead of the box which
used to wrap the `activator`.

### 🎩 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
sam-b-rose added a commit that referenced this pull request Aug 28, 2023
@sam-b-rose
Merge branch 'main' into update-next
8152b28 
* main:
  Fix rename prop migration (#10215)
  Update translations: default (#10219)
  [Avatar] Override SE23 background override with imageHasLoaded (#10211)
  Create Code style guide.md (#10176)
  ActionsList filtering (#9907)
  Version Packages (#10078)
  Support dynamic fontsizes in iOS devices (#10181)
  Fix migration resolution path (#10188)
  [Button] Deprecate connectedDisclosure  (#10183)
  Update sandbox.md (#10186)
  Allow migrator to target subcomponents and change prop values (#10071)
  Remove `polaris-cli` and `polaris-codemods` packages (#10101)
  Bump loader-utils from 1.4.0 to 1.4.2 (#7725)
  Bump deep-object-diff from 1.1.7 to 1.1.9 (#7734)
  Bump decode-uri-component from 0.2.0 to 0.2.2 (#7832)
  Bump webpack from 5.72.0 to 5.76.0 (#8667)
  Bump fastify from 4.5.3 to 4.15.0 (#8750)
  [Modal] Activator no longer wrapped in Box (#10086)
  Fix icon optimize config (#10087)
  [ResourceList] Remove layout jank when bulk actions enabled and item selected
sam-b-rose added a commit that referenced this pull request Aug 28, 2023
@sam-b-rose
Merge branch 'main' into update-next
56ee593 
* main:
  Fix rename prop migration (#10215)
  Update translations: default (#10219)
  [Avatar] Override SE23 background override with imageHasLoaded (#10211)
  Create Code style guide.md (#10176)
  ActionsList filtering (#9907)
  Version Packages (#10078)
  Support dynamic fontsizes in iOS devices (#10181)
  Fix migration resolution path (#10188)
  [Button] Deprecate connectedDisclosure  (#10183)
  Update sandbox.md (#10186)
  Allow migrator to target subcomponents and change prop values (#10071)
  Remove `polaris-cli` and `polaris-codemods` packages (#10101)
  Bump loader-utils from 1.4.0 to 1.4.2 (#7725)
  Bump deep-object-diff from 1.1.7 to 1.1.9 (#7734)
  Bump decode-uri-component from 0.2.0 to 0.2.2 (#7832)
  Bump webpack from 5.72.0 to 5.76.0 (#8667)
  Bump fastify from 4.5.3 to 4.15.0 (#8750)
  [Modal] Activator no longer wrapped in Box (#10086)
  Fix icon optimize config (#10087)
  [ResourceList] Remove layout jank when bulk actions enabled and item selected
yurm04 pushed a commit that referenced this pull request Sep 6, 2023
@joelzwarrington
[Modal] Activator no longer wrapped in Box (#10086)
99ba6e1 
### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1049

Because `<Modal />` wraps the `activator` in a `<Box />`, it is not
possible to style elements inline. The `<Box />` can be removed as it is
only used for passing the ref along, which we can pass to the activator
instead with `React.cloneElement`.

### WHAT is this pull request doing?

<details>
<summary>1. Modal activator is no longer wrapped in a Box</summary>

BEFORE:
```jsx
<div class="Polaris-Box">
  <button class="Polaris-Button" type="button">
    <span class="Polaris-Button__Content">
      <span class="Polaris-Button__Text">Click Me</span>
    </span>
  </button>
</div>
```

AFTER:
```jsx
<button class="Polaris-Button" type="button">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">Click Me</span>
  </span>
</button>
```
</details> 
2. The `ref` is attached to the `activator` instead of the box which
used to wrap the `activator`.

### 🎩 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
@gavin-hinchley gavin-hinchley mentioned this pull request Sep 15, 2023
Closed
@LauraAubin LauraAubin mentioned this pull request Nov 30, 2023
Merged
6 tasks
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@joelzwarrington
[Modal] Activator no longer wrapped in Box (Shopify#10086)
f8cb874 
### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1049

Because `<Modal />` wraps the `activator` in a `<Box />`, it is not
possible to style elements inline. The `<Box />` can be removed as it is
only used for passing the ref along, which we can pass to the activator
instead with `React.cloneElement`.

### WHAT is this pull request doing?

<details>
<summary>1. Modal activator is no longer wrapped in a Box</summary>

BEFORE:
```jsx
<div class="Polaris-Box">
  <button class="Polaris-Button" type="button">
    <span class="Polaris-Button__Content">
      <span class="Polaris-Button__Text">Click Me</span>
    </span>
  </button>
</div>
```

AFTER:
```jsx
<button class="Polaris-Button" type="button">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">Click Me</span>
  </span>
</button>
```
</details> 
2. The `ref` is attached to the `activator` instead of the box which
used to wrap the `activator`.

### 🎩 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kyledurand kyledurand kyledurand approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@joelzwarrington @kyledurand