Update styles in File list

[czwe-01]

#4098
StoredFilesRendererBase to use a constant for hover background color and clean up unused styles

Summary by CodeRabbit

• Style
  • Adjusted layout behavior for downloaded file containers (removed previous flex-based layout).
  • Simplified filename visibility handling in downloaded file display.
  • Standardized hover background for filename elements using a single, consistent color.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Refactors stored files renderer styles: introduces a local hover color constant, updates hover rules to use it, and removes display declarations from the downloaded file container and the downloaded-state filename rule.

Changes

Cohort / File(s)	Summary
Stored Files Renderer Styling shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts	Added local colorBgTextHover constant; replaced token.colorBgTextHover references with the new constant in hover rules; removed display: flex from downloadedFile container and removed dynamic display toggle from downloadedFile .item-file-name rule.

Sequence Diagram(s)

(omitted — changes are localized styling tweaks without multi-component control flow)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• File list - container styles fix #4406: Modifies the same storedFilesRendererBase styles.ts layout and filename/display hover rules.
• en: adding an icon and styles when file is downloaded #4045: Changes downloaded-file related styling and hover/display rules in the same styles.ts.
• fileList - cleanup #4410: Adjusts hover/background handling and layout/display rules in the same styles.ts.

Suggested reviewers

• James-Baloyi
• IvanIlyichev

Poem

🐰 I nibble at styles, soft and light,
A hover hue now tucked in sight,
Flex undone, the name can rest,
Simple lines to look their best. 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Update styles in File list' accurately reflects the main change of updating hover background color styling in the StoredFilesRendererBase component and cleaning up unused styles.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9c23e9f and 2d78efe.

📒 Files selected for processing (1)

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CodeRabbitReview-Project-Specific-Guidelines.md)

**/*.{ts,tsx}: Eliminate the any type; use unknown type instead for values with unknown types, forcing explicit type checking
Prefer type guards over type casting for type checking
Avoid monolithic types; use discriminated unions with a discriminator property instead
Leverage TypeScript to its full potential as a type system, not merely as a linter

Files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

🧠 Learnings (6)

📚 Learning: 2025-10-02T11:25:33.370Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3926
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:138-166
Timestamp: 2025-10-02T11:25:33.370Z
Learning: In the shesha-framework repository, the hint popover components (sha-quick-search-hint-popover, sha-table-view-selector-hint-popover, sha-table-pager-hint-popover) in shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts intentionally use hard-coded color `rgb(214, 214, 214)` with `!important` to impose a specific consistent color across themes, overriding theme tokens by design.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2025-10-28T14:21:55.782Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4084
File: shesha-reactjs/src/components/quickView/styles/styles.ts:41-94
Timestamp: 2025-10-28T14:21:55.782Z
Learning: In shesha-reactjs/src/components/quickView/styles/styles.ts, the quickViewContent styles intentionally use multiple `!important` flags and broad selectors (including spans, form items, inputs, links, and labels) to ensure proper targeting and prevent layout breakage in the quick view component.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2025-12-02T14:32:10.827Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4280
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:205-227
Timestamp: 2025-12-02T14:32:10.827Z
Learning: In shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts, the mockup components (filterButtonMockup and viewSelectorMockup) intentionally use hardcoded colors (`#d9d9d9`, `#fafafa`, `#8c8c8c`) to maintain consistent appearance across themes, overriding theme tokens by design.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2025-06-10T11:52:51.462Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3374
File: shesha-reactjs/src/generic-pages/settings/dynamic-theme/textsExample.tsx:13-15
Timestamp: 2025-06-10T11:52:51.462Z
Learning: In the Shesha framework's dynamic theme system, the "Global text" Typography element in textsExample.tsx is intentionally left without explicit styling to demonstrate automatic global text color application through the ConfigProvider's colorText token, while the "Default text" element uses explicit theme color styling to show the difference between global and default text color approaches.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2025-05-28T07:55:21.036Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3312
File: shesha-reactjs/src/hooks/formComponentHooks.ts:183-192
Timestamp: 2025-05-28T07:55:21.036Z
Learning: In shesha-reactjs formComponentHooks.ts, the background style initialization deliberately sets valid values from properties panel immediately to provide better UX, rather than waiting for the useDeepCompareEffect to run. This intentional pattern prevents a flash of no background and shows the background image immediately when the component renders.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2026-01-08T11:22:06.111Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4378
File: shesha-reactjs/src/designer-components/dataTable/advancedFilterButton/advancedFilterButtonComponent.tsx:61-61
Timestamp: 2026-01-08T11:22:06.111Z
Learning: In shesha-reactjs designer components (IToolboxComponent pattern), migrator functions using `.add<SpecificProps>(version, (prev) => ...)` require explicit type assertions when calling helper functions like migrateReadOnly, even though the generic parameter is specified. For example: `.add<IAdvancedFilterButtonComponentProps>(3, (prev) => migrateReadOnly(prev as IAdvancedFilterButtonComponentProps, 'inherited'))` where the cast `prev as IAdvancedFilterButtonComponentProps` must be kept.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-attempt

🔇 Additional comments (3)

shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts (3)

39-40: LGTM - Constant extracted for maintainability.

The hover background color is properly extracted to a local constant with correct syntax. This centralizes the value and makes future color changes easier.

Based on learnings, the use of a hardcoded color value rather than a theme token (token.colorBgTextHover) appears intentional to ensure consistent appearance across themes, which is an established pattern in this codebase.

---

56-67: Hover styling correctly references the constant.

The fileName hover background now uses the centralized colorBgTextHover constant, ensuring consistency with other hover states in this file.

---

70-83: Consistent hover styling applied.

The fileNameWrapper hover now uses the same colorBgTextHover constant as fileName, addressing the consistency concern from the previous review. The nested .item-file-name rule correctly sets background-color: transparent to prevent double-highlighting when hovering the inner element.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts`:
- Around line 38-39: Add a missing semicolon to the colorBgTextHover constant
declaration and replace the hardcoded '#f0f0f0' in the fileNameWrapper hover
styles with the colorBgTextHover constant so both use the same extracted value;
update the constant declaration (colorBgTextHover) to end with a semicolon and
reference that constant inside the fileNameWrapper hover rule instead of the
literal color.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b14c6fb and 9c23e9f.

📒 Files selected for processing (1)

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CodeRabbitReview-Project-Specific-Guidelines.md)

**/*.{ts,tsx}: Eliminate the any type; use unknown type instead for values with unknown types, forcing explicit type checking
Prefer type guards over type casting for type checking
Avoid monolithic types; use discriminated unions with a discriminator property instead
Leverage TypeScript to its full potential as a type system, not merely as a linter

Files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

🧠 Learnings (5)

📚 Learning: 2025-10-02T11:25:33.370Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3926
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:138-166
Timestamp: 2025-10-02T11:25:33.370Z
Learning: In the shesha-framework repository, the hint popover components (sha-quick-search-hint-popover, sha-table-view-selector-hint-popover, sha-table-pager-hint-popover) in shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts intentionally use hard-coded color `rgb(214, 214, 214)` with `!important` to impose a specific consistent color across themes, overriding theme tokens by design.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2025-10-28T14:21:55.782Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4084
File: shesha-reactjs/src/components/quickView/styles/styles.ts:41-94
Timestamp: 2025-10-28T14:21:55.782Z
Learning: In shesha-reactjs/src/components/quickView/styles/styles.ts, the quickViewContent styles intentionally use multiple `!important` flags and broad selectors (including spans, form items, inputs, links, and labels) to ensure proper targeting and prevent layout breakage in the quick view component.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2025-06-10T11:52:51.462Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3374
File: shesha-reactjs/src/generic-pages/settings/dynamic-theme/textsExample.tsx:13-15
Timestamp: 2025-06-10T11:52:51.462Z
Learning: In the Shesha framework's dynamic theme system, the "Global text" Typography element in textsExample.tsx is intentionally left without explicit styling to demonstrate automatic global text color application through the ConfigProvider's colorText token, while the "Default text" element uses explicit theme color styling to show the difference between global and default text color approaches.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2025-12-02T14:32:10.827Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4280
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:205-227
Timestamp: 2025-12-02T14:32:10.827Z
Learning: In shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts, the mockup components (filterButtonMockup and viewSelectorMockup) intentionally use hardcoded colors (`#d9d9d9`, `#fafafa`, `#8c8c8c`) to maintain consistent appearance across themes, overriding theme tokens by design.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

📚 Learning: 2025-05-28T07:55:21.036Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3312
File: shesha-reactjs/src/hooks/formComponentHooks.ts:183-192
Timestamp: 2025-05-28T07:55:21.036Z
Learning: In shesha-reactjs formComponentHooks.ts, the background style initialization deliberately sets valid values from properties panel immediately to provide better UX, rather than waiting for the useDeepCompareEffect to run. This intentional pattern prevents a flash of no background and shows the background image immediately when the component renders.

Applied to files:

• shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-attempt

🔇 Additional comments (1)

shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts (1)

56-67: Verify intentional departure from theme token.

The hover background now uses a hardcoded color instead of token.colorBgTextHover. Based on learnings, similar components intentionally override theme tokens for consistent appearance across themes. Please confirm this is the intended behavior.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}