Skip to content

fix(switch): modify the saas theme style #3773

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 29, 2025
Merged

fix(switch): modify the saas theme style #3773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
590c5e5
fix: modify the saas theme
James-9696 Oct 21, 2025
93075d8
fix: update the width
James-9696 Oct 29, 2025
4cf6608
fix: modify reviews
James-9696 Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 33 additions & 19 deletions packages/theme-saas/src/switch/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,32 +27,50 @@
width: 38px;
}

&&-checked.disabled,
&.disabled {
@apply cursor-not-allowed;
@apply bg-color-text-disabled;
@apply border-color-text-primary;
}

&&-checked.disabled {
@apply bg-color-brand-disabled;
&&-checked &__button {
left: calc(100% - 18px);
}

&::after {
@apply content-[''];
&__button {
@apply w-4;
@apply h-4;
@apply flex;
@apply items-center;
@apply justify-center;
border-radius: 50%;
@apply content-[''];
@apply ~'top-0.5';
@apply ~'left-0.5';
@apply rounded-full;
@apply bg-color-bg-1;
@apply absolute;
@apply ~'left-0.5';
@apply ~'translate-y-0.5';
@apply cursor-pointer;
transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
}

&:not(.disabled)::after {
@apply shadow-xsm;
&&-checked.disabled,
&.disabled {
@apply cursor-not-allowed;
background-color: #dbdbdb;
border-color: #dbdbdb;
}

&&-checked.disabled {
@apply bg-color-brand-disabled;
}
Comment on lines +51 to +60
Copy link

@coderabbitai coderabbitai bot Oct 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Replace hardcoded colors with design tokens (recurring issue).

Lines 54–55 (disabled states) and lines 64, 69 (loading states) still use hardcoded hex values (#dbdbdb, #b3d6ff) instead of design tokens. This was flagged in the previous review and remains unresolved. Design tokens ensure theming consistency and maintainability.

Apply this diff to use design tokens:

  &&-checked.disabled,
  &.disabled {
    @apply cursor-not-allowed;
-   background-color: #dbdbdb;
-   border-color: #dbdbdb;
+   @apply bg-color-bg-disabled;
+   @apply border-color-border-disabled;
  }

  &&-checked.disabled {
-   @apply bg-color-brand-disabled;
+   @apply bg-color-bg-disabled;
  }

  &__on-loading {
    @apply text-xs;
-   fill: #b3d6ff;
+   fill: var(--tv-color-brand-light);
  }

  &__off-loading {
    @apply text-xs;
-   fill: #dbdbdb;
+   fill: var(--tv-color-bg-disabled);
  }

Verify that these design tokens (bg-color-bg-disabled, border-color-border-disabled, --tv-color-brand-light, --tv-color-bg-disabled) exist in your design system.

Also applies to: 62-70

🤖 Prompt for AI Agents 
In packages/theme-saas/src/switch/index.less around lines 51–60 (and related
disabled/loading states in 62–70), replace hardcoded hex colors (#dbdbdb,
#b3d6ff) with the design tokens: use bg-color-bg-disabled for background,
border-color-border-disabled for border, and the brand/loading token variables
(--tv-color-brand-light and --tv-color-bg-disabled) where the loading/brand
light color is required; ensure you use the proper token syntax used in the
project (CSS variable or Less variable) and confirm those tokens exist in the
design system before committing.


&__on-loading {
@apply text-xs;
fill: #b3d6ff;
}

&__off-loading {
@apply text-xs;
fill: #dbdbdb;
}
Comment on lines +62 to +70
Copy link

@coderabbitai coderabbitai bot Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Replace hardcoded colors with design tokens.

The loading states use hardcoded color values (#b3d6ff, #dbdbdb) for the fill property. These should be replaced with design tokens for consistency.

   &__on-loading {
     @apply text-xs;
-    fill: #b3d6ff;
+    fill: var(--tv-color-brand-light);
   }

   &__off-loading {
     @apply text-xs;
-    fill: #dbdbdb;
+    fill: var(--tv-color-bg-disabled);
   }

Note: Adjust the token names to match your actual design system tokens. The example uses common naming patterns, but you should verify the correct token names in your theme configuration.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
&__on-loading {
@apply text-xs;
fill: #b3d6ff;
}
&__off-loading {
@apply text-xs;
fill: #dbdbdb;
}
&__on-loading {
@apply text-xs;
fill: var(--tv-color-brand-light);
}
&__off-loading {
@apply text-xs;
fill: var(--tv-color-bg-disabled);
}
🤖 Prompt for AI Agents 
In packages/theme-saas/src/switch/index.less around lines 62 to 70, the
.__on-loading and .__off-loading rules use hardcoded hex colors for fill
(#b3d6ff and #dbdbdb); replace those hex values with the appropriate design
tokens from our theme (for example use something like @color-blue-200 or
@token-fill-on-loading for the on state and @color-gray-300 or
@token-fill-off-loading for the off state), update the imports or variables if
needed to reference the theme token definitions, and ensure the final LESS
compiles and the token names match the project's design token keys.


&__text {
width: 50px;
}

&&-checked {
Expand All @@ -64,9 +82,5 @@
width: calc(~'100% - 25px');
@apply overflow-hidden;
}

&:after {
left: calc(~'100% - 18px');
}
}
}
2 changes: 1 addition & 1 deletion packages/vue/src/switch/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const switchProps = {
},
showText: {
type: Boolean || undefined,
default: undefined
default: false
Comment on lines 35 to +36
Copy link

@coderabbitai coderabbitai bot Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix incorrect prop type syntax.

The type declaration Boolean || undefined is syntactically incorrect for Vue props. The || operator evaluates to the Boolean constructor at runtime, not a union type. For optional Boolean props, use [Boolean] or just Boolean.

Apply this diff:

   showText: {
-    type: Boolean || undefined,
+    type: Boolean,
     default: false
   },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
type: Boolean || undefined,
default: undefined
default: false
type: Boolean,
default: false
🤖 Prompt for AI Agents 
In packages/vue/src/switch/src/index.ts around lines 35 to 36, the prop type is
declared as `Boolean || undefined` which is invalid; replace it with a proper
Vue prop type for optional booleans such as `Boolean` or `[Boolean]`, and keep
the default as `false`. Update the prop definition to use the correct type array
or single constructor so Vue recognizes it as an optional Boolean prop and
remove the `|| undefined` expression.

Copy link

@coderabbitai coderabbitai bot Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the default value change doesn't break existing usage.

Changing the default from undefined to false may alter component behavior for consumers who rely on the implicit undefined default. Ensure that all existing usages of the Switch component have been tested with this change.

Run the following script to identify all Switch component usages:

🏁 Script executed:

#!/bin/bash
# Description: Find all Switch component usages to verify impact of showText default change

# Search for Switch component imports and usage patterns
rg -n --type vue --type ts --type tsx -C3 '\bSwitch\b' -g '!node_modules' -g '!dist' -g '!packages/vue/src/switch'

# Also search for showText prop usage
rg -n --type vue --type ts --type tsx -C3 'showText' -g '!node_modules' -g '!dist' -g '!packages/vue/src/switch'

Length of output: 55

I need to regenerate the search script with corrected ripgrep syntax since Vue file types aren't recognized natively. Let me search more broadly:

🏁 Script executed:

#!/bin/bash
# Description: Find all Switch component usages - fixed search without vue file type

# Search for Switch imports and usage in all files
rg -n 'Switch' -C3 -g '!node_modules' -g '!dist' -g '!packages/vue/src/switch/src/index.ts'

# Search for showText prop usage in all files
rg -n 'showText' -C3 -g '!node_modules' -g '!dist' -g '!packages/vue/src/switch'

Length of output: 188649

Let me examine the actual Switch component definition to verify the current state of the props:The web search didn't return the specific file. Let me directly inspect the Switch component index file:


---

🏁 Script executed:

```shell
#!/bin/bash
# Get the Switch component prop definition around line 36
cat packages/vue/src/switch/src/index.ts | head -50 | tail -25

Length of output: 396

Fix default value to preserve designConfig behavior

The current default: false breaks theme-aware behavior. The renderless logic checks if (props.showText === undefined) to use designConfig fallback (Aurora/Saas both set showText: true), but with default: false, this condition never triggers. Components without explicit showText prop will get false instead of the theme's intended default.

Change the default to undefined to restore the designConfig fallback mechanism:

showText: {
  type: [Boolean, undefined],
  default: undefined
}

This ensures Aurora and Saas themes display text by default while allowing explicit false to disable it.

🤖 Prompt for AI Agents 
In packages/vue/src/switch/src/index.ts around line 36, the prop definition sets
showText default to false which prevents the renderless logic from falling back
to designConfig; change the showText prop type to allow undefined and set its
default to undefined so the component can detect when showText is not provided
and use the theme (designConfig) fallback; update the prop signature accordingly
(type includes Boolean and undefined) and set default to undefined so explicit
false still works but absent prop defers to designConfig.

},
types: {
type: String
Expand Down
Loading