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

added "divider" to right rails #1924

Merged
merged 2 commits into from
Jan 26, 2024

Conversation

blakeganderson
Copy link
Contributor

@blakeganderson blakeganderson commented Jan 24, 2024

Description

Added divider between main section and right rail for both right-rail and right-rail-advanced layouts.

NOTE: I did not use the divider component because I would have to wrap the right rail in an additional div with display:flex in order to get the divider component to render vertically. The approach I used is the same approach we use in the footer top container

Jira Ticket

Acceptance Criteria

A vertical divider should be displayed between the right rail and the main section, this applies for

  • Right rail layout
  • Advanced right rail layout

Test Steps

  1. Checkout this branch git checkout THEMES-1641
  2. Run fusion repo with linked blocks npx fusion start -f -l @wpmedia/right-rail-advanced-block,@wpmedia/right-rail-block
  3. Make sure the divider renders correctly on desktop pages that use the 2 layouts, and matches Figma designs
  4. Make sure the divider does not render on mobile or tablet pages

Effect Of Changes

Before

No divider between main and right rail sections

After

Divider between main and right rail sections

image

Dependencies or Side Effects

Examples of dependencies or side effects are:

Author Checklist

The author of the PR should fill out the following sections to ensure this PR is ready for review.

  • Confirmed all the test steps a reviewer will follow above are working.
  • Confirmed there are no linter errors. Please run npm run lint to check for errors. Often, npm run lint:fix will fix those errors and warnings.
  • Ran this code locally and checked that there are not any unintended side effects. For example, that a CSS selector is scoped only to a particular block.
  • Confirmed this PR has reasonable code coverage. You can run npm run test:coverage to see your progress.
    • Confirmed this PR has unit test files
    • Ran npm run test, made sure all tests are passing
    • If the amount of work to write unit tests for this change are excessive,
      please explain why (so that we can fix it whenever it gets refactored).
  • Confirmed relevant documentation has been updated/added.

Reviewer Checklist

The reviewer of the PR should copy-paste this template into the review comments on review.

  • Linting code actions have passed.
  • Ran the code locally based on the test instructions.
    • I don’t think this is needed to be tested locally. For example, a padding style change (storybook?) or a logic change (write a test).
  • I am a member of the engine theme team so that I can approve and merge this. If you're not on the team, you won't have access to approve and merge this pr.
  • Looked to see that the new or changed code has code coverage, specifically. We want the global code coverage to keep on going up with targeted testing.

@blakeganderson blakeganderson requested a review from a team as a code owner January 24, 2024 20:13
@blakeganderson blakeganderson added the ready for review The PR author has completed the PR template and is ready for a review label Jan 24, 2024
@blakeganderson blakeganderson merged commit df91edb into arc-themes-release-version-2.1.4 Jan 26, 2024
5 of 6 checks passed
@blakeganderson blakeganderson deleted the THEMES-1641 branch January 26, 2024 16:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready for review The PR author has completed the PR template and is ready for a review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants