fix(chore): remove the flex-layout dependency by vaibhavbhalla2505 · Pull Request #78 · sourcefuse/arc-ng-components

vaibhavbhalla2505 · 2026-02-09T10:00:45Z

Description

This pull request introduces several improvements and updates to the monorepo’s CI/CD workflows, the search library’s theming and build process, and general dependency management. The most significant changes include enhanced theming support for the search component, streamlined build and linking scripts, updated workflow configurations for better automation and security, and dependency/version upgrades for improved compatibility.

Monorepo & CI/CD Workflow Updates:

Updated CI workflows to target the search-v19 branch instead of master for both push and pull request events, ensuring that automation runs on the correct branch.
Removed global installation and bootstrapping of Lerna in CI workflows; now uses npx lerna run test directly for running tests, simplifying the pipeline. [1] [2]
Upgraded GitHub Actions in the release workflow to use newer versions of actions/checkout and actions/setup-node, added id-token permission, and improved npm registry authentication for trusted publishing. [1] [2] [3]

Fixes #76

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)
Intermediate change (work in progress)

Checklist:

Performed a self-review of my own code
npm test passes on your machine
New tests added or existing tests modified to cover all changes
Code conforms with the style guide
API Documentation in code was updated
Any dependent changes have been merged and published in downstream modules

.github/workflows/release.yml

lerna.json

Copilot

Pull request overview

This PR removes the deprecated @angular/flex-layout dependency from the search component, updates the search library styling to use CSS variables for theming, and adjusts repo tooling/CI to streamline builds and releases.

Changes:

Removed @angular/flex-layout usage/dependencies and replaced layout behavior with CSS.
Refactored search component styles to support theming via CSS custom properties; updated docs and sandbox example accordingly.
Updated monorepo scripts/workflows and Lerna configuration for building/testing/publishing.

Reviewed changes

Copilot reviewed 19 out of 23 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
`sandbox/search-client-example/src/app/search-bar/search-bar.component.ts`	Adds component stylesheet wiring for sandbox styling overrides.
`sandbox/search-client-example/src/app/search-bar/search-bar.component.scss`	Demonstrates theming overrides via CSS variables.
`sandbox/search-client-example/package.json`	Removes flex-layout; updates search-client dependency (but currently points to an older version).
`sandbox/search-client-example/package-lock.json`	Lockfile updates; still pulls `@angular/flex-layout` via `@sourceloop/search-client@8.0.0`.
`packages/search/projects/search-lib/src/styles.scss`	Adjusts Material theme import path.
`packages/search/projects/search-lib/src/lib/search/search.component.scss`	Major style refactor: flex layout, CSS vars, hover/focus theming, spacing changes.
`packages/search/projects/search-lib/src/lib/search/search.component.html`	Removes `fxLayout` usage; adds CSS classes for styling hooks.
`packages/search/projects/search-lib/src/lib/search-element.module.ts`	Removes `FlexLayoutModule` from imports.
`packages/search/projects/search-lib/package.json`	Removes `@angular/flex-layout` dependency.
`packages/search/projects/search-lib/package-lock.json`	Removes flex-layout and updates resolved dependency versions.
`packages/search/projects/search-lib/ng-package.json`	Adds `assets` configuration for packaging.
`packages/search/projects/search-lib/README.md`	Updates usage/theming docs (currently has broken markdown fencing).
`packages/search/package.json`	Removes `@angular/flex-layout` dependency.
`packages/search/angular.json`	Adjusts style budget threshold.
`packages/search/README.md`	Updates usage/theming docs (currently has broken markdown fencing).
`package.json`	Adds helper scripts for building/linking/running the search sandbox; updates dev tooling versions.
`lerna.json`	Updates Lerna config (publish settings, formatting).
`build-link-search.sh`	Adds helper build/link script (currently has invalid shebang).
`.github/workflows/release.yml`	Updates actions versions and publishing auth approach.
`.github/workflows/pull_request.yml`	Removes bootstrap steps; uses `npx lerna`.
`.github/workflows/main.yml`	Targets `search-v19`; removes bootstrap steps; uses `npx lerna`.

Files not reviewed (1)

packages/search/projects/search-lib/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-10T09:04:46Z

sandbox/search-client-example/package-lock.json

    "node_modules/@sourceloop/search-client": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@sourceloop/search-client/-/search-client-8.1.0.tgz",
-      "integrity": "sha512-28f/uHHxEfhv72GjB5e+kZd+dbydSWJPusHT1jgDqWtIsUKAC7AS3D+C8qJoKiV/xBY32P6ZqrgYmfqi1ApeFA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@sourceloop/search-client/-/search-client-8.0.0.tgz",
+      "integrity": "sha512-lY469SwlYVCD0Q+JMrByaeNUcKx0X1sQry4b9yZGG/S3HgN/del0xm4ofSY2VNwnvmpUeoVnMv1Nl+MhnaYJGA==",
      "license": "MIT",


The lockfile still resolves @sourceloop/search-client to 8.0.0. That version brings in @angular/flex-layout as a peer dependency, so flex-layout will still be installed in the sandbox despite removing it from package.json. Update the sandbox to consume the updated search-client version from this PR and regenerate package-lock.json so it no longer pulls flex-layout.

Copilot · 2026-02-10T09:04:46Z

packages/search/projects/search-lib/README.md

+````scss
+sourceloop-search {
+  --search-background: #f7f7f7; /* Background of the search container */
+  --search-input-background: #f1f3f4; /* Background of the input field */
+  --search-input-text-color: #6b6b6b; /* Text color in the input field */
+  --search-border-hover: #a53159; /* Border color on hover */
+  --search-border-focus: #90003b; /* Border color when focused */
+  --search-dropdown-background: #90003b; /* Background of the category dropdown (on hover/focus) */
+  --search-dropdown-text-color: #ffffff; /* Text color in the category dropdown (on hover/focus) */
+  --search-highlight-bg: #fee8e8; /* Background color for highlighted suggestions */
+  --search-heading-color: #9c9c9c; /* Color of category headings */
+  --search-text-color: #333; /* General text color */
+  --search-icon-color: #33333380; /* Color of icons */
+}
+
+####Example: Custom Theming To customize the search component, add the following
+    to your `component.scss` ```scss
+


The Markdown fencing in this section is broken: the ````scss code block starts, but then headings/text (####Example...) are included inside the same code fence and the nested ```scss fence never closes cleanly. This renders incorrectly on GitHub and makes the theming docs hard to read. Please restructure this into normal headings/text with separate properly-closed code blocks.

Copilot · 2026-02-10T09:04:46Z

packages/search/README.md

+````scss
+sourceloop-search {
+  --search-background: #f7f7f7; /* Background of the search container */
+  --search-input-background: #f1f3f4; /* Background of the input field */
+  --search-input-text-color: #6b6b6b; /* Text color in the input field */
+  --search-border-hover: #a53159; /* Border color on hover */
+  --search-border-focus: #90003b; /* Border color when focused */
+  --search-dropdown-background: #90003b; /* Background of the category dropdown (on hover/focus) */
+  --search-dropdown-text-color: #ffffff; /* Text color in the category dropdown (on hover/focus) */
+  --search-highlight-bg: #fee8e8; /* Background color for highlighted suggestions */
+  --search-heading-color: #9c9c9c; /* Color of category headings */
+  --search-text-color: #333; /* General text color */
+  --search-icon-color: #33333380; /* Color of icons */
+}
+
+####Example: Custom Theming To customize the search component, add the following
+    to your `component.scss` ```scss
+


The Markdown fencing in this section is broken: the ````scss code block starts, but then headings/text (####Example...) are included inside the same code fence and the nested ```scss fence never closes cleanly. This renders incorrectly on GitHub and makes the theming docs hard to read. Please restructure this into normal headings/text with separate properly-closed code blocks.

Copilot · 2026-02-10T09:04:47Z

build-link-search.sh

@@ -0,0 +1,24 @@
+!/bin/bash


The script shebang is missing the leading # (!/bin/bash), which will prevent the script from running when executed directly (e.g., ./build-link-search.sh). Update it to a valid shebang (e.g., #!/usr/bin/env bash or #!/bin/bash).

Suggested change

!/bin/bash

#!/usr/bin/env bash

Copilot · 2026-02-10T09:04:47Z

packages/search/projects/search-lib/src/lib/search/search.component.html

                  )
                "
-                style="display: inline"
+                class="inline-display"


class="inline-display" is used on the <p> elements, but there is no corresponding style in search.component.scss. Without the old inline display: inline, the <p> will revert to block display (and default margins), which can break the single-line/ellipsis layout. Either reintroduce the inline style, or define .inline-display in the component stylesheet (e.g., display: inline; margin: 0;).

Suggested change

class="inline-display"

class="inline-display"

style="display: inline; margin: 0;"

Copilot · 2026-02-10T09:04:47Z

packages/search/projects/search-lib/src/lib/search/search.component.html

+                  fetchModelImageUrlFromSuggestion(suggestion)
                "
-                class="suggestions-categorize-false"
+                class="suggestions-categorize-false suggestion-image"


suggestion-image is added and the inline margin-right was removed, but there is no matching CSS rule for .suggestion-image in search.component.scss. This likely removes the intended spacing between the image and the text in the suggestions list. Add an explicit style for .suggestion-image (e.g., margin-right / vertical-align) or restore the previous spacing behavior.

Suggested change

class="suggestions-categorize-false suggestion-image"

class="suggestions-categorize-false suggestion-image"

style="margin-right: 8px; vertical-align: middle;"

Copilot · 2026-02-10T09:04:48Z

sandbox/search-client-example/package.json

    "@angular/router": "^19.2.17",
-    "@sourceloop/search-client": "^8.1.0",
+    "@sourceloop/search-client": "^8.0.0",
    "ajv": "^8.8.2",


The sandbox is pinned to @sourceloop/search-client ^8.0.0, but this repo’s library package is 8.2.0 and the older 8.0.0 still declares @angular/flex-layout as a peer dependency (so flex-layout will still get installed). To actually validate “remove flex-layout dependency”, update the sandbox dependency to the version that contains this change (and regenerate the lockfile).

vaibhavbhalla2505 requested a review from yeshamavani February 9, 2026 10:00

vaibhavbhalla2505 self-assigned this Feb 9, 2026

vaibhavbhalla2505 force-pushed the GH-76 branch from 3ad38ed to eaeb5ff Compare February 9, 2026 10:05

yeshamavani reviewed Feb 10, 2026

View reviewed changes

.github/workflows/release.yml Outdated Show resolved Hide resolved

lerna.json Show resolved Hide resolved

vaibhavbhalla2505 force-pushed the GH-76 branch from eaeb5ff to c9db582 Compare February 10, 2026 06:38

fix(chore): remove the flex-layout dependency

514196b

vaibhavbhalla2505 force-pushed the GH-76 branch from c9db582 to 514196b Compare February 10, 2026 06:46

rohit-sourcefuse requested a review from Copilot February 10, 2026 08:56

Copilot started reviewing on behalf of rohit-sourcefuse February 10, 2026 08:57 View session

Copilot AI reviewed Feb 10, 2026

View reviewed changes

yeshamavani merged commit afb047f into search-v19 Feb 10, 2026
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(chore): remove the flex-layout dependency#78

fix(chore): remove the flex-layout dependency#78
yeshamavani merged 1 commit intosearch-v19from
GH-76

vaibhavbhalla2505 commented Feb 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	class="inline-display"
	class="inline-display"
	style="display: inline; margin: 0;"

	class="suggestions-categorize-false suggestion-image"
	class="suggestions-categorize-false suggestion-image"
	style="margin-right: 8px; vertical-align: middle;"

Conversation

vaibhavbhalla2505 commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist:

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vaibhavbhalla2505 commented Feb 9, 2026 •

edited

Loading