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.

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

feat(component): breadcrumb #4065

Merged
merged 73 commits into from
Dec 13, 2024
Merged

feat(component): breadcrumb #4065

merged 73 commits into from
Dec 13, 2024

Conversation

alionazherdetska
Copy link
Contributor

No description provided.

@alionazherdetska alionazherdetska requested a review from a team as a code owner November 25, 2024 12:41
@alionazherdetska alionazherdetska linked an issue Nov 25, 2024 that may be closed by this pull request
Copy link

changeset-bot bot commented Nov 25, 2024

🦋 Changeset detected

Latest commit: c167a2b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@swisspost/design-system-documentation Minor
@swisspost/design-system-components Minor
@swisspost/design-system-components-angular-workspace Patch
@swisspost/design-system-components-react Minor
@swisspost/design-system-components-angular Minor
@swisspost/design-system-nextjs-integration Patch
@swisspost/design-system-styles Minor
@swisspost/design-system-tokens Minor
@swisspost/design-system-intranet-header Minor
@swisspost/design-system-icons Minor
@swisspost/design-system-migrations Minor
@swisspost/design-system-styles-primeng Minor
@swisspost/internet-header Patch
@swisspost/design-system-intranet-header-workspace Patch
@swisspost/design-system-styles-primeng-workspace Patch
@swisspost/design-system-intranet-header-showcase Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@alionazherdetska alionazherdetska marked this pull request as draft November 25, 2024 12:41
@swisspost-bot
Copy link
Contributor

swisspost-bot commented Nov 25, 2024

Related Previews

@alionazherdetska alionazherdetska removed the request for review from alizedebray November 25, 2024 12:42
@alionazherdetska alionazherdetska force-pushed the 3207-component_breadcrumb branch from 11a7eb7 to d22d45b Compare November 28, 2024 12:02
@alionazherdetska alionazherdetska marked this pull request as ready for review December 9, 2024 12:58
@alionazherdetska alionazherdetska requested a review from a team as a code owner December 9, 2024 12:58
align-items: center;
}

.breadcrumbs-nav {
Copy link
Member

Choose a reason for hiding this comment

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

Nesting all of these styles creates unnecessary specific selectors in CSS. Every level of nesting will add specificity to a selector: .breadcrumbs-nav .breadcrumbs-list li a etc.. Because we're in a shadow root, we don't need to be this specific.

Use nesting only if you need to make the selector more specific like ul > li needs the ul part to work.

Copy link
Member

Choose a reason for hiding this comment

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

image

Breadcrumb items in the dropdown should not have a visible arrow.

@alionazherdetska alionazherdetska force-pushed the 3207-component_breadcrumb branch from 230e4f3 to 1317e36 Compare December 13, 2024 10:07
@alionazherdetska alionazherdetska merged commit 8d4a5aa into main Dec 13, 2024
10 checks passed
@alionazherdetska alionazherdetska deleted the 3207-component_breadcrumb branch December 13, 2024 13:16
gfellerph pushed a commit that referenced this pull request Dec 16, 2024
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.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @swisspost/[email protected]

### Major Changes

- Updated the `post-togglebutton` component to offer greater
flexibility. You can now control the visibility of elements within the
`post-togglebutton` using the `data-showwhen="toggled"` and
`data-showwhen="untoggled"` attributes. Any content without a
`data-showwhen` attribute will always be visible, regardless of the
toggle state. (by [@alizedebray](https://github.com/alizedebray) with
[#4223](#4223))

### Minor Changes

- Added composable footer component. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Added the `post-megadropdown` component. (by
[@leagrdv](https://github.com/leagrdv) with
[#4177](#4177))

- Added the parts `button` and `body` in the `post-accordion-item`
component, so one can override styles from the outside. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Added the `post-breadcrumb` component to provide a standalone
breadcrumb navigation solution. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4065](#4065))

- Added the css parts `button` and `body` in the `post-accorddion-item`
component. (by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Added the `post-language-switch` component that enables users to
change the language of a page. (by
[@leagrdv](https://github.com/leagrdv) with
[#4044](#4044))

### Patch Changes

- Switched mega dropdown content to one column on mobile. (by
[@leagrdv](https://github.com/leagrdv) with
[#4300](#4300))

- Fixed opening state of megadropdown trigger and expanded detection.
(by [@leagrdv](https://github.com/leagrdv) with
[#4299](#4299))

- Fix tab isolation in nested `post-tabs` components by scoping tab
queries and interactions to the current instance. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4211](#4211))

- Added a fixed slot `post-list-item` on the `post-list-item` host
element, so it is no longer necessary to add it manually. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Fixed the used `headingLevel` in the `post-accorddion-item` component.
The component now uses the value from its closest `post-accorddion`
parent component, if this is specified and falls back to `h2` if not
specified. (by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Updated the `post-togglebutton` to function like a real button,
including support for keyboard navigation and proper focus styles. (by
[@alizedebray](https://github.com/alizedebray) with
[#4242](#4242))

- Fixed an issue with the post-list component where the `horizontal`
property could not be set programmatically. Also, reduced the
specificity of the component's styles to make customization easier. (by
[@alizedebray](https://github.com/alizedebray) with
[#4137](#4137))

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Minor Changes

- Added composable footer component. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Removed outdated portal-specific styles, including
subnavigation-related rules. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4186](#4186))

- Added the possibility to define a `$child-selector` parameter with our
list mixins, so they can be used also with custom elements. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Updated the utility classes for sizing. (by
[@myrta2302](https://github.com/myrta2302) with
[#4012](#4012))

- Updated `.btn-link` to look like a regular link and old `.btn-link` is
now `.btn-tertiary .px-0`. (by [@leagrdv](https://github.com/leagrdv)
with [#4200](#4200))

- Implemented new pixel based sizes. (by
[@myrta2302](https://github.com/myrta2302) with
[#4012](#4012))

### Patch Changes

- Fixed the `btn-icon` styles, so icons within can no longer be rendered
too small, because of the inline-padding on the button. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Fixed the appstore-badge styles to get rid of the inline gap below.
(by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]



## @swisspost/[email protected]



## @swisspost/[email protected]



## @swisspost/[email protected]

### Minor Changes

- Added the `post-breadcrumb` component to provide a standalone
breadcrumb navigation solution. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4065](#4065))

- Updated the utility classes for sizing. (by
[@myrta2302](https://github.com/myrta2302) with
[#4012](#4012))

- Added the css parts `button` and `body` in the `post-accorddion-item`
component. (by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](#4190))

- Updated `.btn-link` to look like a regular link and old `.btn-link` is
now `.btn-tertiary .px-0`. (by [@leagrdv](https://github.com/leagrdv)
with [#4200](#4200))

- Implemented new pixel based sizes. (by
[@myrta2302](https://github.com/myrta2302) with
[#4012](#4012))

- Added the `post-language-switch` component that enables users to
change the language of a page. (by
[@leagrdv](https://github.com/leagrdv) with
[#4044](#4044))

### Patch Changes

- Updated the `post-togglebutton` component to offer greater
flexibility. You can now control the visibility of elements within the
`post-togglebutton` using the `data-showwhen="toggled"` and
`data-showwhen="untoggled"` attributes. Any content without a
`data-showwhen` attribute will always be visible, regardless of the
toggle state. (by [@alizedebray](https://github.com/alizedebray) with
[#4223](#4223))
-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

---------

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.

[component]: Breadcrumb
3 participants