Skip to content

[Layout foundations] Add alpha ContentBlock component #7255

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 10 commits into from
Sep 26, 2022
Merged

[Layout foundations] Add alpha ContentBlock component #7255

merged 10 commits into from
Sep 26, 2022

Conversation

@chazdean
Copy link
Contributor

@chazdean chazdean commented Sep 22, 2022 •
edited
Loading

WHY are these changes introduced?

Fixes #6899
Fixes #7257

WHAT is this pull request doing?

Adds a new alpha ContentBlock component

Screen Shot 2022-09-23 at 3 25 51 PM

ContentBlock alpha page AlphaStack alpha page

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import {Page, ContentBlock, Text, Box} from '../src';

export function Playground() {
  return (
    <Page fullWidth title="Playground">
      <ContentBlock width="medium">
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text variant="bodySm" as="h3" alignment="center">
            medium
          </Text>
        </Box>
      </ContentBlock>
      <br />
      <ContentBlock width="large">
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text variant="bodySm" as="h3" alignment="center">
            large
          </Text>
        </Box>
      </ContentBlock>
      <br />
    </Page>
  );
}

🎩 checklist

@github-actions
Copy link
Contributor

github-actions bot commented Sep 22, 2022 •
edited
Loading

size-limit report 📦

Path Size
polaris-react-cjs 204.63 KB (+0.05% 🔺)
polaris-react-esm 131.07 KB (+0.08% 🔺)
polaris-react-esnext 186.23 KB (+0.11% 🔺)
polaris-react-css 41.36 KB (+0.09% 🔺)

@chazdean chazdean self-assigned this Sep 22, 2022
@chazdean chazdean marked this pull request as ready for review September 23, 2022 19:40
@chazdean chazdean changed the title [WIP][Layout foundations] Add alpha ContentBlock component [Layout foundations] Add alpha ContentBlock component Sep 23, 2022
aveline
aveline approved these changes Sep 23, 2022
View reviewed changes
Copy link
Contributor

@aveline aveline left a comment

Choose a reason for hiding this comment

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

Looks good overall 🎉

sarahill
sarahill approved these changes Sep 23, 2022
View reviewed changes
Copy link
Contributor

@sarahill sarahill left a comment

Choose a reason for hiding this comment

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

🎉

@chazdean chazdean force-pushed the feat/add-contentblock branch from 339c5ff to eb54120 Compare September 26, 2022 17:39
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
@laurkim
Copy link
Contributor

laurkim commented Sep 26, 2022

Can we add a changeset for this PR?

laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
laurkim
laurkim reviewed Sep 26, 2022
View reviewed changes
@chazdean chazdean requested a review from laurkim September 26, 2022 18:33
laurkim
laurkim approved these changes Sep 26, 2022
View reviewed changes
Copy link
Contributor

@laurkim laurkim left a comment

Choose a reason for hiding this comment

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

Nice! 💯

@chazdean chazdean merged commit a38b3ba into layout-foundations-prototype Sep 26, 2022
@chazdean chazdean deleted the feat/add-contentblock branch September 26, 2022 19:24
laurkim added a commit that referenced this pull request Sep 30, 2022
@chazdean @laurkim
[Layout foundations] Add alpha ContentBlock component (#7255)
e6c16f1 
<!--
  ☝️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 #6899
Fixes #7257 

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

### WHAT is this pull request doing?

Adds a new alpha `ContentBlock` component

![Screen Shot 2022-09-23 at 3 25 51
PM](https://user-images.githubusercontent.com/59836805/192042716-feea6443-52b5-412d-84c8-a3bfef41a76f.png)

 <details>
      <summary>ContentBlock alpha page</summary>
<img
src="https://user-images.githubusercontent.com/59836805/192043843-8aaa0a8b-5e19-48f6-a534-a8759faab29c.gif"
alt="AlphaStack alpha page">
    </details>

<!--
  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, ContentBlock, Text, Box} from '../src';

export function Playground() {
  return (
    <Page fullWidth title="Playground">
      <ContentBlock width="medium">
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text variant="bodySm" as="h3" alignment="center">
            medium
          </Text>
        </Box>
      </ContentBlock>
      <br />
      <ContentBlock width="large">
        <Box background="surface" borderRadius="2" padding="5" shadow="card">
          <Text variant="bodySm" as="h3" alignment="center">
            large
          </Text>
        </Box>
      </ContentBlock>
      <br />
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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: Lo Kim <[email protected]>
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

@laurkim laurkim laurkim approved these changes

+1 more reviewer

@aveline aveline aveline approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@chazdean chazdean

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@chazdean @laurkim @aveline @sarahill