Style: Asterisk spacing

[czwe-01]

#3714

Summary by CodeRabbit

• Style
  • Increased right spacing for the form name container in the toolbar.
  • Adjusted vertical positioning of the required mark indicator for improved alignment.
  • Updated styling for required mark elements to enhance visual consistency.

[coderabbitai]

Walkthrough

The PR updates CSS styling across form designer components. Changes include adding right margin to the form name container, repositioning the required mark indicator from bottom-offset to top-offset, and integrating design tokens into the properties tab styling for consistent color and typography application.

Changes

Cohort / File(s)	Summary
Form Designer Spacing shesha-reactjs/src/components/formDesigner/styles/styles.ts	Added margin-right: 32px to .form-name-parent rule, increasing right spacing for the form name container
Required Mark Positioning shesha-reactjs/src/designer-components/_settings/styles/styles.ts	Removed .ant-form-item-tooltip block; introduced .sha-required-mark block with align-self: end !important and top-based positioning (top: 4px) replacing previous bottom-offset strategy
Properties Tab Theming shesha-reactjs/src/designer-components/propertiesTabs/style.ts	Added token parameter to createStyles callback; introduced .sha-required-mark > * CSS block using token.colorErrorText and token.fontFamily for dynamic styling

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• All changes are CSS-focused or minor API updates with straightforward intent
• Required mark positioning refactor is a direct selector replacement rather than complex logic
• Token integration is a standard pattern with no dependencies or side effects

Possibly related PRs

• Thulasizwe/fix/3714 #4078: Modifies the same .sha-required-mark styling rules for consistent required indicator positioning.
• Thulasizwe/fix/3714 #4021: Directly related—makes opposing changes to .ant-form-item-tooltip and .sha-required-mark selectors.
• wizard hover styles #3076: Modifies the same settings styles file with adjustments to tooltip spacing and alignment rules.

Suggested reviewers

• James-Baloyi

Poem

🐰 With token colors bright and required marks aligned,
The form takes shape with spacing refined,
Top-offset dance replaces the old way,
Design tokens whisper—"hooray, hooray!"
A tiny tweak, yet clarity's here to stay! ✨

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Style: Asterisk spacing' accurately describes the main purpose of the changes, which involve adjusting spacing and alignment for the required mark asterisk throughout the form designer and properties tabs.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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: 0

🧹 Nitpick comments (2)

shesha-reactjs/src/designer-components/propertiesTabs/style.ts (2)

3-3: Good token integration, minor formatting nit.

Adding the token parameter enables theme-aware styling, which is a good practice for consistency across the application.

Minor nit: Extra space after cx in the parameter list (cx , token should be cx, token).

Apply this diff to fix the spacing:

-export const useStyles = createStyles(({ css, cx , token}) => {
+export const useStyles = createStyles(({ css, cx, token }) => {

---

33-40: Consider using a more specific selector for performance.

The universal selector * > .sha-required-mark requires the browser to check every element in the DOM tree within this context. This can impact rendering performance, especially in complex forms.

Consider using a more specific selector:

-    * > .sha-required-mark {
+    .sha-required-mark {
       margin-left: 4px;
       color: ${token.colorErrorText};
       font-family: ${token.fontFamily};
       line-height: 1;
       position: relative;
       top: 8px;
     }

If you need to target only direct children of specific elements, use a more specific parent selector like .ant-form-item > .sha-required-mark or .properties-label + * > .sha-required-mark.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9bbd558 and 5ba76db.

📒 Files selected for processing (3)

• shesha-reactjs/src/components/formDesigner/styles/styles.ts (1 hunks)
• shesha-reactjs/src/designer-components/_settings/styles/styles.ts (1 hunks)
• shesha-reactjs/src/designer-components/propertiesTabs/style.ts (2 hunks)

🧰 Additional context used

🧠 Learnings (7)

📚 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/formDesigner/styles/styles.ts
• shesha-reactjs/src/designer-components/propertiesTabs/style.ts
• shesha-reactjs/src/designer-components/_settings/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/formDesigner/styles/styles.ts
• shesha-reactjs/src/designer-components/propertiesTabs/style.ts
• shesha-reactjs/src/designer-components/_settings/styles/styles.ts

📚 Learning: 2025-06-26T19:59:22.872Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3461
File: shesha-reactjs/src/designer-components/charts/settingsFormIndividual.ts:1280-1280
Timestamp: 2025-06-26T19:59:22.872Z
Learning: In shesha-reactjs chart settings forms, the styling panels (border, shadow, background) should not include buttonType-based hidden conditions since charts are not button components. The border configuration should follow the standard component pattern without button-specific restrictions.

Applied to files:

• shesha-reactjs/src/components/formDesigner/styles/styles.ts
• shesha-reactjs/src/designer-components/propertiesTabs/style.ts
• shesha-reactjs/src/designer-components/_settings/styles/styles.ts

📚 Learning: 2025-06-12T16:55:57.638Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3397
File: shesha-reactjs/src/designer-components/charts/bar.tsx:49-52
Timestamp: 2025-06-12T16:55:57.638Z
Learning: For the chart components’ migrators (e.g., BarChartComponent in shesha-reactjs/src/designer-components/charts/bar.tsx), the version 5 step intentionally spreads `{ ...prev, ...defaultConfigFiller }` so that values from `defaultConfigFiller` override any existing properties in `prev`. This reset to new defaults is by design and should not be flagged as an issue.

Applied to files:

• shesha-reactjs/src/components/formDesigner/styles/styles.ts
• shesha-reactjs/src/designer-components/propertiesTabs/style.ts
• shesha-reactjs/src/designer-components/_settings/styles/styles.ts

📚 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/designer-components/propertiesTabs/style.ts
• shesha-reactjs/src/designer-components/_settings/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/designer-components/propertiesTabs/style.ts
• shesha-reactjs/src/designer-components/_settings/styles/styles.ts

📚 Learning: 2025-06-26T20:01:48.838Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3461
File: shesha-reactjs/src/designer-components/charts/settingsFormIndividual.ts:171-192
Timestamp: 2025-06-26T20:01:48.838Z
Learning: In shesha-reactjs chart settings forms, duplicate input configurations may be intentionally included as part of UI/UX experiments and should be flagged for review during UI/UX review phases rather than immediately removed as errors.

Applied to files:

• shesha-reactjs/src/designer-components/_settings/styles/styles.ts

🔇 Additional comments (2)

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

205-205: LGTM! Clean spacing adjustment.

The addition of right margin to the form name parent container is a straightforward layout improvement that adds consistent spacing in the toolbar.

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

37-41: Tooltip repositioning looks good, but verify offset consistency.

The repositioning from bottom offset to top offset with top: 4px aligns with the overall design changes. However, note that this uses a 4px top offset while the related .sha-required-mark styling in propertiesTabs/style.ts uses top: 8px. Please confirm these different offset values are intentional for the different contexts.