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

New `DoDont` component design #10571

Closed

yurm04 opened this issue Sep 19, 2023 · 0 comments

Assignees

Contributor

yurm04 commented Sep 19, 2023

New visual style for the DoDont, Do, and Dont components used in markdown files.

Functionality:

be able to next markdown as children of the components
Backwards compatibility of the DoDont component
Still be able to independently use a Do and a Dont component in the markdown
ability to display an image
Maybe we can use the Badge if the styling matches?

Here's the component code

The text was updated successfully, but these errors were encountered:

yurm04 added the #gsd:36550 label

gwyneplaine self-assigned this

gwyneplaine mentioned this issue

Docs DirectiveCard and DoDont refactor #10581

Merged

5 tasks

yurm04 pushed a commit that referenced this issue


          Docs DirectiveCard and DoDont refactor (#10581)

d505fa4

<!--
  ☝️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 #10571 

### WHAT is this pull request doing?

- `Docs` Add DirectiveCard component, and refactor DoDont components as
a composition of the DirectiveCard
- `Docs` update Card styles to override last-child margin of *all*
children

With Image: 
<img width="450" alt="Screenshot 2023-09-20 at 4 21 31 pm"
src="https://github.com/Shopify/polaris/assets/12119389/dd05c87c-7e99-4eee-85da-16c84b80e931">

Do Don't: 
<img width="894" alt="Screenshot 2023-09-20 at 4 22 04 pm"
src="https://github.com/Shopify/polaris/assets/12119389/b6a53b61-f6f1-4315-ab67-2e08e75f6884">

### 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

- [ ] 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: Yuraima Estevez <yuraima.estevez@shopify.com>

yurm04 closed this as completed

AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this issue


          Docs DirectiveCard and DoDont refactor (Shopify#10581)

767b6a3

<!--
  ☝️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#10571 

### WHAT is this pull request doing?

- `Docs` Add DirectiveCard component, and refactor DoDont components as
a composition of the DirectiveCard
- `Docs` update Card styles to override last-child margin of *all*
children

With Image: 
<img width="450" alt="Screenshot 2023-09-20 at 4 21 31 pm"
src="https://github.com/Shopify/polaris/assets/12119389/dd05c87c-7e99-4eee-85da-16c84b80e931">

Do Don't: 
<img width="894" alt="Screenshot 2023-09-20 at 4 22 04 pm"
src="https://github.com/Shopify/polaris/assets/12119389/b6a53b61-f6f1-4315-ab67-2e08e75f6884">

### 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

- [ ] 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: Yuraima Estevez <yuraima.estevez@shopify.com>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment