feat: seatch icon focus state styling

[DhaaraniCIT]

Description

feat: seatch icon focus state styling

Clickup

https://app.clickup.com/

Summary by CodeRabbit

• New Features

  • Enhanced search icon styling across various application components to improve focus indication.

• Style

  • Standardized the visual appearance in configuration dialogs, selection fields, mapping tables, and search components for a more cohesive user experience.

[coderabbitai]

Walkthrough

This pull request updates how branding styles are applied by introducing a new property, searchIconFocus, into the branding configuration objects for multiple themes. The changes update several HTML templates to reference this new property for icon styling instead of using conditional logic based on brandingConfig.brandId. In addition, corresponding TypeScript files have been modified to import and expose the brandingStyle as a read-only property. These updates streamline the styling logic across the configuration confirmation dialogs, select fields, multi-select fields, mapping tables, and search components without altering existing functionalities.

Changes

File(s)	Change Summary
src/app/branding/…-style-config.ts (both c1-style-config.ts and fyle-style-config.ts)	Added new property searchIconFocus with theme-specific values to the configuration objects; minor syntax adjustments.
src/app/shared/components/configuration/configuration-confirmation-dialog.component.(html/ts)	Simplified icon class binding in the HTML by using brandingStyle.common.configurationBrandingClass and added a readonly brandingStyle property in the TS file.
src/app/shared/components/configuration/configuration-select-field.component.html	Replaced conditional class binding for <app-svg-icon> with direct reference to brandingStyle.configuration.searchIconFocus.
src/app/shared/components/configuration/email-multi-select-field.component.(html/ts)	Updated <app-svg-icon> styling in the HTML to use brandingStyle.configuration.searchIconFocus and added a new import and readonly property for brandingStyle in the TS file.
src/app/shared/components/helper/mapping/generic-mapping-table.component.(html/ts)	Changed the icon’s styleClasses in the HTML to reference brandingStyle.configuration.searchIconFocus and imported plus declared a readonly brandingStyle property in the TS file.
src/app/shared/components/input/search.component.(html/ts)	Modified the icon’s styling in the HTML to utilize brandingStyle.configuration.searchIconFocus while keeping conditional class addition for focus state; imported and declared a readonly brandingStyle property in the TS file.

Sequence Diagram(s)

sequenceDiagram
    participant Comp as Application Component
    participant BS as brandingStyle
    participant UI as UI Element

    Comp->>BS: Import brandingStyle configuration
    BS-->>Comp: Provide searchIconFocus value
    Comp->>UI: Render icon using brandingStyle.configuration.searchIconFocus

Loading

Possibly related PRs

• feat: common main pages shadow style conversion #1164: Introduced similar changes by adding properties to styling configurations in the branding objects, directly modifying c1Styles and fyleStyles.
• feat: Refactor conditional styles in conguration componets to common branding styles #1166: Added a brandingStyle property and updated class bindings to use centralized branding styles, which aligns with the changes introduced here.

Suggested labels

size/M

Suggested reviewers

• ashwin1111

Poem

I’m a hopping rabbit in the code wood,
With new styles shining where once they stood.
Icons now dance in a cleaner light,
brandingStyle guides them with all its might.
Carrots and commits, we cheer as we code—
A whimsical hop down the style mode road!
🐰✨

Tip

🌐 Web search-backed reviews and chat

• We have enabled web search-based reviews and chat for all users. This feature allows CodeRabbit to access the latest documentation and information on the web.
• You can disable this feature by setting web_search: false in the knowledge_base settings.
• Please share any feedback in the Discord discussion.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6d0d821 and 489db19.

📒 Files selected for processing (11)

• src/app/branding/c1-style-config.ts (1 hunks)
• src/app/branding/fyle-style-config.ts (1 hunks)
• src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html (1 hunks)
• src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts (2 hunks)
• src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html (1 hunks)
• src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html (1 hunks)
• src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.ts (2 hunks)
• src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html (1 hunks)
• src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts (2 hunks)
• src/app/shared/components/input/search/search.component.html (1 hunks)
• src/app/shared/components/input/search/search.component.ts (2 hunks)

✅ Files skipped from review due to trivial changes (1)

• src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html

🔇 Additional comments (11)

src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.ts (2)

11-11: LGTM! Clean import addition.

The addition of brandingStyle import alongside existing brandingConfig aligns with the PR's objective to implement search icon focus state styling.

---

59-59: LGTM! Property follows best practices.

The brandingStyle property is correctly declared as readonly, following Angular best practices for immutable configuration objects and maintaining consistency with the existing brandingConfig pattern.

src/app/branding/fyle-style-config.ts (1)

17-18: LGTM! Clean addition of search icon focus styling.

The new searchIconFocus property follows consistent naming patterns and uses appropriate Tailwind CSS class naming conventions.

src/app/branding/c1-style-config.ts (1)

17-18: LGTM! Consistent implementation of brand-specific search icon focus styling.

The searchIconFocus property maintains consistency with fyle-style-config.ts while appropriately using a brand-specific style value.

src/app/shared/components/input/search/search.component.ts (1)

4-4: LGTM! Clean implementation of branding style access.

The addition of the readonly brandingStyle property follows Angular best practices and enables proper access to the new search icon focus styling.

Also applies to: 35-35

src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts (1)

2-2: LGTM! Consistent implementation of branding style access.

The addition of the readonly brandingStyle property maintains consistency with other components and follows Angular best practices.

Also applies to: 38-38

src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts (1)

5-5: LGTM! Clean addition of brandingStyle.

The changes follow the established pattern of importing and declaring brandingStyle as a readonly property.

Also applies to: 71-71

src/app/shared/components/input/search/search.component.html (1)

2-2: LGTM! Improved search icon styling.

The change effectively centralizes the search icon focus styling while preserving the conditional padding behavior.

src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html (1)

14-14: LGTM! Simplified branding class logic.

The change effectively uses the common branding configuration while maintaining QBD-specific styling when needed.

src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html (1)

55-55: LGTM! Consistent search icon styling.

The change maintains consistency with other search icon implementations by using the centralized styling configuration.

src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html (1)

35-35: Updated Property Binding for Search Icon Focus.
The [styleClasses] attribute on the <app-svg-icon> component now directly uses brandingStyle.configuration.searchIconFocus. This change makes the icon’s focus state styling more consistent with the new branding guidelines. Please ensure that the brandingStyle object is properly imported and initialized in the TypeScript component so that the focus styling applies correctly in all themes.

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• 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 testing code 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• 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/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

Unit Test Coverage	%	values
Statements	33.03%	( 4164 / 12604 )
Branches	26.37%	( 1173 / 4448 )
Functions	25.59%	( 893 / 3489 )
Lines	33.22%	( 4098 / 12335 )