Component: `@phase2/outline-core-breadcrumb`

[glitchgirl]

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• [ ] Visual Testing
• [ ] Automated Testing
• [ ] Accessibility Testing

Checklist

• [ ] My code follows the style guidelines of this project
• [ ] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [ ] Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• New Features

  • Added a pre-commit hook script for improved code quality checks.
  • Updated the development guide link in the README to direct users to the new component development documentation.
  • Introduced new icon designs in the deprecated icon library for enhanced visual appeal.
  • Added new styles for breadcrumb navigation components, including flexbox layout and accessibility improvements.
  • Introduced a ResizeController for dynamic breadcrumb rendering based on screen size.
  • Added a new story for the OutlineCoreBreadcrumb component demonstrating its usage.

• Refactor

  • Updated various components and documentation with new CSS variables, formatting, and reorganized styles for consistency and improved readability.

• Documentation

  • Updated README with the new link to the development guide.
  • Added documentation for the breadcrumb property in the breadcrumb component.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: b143475b181e3970ed6b8301b9b27c626562cb5a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify[bot]]

❌ Deploy Preview for outlinejs failed.

Name	Link
🔨 Latest commit	b143475b181e3970ed6b8301b9b27c626562cb5a
🔍 Latest deploy log	https://app.netlify.com/sites/outlinejs/deploys/65d4c242f65db6000820b17e

[coderabbitai[bot]]

Walkthrough

These updates encompass a range of changes aimed at improving functionality, accessibility, and styling across components and documentation. The enhancements include the addition of a pre-commit script for lefthook, icon library updates, significant CSS adjustments for breadcrumb navigation, and documentation refinements. These changes are designed to enhance the development process, user interface design, and accessibility aspects for a more efficient and inclusive user experience.

Changes

File(s)	Summary
.husky/pre-commit	Introduced a script to check and run lefthook with specific parameters.
README.md	Updated the link to the Outline development guide.
packages/components/@deprecated/outline-icon/src/libraries/library.system.ts	Updated icon SVG paths and dimensions.
packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.css, .../outline-core-breadcrumb.lightdom.css	Updated styles for breadcrumb navigation, including flexbox layout and link decorations.
packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts, .../resize-controller.ts	Added imports and properties for styles and resize control; updated rendering method for screen size responsiveness.
packages/documentation/outline-storybook/config/storybook.main.css	Reformatted CSS variables, adjusted font sizes, and line heights.
packages/documentation/outline-storybook/stories/components/outline-core-breadcrumb.stories.mdx	Introduced a new story demonstrating the usage of OutlineCoreBreadcrumb component.

`, 'back': `` };

---

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.css: ## Short summary

The changes in outline-core-breadcrumb.css involve significant alterations to the styling rules. The styles for lists (ol, ul) and list items (li) have been modified to use flexbox for layout and include spacing adjustments. Additionally, a new styling rule for breadcrumb separators has been added to address accessibility concerns. The anchor (a) styling has been updated to include focus and hover effects, and new classes .separator and .previous-link have been introduced.

---

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.lightdom.css: This file introduces styles for breadcrumb navigation components, including list styling, flexbox layout, and link decorations.

---

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.encapsulated.css: The new file outline-core-breadcrumb.encapsulated.css introduces styling rules for breadcrumb components, including list styling, flexbox layout, separator styling, link decorations, and focus styles.

---

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.global.css: The new file outline-core-breadcrumb.global.css introduces styling rules for breadcrumbs and navigation elements. It defines the layout and appearance of ordered and unordered lists, list items, links, and separators within a breadcrumb component.

---

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts: ## Short summary

• Added imports for CSSResultGroup, css, and AdoptedStylesheets.
• Added imports for globalStyles, encapsulatedStyles, and ResizeController.
• Added a new property breadcrumb with a description.
• Updated static styles assignment.
• Added GlobalStylesheets and EncapsulatedStylesheets properties.
• Added debug and resizeController properties.
• Modified the render method to handle mobile view and clone elements.

---

packages/components/outline-core-breadcrumb/src/resize-controller.ts: This file introduces a ResizeController class that implements the ReactiveController interface. It provides functionality for observing and reacting to size changes of a host element, including debouncing the resize events and calculating breakpoints based on the element's width.

---

packages/documentation/outline-storybook/config/storybook.main.css: ## Short summary

The changes in the packages/documentation/outline-storybook/config/storybook.main.css file mainly involve the formatting and reorganization of CSS variables. The variables have been reformatted to have no spaces around the colons and have been grouped together with additional variables added for various shades of gray, blue, red, yellow, green, indigo, purple, and pink. Additionally, adjustments have been made to the font sizes and line heights, and some minor changes to the default styles for various HTML elements.

---

packages/documentation/outline-storybook/stories/components/outline-core-breadcrumb.stories.mdx: The file outline-core-breadcrumb.stories.mdx introduces a new story for the OutlineCoreBreadcrumb component. It provides a usage example of the component within a navigation context, demonstrating the rendering of a breadcrumb trail.

---

packages/components/outline-core-breadcrumb/docs/outline-core-breadcrumb.stories.mdx: This new file introduces a documentation story for the OutlineCoreBreadcrumb component, showcasing a breadcrumb navigation structure with sample links.

-->

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[socket-security[bot]]

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request