Skip to content

Conversation

@itwasmattgregg
Copy link
Contributor

@itwasmattgregg itwasmattgregg commented Jan 23, 2023

WHY are these changes introduced?

As a followup to #8016 in preparation for v11 where breadcrumb becomes singular (#7990).

I should have originally done this and deprecated breadcrumbs but at the time we had a different upgrade path in mind. After collaborating with a number of folks we determined deprecating breadcrumbs officially and moving to a singular breadcrumb in a backAction prop for v11 was the best path.

WHAT is this pull request doing?

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

@itwasmattgregg itwasmattgregg mentioned this pull request Jan 23, 2023
5 tasks
@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2023

size-limit report 📦

Path Size
polaris-react-cjs 220.21 KB (+0.03% 🔺)
polaris-react-esm 139.91 KB (+0.05% 🔺)
polaris-react-esnext 195.67 KB (+0.03% 🔺)
polaris-react-css 42.3 KB (0%)

Comment on lines 15 to 16
/** Breadcrumb link */
breadcrumb?: CallbackAction | LinkAction;
Copy link
Member

Choose a reason for hiding this comment

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

This will become required in v11?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes

Copy link
Member

Choose a reason for hiding this comment

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

Perhaps we should log a warning that the breadcrumb prop should "require" a value if no value is provided to either? A bit clunky but at least a temporary way to notify the developer until the next major update.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added a warning

Copy link
Member

@sam-b-rose sam-b-rose left a comment

Choose a reason for hiding this comment

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

Nice update! Only had a few suggestions

console.warn(
'Deprecation: The `additionalNavigation` on Page is deprecated and will be removed in the next major version.',
);
// eslint-disable-next-line no-console
Copy link
Member

Choose a reason for hiding this comment

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

This should be wrapped in its own if statement when breadcrumbs is used:

if (breadcrumbs && process.env.NODE_ENV === 'development') {
  console.warn('...')
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Totally. Have no idea what I was thinking. Good catch

Comment on lines 15 to 16
/** Breadcrumb link */
breadcrumb?: CallbackAction | LinkAction;
Copy link
Member

Choose a reason for hiding this comment

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

Perhaps we should log a warning that the breadcrumb prop should "require" a value if no value is provided to either? A bit clunky but at least a temporary way to notify the developer until the next major update.

<Breadcrumbs breadcrumbs={breadcrumbs} />
</div>
) : null;
const breadcrumbMarkup = () => {
Copy link
Member

Choose a reason for hiding this comment

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

Feels a bit odd to have this as a function since it relies on outside scope variables. I think we could keep breadcrumbMarkup a variable for simplicity:

let breadcrumbMarkup = null;
if (breadcrumb) {
  breadcrumbMarkup = // value
} else if (Array.isArray(...) ... ) {
  breadcrumbMarkup = // other value
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah yea I just tend avoid mutable code these days lol I forget it's even possible

Copy link
Member

@alex-page alex-page left a comment

Choose a reason for hiding this comment

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

@itwasmattgregg before this ships can we change the name of breadcrumb to backAction. I am trying to align across the extensions team. See here:
https://github.com/Shopify/app-kit/discussions/150#discussioncomment-4994861

@itwasmattgregg itwasmattgregg changed the title Deprecate breadcrumbs and allow singular breadcrumb prop on Page and Breadcrumbs Deprecate breadcrumbs and allow singular backAction prop on Page and Breadcrumbs Feb 22, 2023
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
@itwasmattgregg itwasmattgregg merged commit c606175 into main Feb 23, 2023
@itwasmattgregg itwasmattgregg deleted the deprecate-breadcrumbs branch February 23, 2023 01:42
chazdean pushed a commit that referenced this pull request Feb 27, 2023
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/stylelint-polaris@8.0.0

### Major Changes

- [#8467](#8467)
[`9ab93132a`](9ab9313)
Thanks [@chloerice](https://github.com/chloerice)! - Configured
`selector-disallowed-list` to disallow Polaris component class name
overrides

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-migrator@0.14.0

### Minor Changes

- [#8071](#8071)
[`319479143`](3194791)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added a
migration for updating the Page component `breadcrumbs` prop to use an
object instead of an array

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`9ab93132a`](9ab9313),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1
    -   @shopify/stylelint-polaris@8.0.0

## @shopify/polaris@10.32.0

### Minor Changes

- [#8454](#8454)
[`4799b6550`](4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [#8484](#8484)
[`cbbb5648c`](cbbb564)
Thanks [@aveline](https://github.com/aveline)! - Removed default `gap`
from `Columns`


- [#8135](#8135)
[`c60617518`](c606175)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! -
Deprecated the `Page` `breadcrumbs` prop in favor of the new
`backAction` prop.


- [#8441](#8441)
[`3537b3aeb`](3537b3a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
TextContainer in favor of AlphaStack


- [#8418](#8418)
[`4018ee268`](4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [#8413](#8413)
[`7bbe096e4`](7bbe096)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - updating bulk
actions strings

### Patch Changes

- [#8387](#8387)
[`7f0f2cad1`](7f0f2ca)
Thanks [@aveline](https://github.com/aveline)! - Updated `Columns` to
accept columns aliases


- [#8115](#8115)
[`cc706f4ce`](cc706f4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Grouped PageActions
actions at the trailing edge of the container


- [#8470](#8470)
[`f5e450357`](f5e4503)
Thanks [@aveline](https://github.com/aveline)! - Removed default margin
from `Bleed`

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-cli@0.1.13

### Patch Changes

- Updated dependencies
\[[`319479143`](3194791)]:
    -   @shopify/polaris-migrator@0.14.0

## @shopify/polaris-tokens@6.6.1

### Patch Changes

- [#8456](#8456)
[`0e9fa8433`](0e9fa84)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
`border-caution-subdued` and `border-success-subdued` tokens to improve
color contrast


- [#8483](#8483)
[`b1768f037`](b1768f0)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Adjusted
colors to meet color contrast requirements

## polaris.shopify.com@0.37.0

### Minor Changes

- [#8454](#8454)
[`4799b6550`](4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [#7843](#7843)
[`3840f49e9`](3840f49)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - ## Reboot
Pattern Guidance

    -   New layout primitives `Stack`, `Box`, `Grid`, `Row`.
    -   Playroom patched to support larger code snippets.
- New designs and content for the
[patterns](https://polaris.shopify.com/patterns) pages.
    -   Deprecated old patterns:
        ||Old|New|
        \|--\|--\|--\|
        \|**design-patterns** \| `/patterns/design-patterns` \| `404`\|
        \|**page-layouts** \| `/patterns/page-layouts` \| `404`\|
\|**error-messages** \| `/patterns/error-messages` \|
`/content/error-messages`\|
\|**help-content** \| `/patterns/help-content` \|
`/content/help-content`\|
\|**loading** \| `/patterns/loading` \| `/patterns-legacy/loading`\|
\|**new-badge** \| `/patterns/new-badge` \|
`/patterns-legacy/new-badge`\|
\|**pickers** \| `/patterns/pickers` \| `/patterns-legacy/pickers`\|
\|**text-fields** \| `/patterns/text-fields` \|
`/patterns-legacy/text-fields`\|
- Page padding and max-width adjusted such that live previews for
components and patterns always display the desktop breakpoint.


- [#8466](#8466)
[`3b32f3477`](3b32f34)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Adds
documentation for the Page breadcrumbs migration

### Patch Changes

- [#8475](#8475)
[`ba7280068`](ba72800)
Thanks [@chloerice](https://github.com/chloerice)! - Added documentation
for `selector-disallowed-list` `@shopify/stylelint/polaris` rule


- [#8474](#8474)
[`00028952d`](0002895)
Thanks [@jesstelford](https://github.com/jesstelford)! - Refactor
hideFromNav logic to support breadcrumbs


- [#8490](#8490)
[`16f5a3638`](16f5a36)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add caveats to
code examples in Patterns


- [#8491](#8491)
[`39704dccf`](39704dc)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add 'New'
status badge to Patterns nav item


- [#8422](#8422)
[`3975668a2`](3975668)
Thanks [@kyledurand](https://github.com/kyledurand)! - Organized
categories on components page


- [#8473](#8473)
[`597b78ba2`](597b78b)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Remove draft
pattern pages from PatternsPage


- [#8477](#8477)
[`c67d1a5b6`](c67d1a5)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fix global types
file


- [#8418](#8418)
[`4018ee268`](4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [#8489](#8489)
[`0a525643d`](0a52564)
Thanks [@raquelbreternitz](https://github.com/raquelbreternitz)! - Add
new page on alt text


- [#8410](#8410)
[`2312cbb6a`](2312cbb)
Thanks [@kellydanma](https://github.com/kellydanma)! - Use Close instead
of OK

- Updated dependencies
\[[`7f0f2cad1`](7f0f2ca),
[`4799b6550`](4799b65),
[`cbbb5648c`](cbbb564),
[`c60617518`](c606175),
[`cc706f4ce`](cc706f4),
[`f5e450357`](f5e4503),
[`3537b3aeb`](3537b3a),
[`0e9fa8433`](0e9fa84),
[`4018ee268`](4018ee2),
[`7bbe096e4`](7bbe096),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris@10.32.0
    -   @shopify/polaris-tokens@6.6.1

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
…Breadcrumbs (Shopify#8135)

### WHY are these changes introduced?

As a followup to Shopify#8016 in
preparation for v11 where breadcrumb becomes singular
(Shopify#7990).

I should have originally done this and deprecated breadcrumbs but at the
time we had a different upgrade path in mind. After collaborating with a
number of folks we determined deprecating breadcrumbs officially and
moving to a singular breadcrumb in a `backAction` prop for v11 was the
best path.

### WHAT is this pull request doing?

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

- [ ] 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: Chloe Rice <chloerice@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
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/stylelint-polaris@8.0.0

### Major Changes

- [Shopify#8467](Shopify#8467)
[`9ab93132a`](Shopify@9ab9313)
Thanks [@chloerice](https://github.com/chloerice)! - Configured
`selector-disallowed-list` to disallow Polaris component class name
overrides

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-migrator@0.14.0

### Minor Changes

- [Shopify#8071](Shopify#8071)
[`319479143`](Shopify@3194791)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added a
migration for updating the Page component `breadcrumbs` prop to use an
object instead of an array

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`9ab93132a`](Shopify@9ab9313),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1
    -   @shopify/stylelint-polaris@8.0.0

## @shopify/polaris@10.32.0

### Minor Changes

- [Shopify#8454](Shopify#8454)
[`4799b6550`](Shopify@4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [Shopify#8484](Shopify#8484)
[`cbbb5648c`](Shopify@cbbb564)
Thanks [@aveline](https://github.com/aveline)! - Removed default `gap`
from `Columns`


- [Shopify#8135](Shopify#8135)
[`c60617518`](Shopify@c606175)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! -
Deprecated the `Page` `breadcrumbs` prop in favor of the new
`backAction` prop.


- [Shopify#8441](Shopify#8441)
[`3537b3aeb`](Shopify@3537b3a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
TextContainer in favor of AlphaStack


- [Shopify#8418](Shopify#8418)
[`4018ee268`](Shopify@4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [Shopify#8413](Shopify#8413)
[`7bbe096e4`](Shopify@7bbe096)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - updating bulk
actions strings

### Patch Changes

- [Shopify#8387](Shopify#8387)
[`7f0f2cad1`](Shopify@7f0f2ca)
Thanks [@aveline](https://github.com/aveline)! - Updated `Columns` to
accept columns aliases


- [Shopify#8115](Shopify#8115)
[`cc706f4ce`](Shopify@cc706f4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Grouped PageActions
actions at the trailing edge of the container


- [Shopify#8470](Shopify#8470)
[`f5e450357`](Shopify@f5e4503)
Thanks [@aveline](https://github.com/aveline)! - Removed default margin
from `Bleed`

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-cli@0.1.13

### Patch Changes

- Updated dependencies
\[[`319479143`](Shopify@3194791)]:
    -   @shopify/polaris-migrator@0.14.0

## @shopify/polaris-tokens@6.6.1

### Patch Changes

- [Shopify#8456](Shopify#8456)
[`0e9fa8433`](Shopify@0e9fa84)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
`border-caution-subdued` and `border-success-subdued` tokens to improve
color contrast


- [Shopify#8483](Shopify#8483)
[`b1768f037`](Shopify@b1768f0)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Adjusted
colors to meet color contrast requirements

## polaris.shopify.com@0.37.0

### Minor Changes

- [Shopify#8454](Shopify#8454)
[`4799b6550`](Shopify@4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [Shopify#7843](Shopify#7843)
[`3840f49e9`](Shopify@3840f49)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - ## Reboot
Pattern Guidance

    -   New layout primitives `Stack`, `Box`, `Grid`, `Row`.
    -   Playroom patched to support larger code snippets.
- New designs and content for the
[patterns](https://polaris.shopify.com/patterns) pages.
    -   Deprecated old patterns:
        ||Old|New|
        \|--\|--\|--\|
        \|**design-patterns** \| `/patterns/design-patterns` \| `404`\|
        \|**page-layouts** \| `/patterns/page-layouts` \| `404`\|
\|**error-messages** \| `/patterns/error-messages` \|
`/content/error-messages`\|
\|**help-content** \| `/patterns/help-content` \|
`/content/help-content`\|
\|**loading** \| `/patterns/loading` \| `/patterns-legacy/loading`\|
\|**new-badge** \| `/patterns/new-badge` \|
`/patterns-legacy/new-badge`\|
\|**pickers** \| `/patterns/pickers` \| `/patterns-legacy/pickers`\|
\|**text-fields** \| `/patterns/text-fields` \|
`/patterns-legacy/text-fields`\|
- Page padding and max-width adjusted such that live previews for
components and patterns always display the desktop breakpoint.


- [Shopify#8466](Shopify#8466)
[`3b32f3477`](Shopify@3b32f34)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Adds
documentation for the Page breadcrumbs migration

### Patch Changes

- [Shopify#8475](Shopify#8475)
[`ba7280068`](Shopify@ba72800)
Thanks [@chloerice](https://github.com/chloerice)! - Added documentation
for `selector-disallowed-list` `@shopify/stylelint/polaris` rule


- [Shopify#8474](Shopify#8474)
[`00028952d`](Shopify@0002895)
Thanks [@jesstelford](https://github.com/jesstelford)! - Refactor
hideFromNav logic to support breadcrumbs


- [Shopify#8490](Shopify#8490)
[`16f5a3638`](Shopify@16f5a36)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add caveats to
code examples in Patterns


- [Shopify#8491](Shopify#8491)
[`39704dccf`](Shopify@39704dc)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add 'New'
status badge to Patterns nav item


- [Shopify#8422](Shopify#8422)
[`3975668a2`](Shopify@3975668)
Thanks [@kyledurand](https://github.com/kyledurand)! - Organized
categories on components page


- [Shopify#8473](Shopify#8473)
[`597b78ba2`](Shopify@597b78b)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Remove draft
pattern pages from PatternsPage


- [Shopify#8477](Shopify#8477)
[`c67d1a5b6`](Shopify@c67d1a5)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fix global types
file


- [Shopify#8418](Shopify#8418)
[`4018ee268`](Shopify@4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [Shopify#8489](Shopify#8489)
[`0a525643d`](Shopify@0a52564)
Thanks [@raquelbreternitz](https://github.com/raquelbreternitz)! - Add
new page on alt text


- [Shopify#8410](Shopify#8410)
[`2312cbb6a`](Shopify@2312cbb)
Thanks [@kellydanma](https://github.com/kellydanma)! - Use Close instead
of OK

- Updated dependencies
\[[`7f0f2cad1`](Shopify@7f0f2ca),
[`4799b6550`](Shopify@4799b65),
[`cbbb5648c`](Shopify@cbbb564),
[`c60617518`](Shopify@c606175),
[`cc706f4ce`](Shopify@cc706f4),
[`f5e450357`](Shopify@f5e4503),
[`3537b3aeb`](Shopify@3537b3a),
[`0e9fa8433`](Shopify@0e9fa84),
[`4018ee268`](Shopify@4018ee2),
[`7bbe096e4`](Shopify@7bbe096),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris@10.32.0
    -   @shopify/polaris-tokens@6.6.1

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants