Repository: solid-design-system/solid
Pull request #1931: fix: disabled colors sync
Author: login: smfonseca
Created: 2025-03-03T16:30:23Z | Merged: 2025-03-11T15:13:16Z

<!-- ## Title: Please consider adding the [skip chromatic] flag to the PR title in case you dont need chromatic testing your changes. -->
## Description:
<!-- *PR notes: Please describe the changes in this PR.* -->

## Definition of Reviewable:
<!-- *PR notes: Irrelevant elements should be removed.* -->
- [ ] Documentation is created/updated
- [ ] Migration Guide is created/updated
- [ ] E2E tests (features, a11y, bug fixes) are created/updated
<!-- *If this PR includes a bug fix, an E2E test is necessary to verify the change. If the fix is purely visual, ensuring it is captured within our chromatic screenshot tests is sufficient.* -->
- [ ] Stories (features, a11y) are created/updated
- [ ] relevant tickets are linked



Diff:
diff --git a/.changeset/metal-swans-report.md b/.changeset/metal-swans-report.md
new file mode 100644
index 0000000000..0a39e3edb5
--- /dev/null
+++ b/.changeset/metal-swans-report.md
@@ -0,0 +1,8 @@
+---
+'@solid-design-system/components': patch
+---
+
+Adjust styling on form elements:
+
+- Placeholder color for `sd-select`, `sd-combobox`, `sd-input` and `sd-textarea` when disabled or visually-disabled.
+- `sd-select` border color when focused and visually-disabled
diff --git a/.changeset/mighty-hornets-press.md b/.changeset/mighty-hornets-press.md
new file mode 100644
index 0000000000..48e40bbb15
--- /dev/null
+++ b/.changeset/mighty-hornets-press.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Sync `sd-radio-button` and `sd-combobox` visually-disabled examples with Figma and fix typo in story title.
diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts
index 6f6983acc9..6e8017f75b 100644
--- a/packages/components/src/components/combobox/combobox.ts
+++ b/packages/components/src/components/combobox/combobox.ts
@@ -1431,6 +1431,11 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
         content: ' *';
       }
 
+      :host([visually-disabled]) ::placeholder,
+      :host([disabled]) ::placeholder {
+        @apply text-neutral-500;
+      }
+
       [part='listbox'] {
         max-height: var(--auto-size-available-height, auto);
       }
diff --git a/packages/components/src/components/input/input.ts b/packages/components/src/components/input/input.ts
index 285f1a28a6..c1be850423 100644
--- a/packages/components/src/components/input/input.ts
+++ b/packages/components/src/components/input/input.ts
@@ -575,7 +575,8 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               part="input"
               id="input"
               class=${cx(
-                'min-w-0 flex-grow focus:outline-none bg-transparent placeholder-neutral-700',
+                'min-w-0 flex-grow focus:outline-none bg-transparent',
+                this.visuallyDisabled || this.disabled ? 'placeholder-neutral-500' : 'placeholder-neutral-700',
                 this.size === 'sm' ? 'h-6' : 'h-8',
                 textSize,
                 this.visuallyDisabled && 'cursor-not-allowed'
diff --git a/packages/components/src/components/select/select.ts b/packages/components/src/components/select/select.ts
index 7aef65a442..c7ca5625fa 100644
--- a/packages/components/src/components/select/select.ts
+++ b/packages/components/src/components/select/select.ts
@@ -885,7 +885,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
     // Hierarchy of input states:
     const selectState = this.disabled
       ? 'disabled'
-      : this.visuallyDisabled && !this.hasFocus
+      : this.visuallyDisabled
         ? 'visuallyDisabled'
         : this.hasFocus && this.showInvalidStyle
           ? 'activeInvalid'
@@ -1157,6 +1157,11 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
         content: ' *';
       }
 
+      :host([visually-disabled]) ::placeholder,
+      :host([disabled]) ::placeholder {
+        @apply text-neutral-500;
+      }
+
       [part='listbox'] {
         max-height: var(--auto-size-available-height, auto);
       }
diff --git a/packages/components/src/components/textarea/textarea.ts b/packages/components/src/components/textarea/textarea.ts
index 809e848cdb..a509f1ab07 100644
--- a/packages/components/src/components/textarea/textarea.ts
+++ b/packages/components/src/components/textarea/textarea.ts
@@ -473,6 +473,11 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
         @apply block h-full;
       }
 
+      :host([visually-disabled]) ::placeholder,
+      :host([disabled]) ::placeholder {
+        @apply text-neutral-500;
+      }
+
       :host([required]) #label::after {
         content: ' *';
       }
diff --git a/packages/docs/src/stories/components/combobox.stories.ts b/packages/docs/src/stories/components/combobox.stories.ts
index fdf6c9459e..3b03135e8a 100644
--- a/packages/docs/src/stories/components/combobox.stories.ts
+++ b/packages/docs/src/stories/components/combobox.stories.ts
@@ -231,7 +231,14 @@ export const VisuallyDisabled = {
   render: () => html`
     <div class="w-[400px] h-[200px] pt-12">
       <sd-tooltip content="Visually Disabled" trigger="click focus" size="sm" placement="top">
-        <sd-combobox size="lg" label="Label" placeholder="Disabled" placement="bottom" value="" visually-disabled>
+        <sd-combobox
+          size="lg"
+          label="Label"
+          placeholder="Visually Disabled"
+          placement="bottom"
+          value=""
+          visually-disabled
+        >
           <sd-option value="option-1">Option 1</sd-option>
           <sd-option value="option-2">Option 2</sd-option>
           <sd-option value="option-3">Option 3</sd-option>
diff --git a/packages/docs/src/stories/components/radio-button.stories.ts b/packages/docs/src/stories/components/radio-button.stories.ts
index aba0691833..4dab47ff7f 100644
--- a/packages/docs/src/stories/components/radio-button.stories.ts
+++ b/packages/docs/src/stories/components/radio-button.stories.ts
@@ -220,26 +220,22 @@ export const VisuallyDisabled = {
   render: () => html`
     <div class="flex gap-12 h-[100px] pt-12">
       <sd-radio-group>
-        <sd-tooltip content="Visually Disabled" trigger="click focus" size="sm">
-          <sd-radio-button value="1" visually-disabled>
-            <sd-icon name="system/image" slot="icon"></sd-icon>
-            Label
-          </sd-radio-button>
-        </sd-tooltip>
+        <sd-radio-button value="1">
+          <sd-icon name="system/image" slot="icon"></sd-icon>
+          Label
+        </sd-radio-button>
 
         <sd-tooltip content="Visually Disabled" trigger="click focus" size="sm">
           <sd-radio-button value="2" visually-disabled>
             <sd-icon name="system/image" slot="icon"></sd-icon>
-            Disabled
+            Visually Disabled
           </sd-radio-button>
         </sd-tooltip>
 
-        <sd-tooltip content="Visually Disabled" trigger="click focus" size="sm">
-          <sd-radio-button value="3" visually-disabled>
-            <sd-icon name="system/image" slot="icon"></sd-icon>
-            Label
-          </sd-radio-button>
-        </sd-tooltip>
+        <sd-radio-button value="3">
+          <sd-icon name="system/image" slot="icon"></sd-icon>
+          Label
+        </sd-radio-button>
       </sd-radio-group>
     </div>
   `
diff --git a/packages/docs/src/stories/templates/forms.stories.ts b/packages/docs/src/stories/templates/forms.stories.ts
index dcab76356f..eb852213aa 100644
--- a/packages/docs/src/stories/templates/forms.stories.ts
+++ b/packages/docs/src/stories/templates/forms.stories.ts
@@ -153,7 +153,7 @@ export const ContactForm = {
  *
  * **Accessibility Hint:** This approach is recommended for accessibility reasons. Disabling elements, will remove them from the tab order and screen readers will not announce them.
  */
-export const FromWithVisuallyDisabledElements = {
+export const FormWithVisuallyDisabledElements = {
   render: () => html`
     <form class="sd-prose sd-prose--full-width" id="accessible-form">
       <h3 class="sd-headline sd-headline--size-4xl">Contact</h3>


Reviews:
user: login: paulovareiro29
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T13:36:13Z
user: login: auroraVasconcelos
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T16:42:38Z
user: login: mariohamann
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T08:12:42Z
user: login: MartaPintoTeixeira
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T11:02:20Z
user: login: smfonseca
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-11T14:52:17Z
user: login: paulovareiro29
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T14:53:39Z
user: login: MartaPintoTeixeira
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T14:58:27Z

Review comments:
diff_hunk: @@ -790,6 +790,11 @@ export default class SdInput extends SolidElement implements SolidFormControl {
         caret-color: transparent;
       }
 
+      :host([visually-disabled]) ::placeholder,
+      :host([disabled]) ::placeholder {
+        @apply text-neutral-500;
+      }
+
path: packages/components/src/components/input/input.ts
user: login: mariohamann
body: Should be possible inline, right? https://tailwindcss.com/docs/hover-focus-and-other-states#placeholder
created_at: 2025-03-07T08:12:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -790,6 +790,11 @@ export default class SdInput extends SolidElement implements SolidFormControl {
         caret-color: transparent;
       }
 
+      :host([visually-disabled]) ::placeholder,
+      :host([disabled]) ::placeholder {
+        @apply text-neutral-500;
+      }
+
path: packages/components/src/components/input/input.ts
user: login: smfonseca
body: Updated
created_at: 2025-03-11T14:52:16Z
author_association: COLLABORATOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-03-03T16:30:26Z
body: ###  🦋  Changeset detected

Latest commit: 26fdc9a00ad828183034b725b1f77bd053cdb57a

**The changes in this PR will be included in the next version bump.**



Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/solid-design-system/solid/new/fix/disabled-colors-sync?filename=.changeset/smooth-toes-kiss.md&value=---%0A%22%40fake-scope%2Ffake-pkg%22%3A%20patch%0A---%0A%0Afix%3A%20disabled%20colors%20sync%0A)


author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-03T16:33:07Z
body: 🚀 Storybook has been deployed for branch `fix_disabled-colors-sync`
- [View Storybook](https://solid-design-system.github.io/solid/fix_disabled-colors-sync)
author_association: CONTRIBUTOR