Skip to content

Commit

Permalink
[Breadcrumbs] Consolidate se23 logic and styles (#10030)
Browse files Browse the repository at this point in the history
### WHY are these changes introduced?

Resolves #9920.

### WHAT is this pull request doing?

Consolidates se23 beta logic styles for `Breadcrumbs`.

### How to 🎩


[Storybook](https://5d559397bae39100201eedc1-eghgntjqfq.chromatic.com/?path=/story/all-components-page--with-back-action-on-action)
[Prod
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-page--with-back-action-on-action&globals=polarisSummerEditions2023:true)

🖥 [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)

### 🎩 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)
- [ ] 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
  • Loading branch information
laurkim authored Aug 11, 2023
1 parent de9bae3 commit efc5305
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 151 deletions.
2 changes: 1 addition & 1 deletion .changeset/tall-chicken-repeat.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
'@shopify/polaris': major
---

Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`
Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Breadcrumbs`, `Text`
100 changes: 0 additions & 100 deletions polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss

This file was deleted.

52 changes: 2 additions & 50 deletions polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
import React from 'react';
import {ArrowLeftMinor} from '@shopify/polaris-icons';

import {Icon} from '../Icon';
import {UnstyledLink} from '../UnstyledLink';
import type {CallbackAction, LinkAction} from '../../types';
import {handleMouseUpByBlurring} from '../../utilities/focus';
import {Text} from '../Text';
import {Button} from '../Button';
import {useFeatures} from '../../utilities/features';

import styles from './Breadcrumbs.scss';

export interface BreadcrumbsProps {
/** Back action link */
Expand All @@ -18,44 +12,8 @@ export interface BreadcrumbsProps {

export function Breadcrumbs({backAction}: BreadcrumbsProps) {
const {content} = backAction;
const {polarisSummerEditions2023} = useFeatures();

const contentMarkup = (
<>
<span className={styles.Icon}>
<Icon source={ArrowLeftMinor} />
</span>
<Text as="span" visuallyHidden>
{content}
</Text>
</>
);

const breadcrumbMarkup =
'url' in backAction ? (
<UnstyledLink
key={content}
url={backAction.url}
className={styles.Breadcrumb}
onMouseUp={handleMouseUpByBlurring}
aria-label={backAction.accessibilityLabel}
>
{contentMarkup}
</UnstyledLink>
) : (
<button
key={content}
className={styles.Breadcrumb}
onClick={backAction.onAction}
onMouseUp={handleMouseUpByBlurring}
type="button"
aria-label={backAction.accessibilityLabel}
>
{contentMarkup}
</button>
);

const summerEditionsBreadcrumbMarkup = (
const breadcrumbMarkup = (
<Button
key={content}
url={'url' in backAction ? backAction.url : undefined}
Expand All @@ -66,11 +24,5 @@ export function Breadcrumbs({backAction}: BreadcrumbsProps) {
/>
);

return (
<nav role="navigation">
{polarisSummerEditions2023
? summerEditionsBreadcrumbMarkup
: breadcrumbMarkup}
</nav>
);
return <nav role="navigation">{breadcrumbMarkup}</nav>;
}

0 comments on commit efc5305

Please sign in to comment.