Search box is not aligned to the index nav width on the release notes page #2085

ColinRosati · 2024-09-13T10:56:58Z

Description of changes

Align layout header and layout page content for release notes
util for shared layout for header and page content
refactor grid layouts
- Shared const IDs in layout components
- extracted config and logic

Link to original ticket
closes #2068

Link to change (deep-link for reviewing the change)

Screenshot of changes (if applicable)

DoD guidelines

user documentation added?
stakeholders approve changes? (if needed)

changeset-bot · 2024-09-13T10:57:02Z

🦋 Changeset detected

Latest commit: 8be6e25

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

This PR includes changesets to release 6 packages

Name	Type
@commercetools-website/self-learning-smoke-test	Minor
@commercetools-docs/gatsby-theme-docs	Minor
@commercetools-website/api-docs-smoke-test	Patch
@commercetools-website/docs-smoke-test	Patch
@commercetools-website/documentation	Patch
@commercetools-website/site-template	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

github-actions · 2024-09-13T10:57:14Z

🚚 Build Process Details

Preview URLs:

https://docskit-cc-searchbox-is-not-aligned-to-the-index-nav-width-o.commercetools.vercel.app (permalink to the last build of this branch)
https://docskit-sha-2ce66b2542a85b28d22496c42f2b7fcb2afadd3f.commercetools.vercel.app (this commit)

ColinRosati · 2024-09-30T10:50:48Z

packages/gatsby-theme-docs/src/layouts/internals/layout-design-config.ts

+ *
+ * Note: Release notes page has a different varient on column two's width to account for search filters
+ */
+export const contentLayoutConfig = {


Extracted a single source of truth for layout config mapping.
We have 2 layouts here "default" & "releaseNotes"

ColinRosati · 2024-09-30T10:52:39Z

packages/gatsby-theme-docs/src/layouts/internals/layout-design-config.ts

+};
+
+// Namespace declarations for all app layout grid ids
+export const GRID_ID_ROW_ONE = {


Extracting shared vars for global grid layout ids

ColinRosati · 2024-09-30T10:53:52Z

packages/gatsby-theme-docs/src/layouts/internals/layout-design-utils.ts

+ * @param allowWideContentLayout boolean to determine if the page should allow wide content layout
+ * @returns
+ */
+export const getPageLayoutGridStyles = ({


This is the single entry point for layout components to get their grid styling from. We can avoid layout drift by reducing the duplicated code

ColinRosati · 2024-09-30T11:01:56Z

packages/gatsby-theme-docs/src/layouts/internals/layout-header.js

+      gridRows,
+      isReleaseNotesPage: props.isReleaseNotesPage,
+      allowWideContentLayout: props.allowWideContentLayout,
+      isHeader: true,


Header flag configures fixed width or not

websites/self-learning-smoke-test/src/layouts/learning-home.js

gabriele-ct

The refactor seems ok, I'm relying mostly on VRT to ensure possible side effects.
One important thing @ColinRosati make sure to link the correct issue to the PR, as far as I can see the one linked is not related with the task

ColinRosati · 2024-09-30T12:36:18Z

The refactor seems ok, I'm relying mostly on VRT to ensure possible side effects. One important thing @ColinRosati make sure to link the correct issue to the PR, as far as I can see the one linked is not related with the task

Thanks updated the link. I was relying on VRT as well. I manually tested few different layouts

…-width-on-the-release-notes-page

ColinRosati · 2024-09-30T14:27:00Z

Hey @zbalek can you help check that this fixes the layout issue for release notes?
I also did some refactor to unify layout code could you click around a few pages to see if you can spot any layout changes?

zbalek · 2024-09-30T14:39:25Z

Hey @zbalek can you help check that this fixes the layout issue for release notes? I also did some refactor to unify layout code could you click around a few pages to see if you can spot any layout changes?

Hi @ColinRosati can you please share a preview link?

ColinRosati · 2024-10-01T07:17:26Z

@zbalek Theres a few different layouts here:
https://docskit-cc-searchbox-is-not-aligned-to-the-index-nav-width-o.commercetools.vercel.app/docs-smoke-test/
https://docskit-cc-searchbox-is-not-aligned-to-the-index-nav-width-o.commercetools.vercel.app/api-docs-smoke-test/

For the release notes search box I can only test that locally unfornately and will have to wait till we merge and test the changes in docs release

zbalek · 2024-10-01T07:27:04Z

@ColinRosati Okay, in that case I only took a look at the layouts in the links you've shared. The second one actually misses a search box completely (?🤔)

ColinRosati · 2024-10-01T07:41:56Z

@zbalek from what I see if we compare against main on that one route the search box is not present.

Comparing
https://docs-kit.commercetools.vercel.app/api-docs-smoke-test/layouts/type-regular-desktop
https://docskit-cc-searchbox-is-not-aligned-to-the-index-nav-width-o.commercetools.vercel.app/api-docs-smoke-test/layouts/type-regular-desktop

Maybe Im missing something though?

gabriele-ct · 2024-10-01T07:49:58Z

As fare as I can see, the ticket seems to refer to the release notes page which exists only on the docs repo and uses a custom layout see websites/docs/src/pages/release-notes.js in docs repo.
I'd start from there.

ColinRosati · 2024-10-01T08:21:56Z

As fare as I can see, the ticket seems to refer to the release notes page which exists only on the docs repo and uses a custom layout see websites/docs/src/pages/release-notes.js in docs repo. I'd start from there.

Thats right, the docs release-notes page as well as our other pages use the layout components within docs-kit. Ive tested the changes locally for release notes page, but unfortunately wont be able to get a preview deploy of the docs repo. I would propose we move forward with the PR and do the feature QA in docs release

gabriele-ct · 2024-10-01T08:39:24Z

In this case I would proceed as follow:

merge this PR
create a new release that includes these changes
apply the new release to docs repo on a feature branch
ensure the issue with the release-notes page is gone, or work on fix for it (in the same branch)
finally ask stakeholders to verify the issue directly on the docs repo preview.
merge the docs PR

Ensure that the issue remains open as this PR it's not going to fix it directly.

@FFawzy do you agree?

… page (#2085) Description of changes Align layout header and layout page content for release notes util for shared layout for header and page content refactor grid layouts Shared const IDs in layout components extracted config and logic Link to original ticket closes #2068 * feat: Shared Page Content layout util * chore: use global grid ids in layouts * chore: add changeset * fix: xl column2 bug * chore: code improvements * fix: header row height * fix: column2 tablet * chore: update comment * fix: column2 fixed body

* feat: add feedback feature to self-learning pages * chore: added type definitions for png * chore: fix padding and add script loading delay * chore: refactor to use same thumbs component in ai assistant * chore: changeset * chore: hide feedback buttons on mobile * chore: add google analytics call * chore: address PR comments * Search box is not aligned to the index nav width on the release notes page (#2085) Description of changes Align layout header and layout page content for release notes util for shared layout for header and page content refactor grid layouts Shared const IDs in layout components extracted config and logic Link to original ticket closes #2068 * feat: Shared Page Content layout util * chore: use global grid ids in layouts * chore: add changeset * fix: xl column2 bug * chore: code improvements * fix: header row height * fix: column2 tablet * chore: update comment * fix: column2 fixed body --------- Co-authored-by: Colin Rosati <[email protected]>

ColinRosati added 2 commits September 13, 2024 12:31

feat: Shared Page Content layout util

cdcb51d

chore: use global grid ids in layouts

62843b6

chore: add changeset

8154af6

ColinRosati marked this pull request as draft September 13, 2024 12:17

ColinRosati added 6 commits September 13, 2024 15:08

fix: xl column2 bug

4ec7b84

chore: code improvements

71dcd0a

fix: header row height

933b26a

fix: column2 tablet

2e9cc81

chore: update comment

d920806

fix: column2 fixed body

50474f6

ColinRosati marked this pull request as ready for review September 30, 2024 10:36

ColinRosati commented Sep 30, 2024

View reviewed changes

gabriele-ct reviewed Sep 30, 2024

View reviewed changes

websites/self-learning-smoke-test/src/layouts/learning-home.js Show resolved Hide resolved

gabriele-ct approved these changes Sep 30, 2024

View reviewed changes

Merge branch 'main' into cc-searchbox-is-not-aligned-to-the-index-nav…

8be6e25

…-width-on-the-release-notes-page

ColinRosati merged commit c6b6732 into main Oct 1, 2024
10 checks passed

ColinRosati deleted the cc-searchbox-is-not-aligned-to-the-index-nav-width-on-the-release-notes-page branch October 1, 2024 09:40

ct-changesets bot mentioned this pull request Oct 1, 2024

Version Packages #2091

Merged

ColinRosati mentioned this pull request Oct 2, 2024

Search box is not aligned to the index nav width on the release notes page #2099

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Search box is not aligned to the index nav width on the release notes page #2085

Search box is not aligned to the index nav width on the release notes page #2085

ColinRosati commented Sep 13, 2024 •

edited

Loading

changeset-bot bot commented Sep 13, 2024 •

edited

Loading

github-actions bot commented Sep 13, 2024 •

edited

Loading

ColinRosati Sep 30, 2024 •

edited

Loading

ColinRosati Sep 30, 2024

ColinRosati Sep 30, 2024

ColinRosati Sep 30, 2024

gabriele-ct left a comment

ColinRosati commented Sep 30, 2024

ColinRosati commented Sep 30, 2024

zbalek commented Sep 30, 2024

ColinRosati commented Oct 1, 2024

zbalek commented Oct 1, 2024

ColinRosati commented Oct 1, 2024

gabriele-ct commented Oct 1, 2024

ColinRosati commented Oct 1, 2024 •

edited

Loading

gabriele-ct commented Oct 1, 2024

Search box is not aligned to the index nav width on the release notes page #2085

Search box is not aligned to the index nav width on the release notes page #2085

Conversation

ColinRosati commented Sep 13, 2024 • edited Loading

changeset-bot bot commented Sep 13, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 13, 2024 • edited Loading

ColinRosati Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

ColinRosati Sep 30, 2024

Choose a reason for hiding this comment

ColinRosati Sep 30, 2024

Choose a reason for hiding this comment

ColinRosati Sep 30, 2024

Choose a reason for hiding this comment

gabriele-ct left a comment

Choose a reason for hiding this comment

ColinRosati commented Sep 30, 2024

ColinRosati commented Sep 30, 2024

zbalek commented Sep 30, 2024

ColinRosati commented Oct 1, 2024

zbalek commented Oct 1, 2024

ColinRosati commented Oct 1, 2024

gabriele-ct commented Oct 1, 2024

ColinRosati commented Oct 1, 2024 • edited Loading

gabriele-ct commented Oct 1, 2024

ColinRosati commented Sep 13, 2024 •

edited

Loading

changeset-bot bot commented Sep 13, 2024 •

edited

Loading

github-actions bot commented Sep 13, 2024 •

edited

Loading

ColinRosati Sep 30, 2024 •

edited

Loading

ColinRosati commented Oct 1, 2024 •

edited

Loading