feat(pds-input): add highlight prop and styling

[pixelflips]

Description

Adds a highlight boolean prop to pds-input that applies purple accent styling to draw attention to important fields.

What it does:

• Applies accent background, border, and text color
• Styles prefix/suffix icons
• Semantic states (disabled, invalid, readonly) take precedence over highlight styling

Why:
Provides a visual way to emphasize important input fields without overriding critical user feedback states.

Fixes: https://kajabi.atlassian.net/browse/DSS-1562

Type of change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

How Has This Been Tested?

• unit tests (3 tests covering rendering, reflection, and state precedence)
• e2e tests (2 tests for attribute behavior and dynamic toggling)
• tested manually (Storybook story with all controls functional)

Test coverage:

• Prop reflection (reflect: true)
• Semantic states override highlight (disabled, invalid, readonly)
• Compatible with all existing input features (prefix, suffix, full-width, etc.)

Test Configuration:

• Pine versions:
• OS:
• Browsers:
• Screen readers:
• Misc:

Checklist:

If not applicable, leave options unchecked.

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	2c6f36e
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/68fab5f85196d2000815a0f3
😎 Deploy Preview	https://deploy-preview-567--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pixelflips]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[pixelflips]

@cameronsimony @kajabi-chris, you can use the Deploy Preview link above to see the updates.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new highlight property was introduced to the pds-input component. The property reflects to a DOM attribute and accepts a boolean value. Corresponding CSS styling was added to visually distinguish the highlighted state by adjusting background color, border color, and text color. The component documentation, Storybook stories, and test coverage were updated to reflect this new feature. Tests verify that the highlight property reflects correctly to the attribute, renders appropriately, and respects the precedence of other component states such as disabled.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "feat(pds-input): add highlight prop and styling" clearly and concisely summarizes the primary changes in the changeset. The title directly corresponds to the main objective: adding a new highlight boolean property to the pds-input component along with associated styling rules. The conventional commit format (feat) and component scope are appropriate, and the title is specific enough that a teammate reviewing the git history would immediately understand the change's purpose.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/pds-input-highlight

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

libs/core/src/components/pds-input/stories/pds-input.stories.js (1)

154-177: Consider using BaseTemplate to eliminate code duplication.

The Highlight story duplicates the entire template structure instead of reusing BaseTemplate.bind({}). This creates maintenance burden and is inconsistent with other feature stories like Disabled, Readonly, and Invalid, which all use BaseTemplate.

While the prefix icon demonstrates highlight styling on icons, this could be shown through the existing withPrefixIcon story (which already has the .highlight binding added at line 187) by enabling the highlight control in Storybook.

Consider refactoring to:

-export const Highlight = (args) => html`<pds-input
-  autocomplete="${args.autocomplete}"
-  component-id="pds-input-highlight-example"
-  debounce="${args.debounce}"
-  ?disabled=${args.disabled}
-  error-message="${args.errorMessage}"
-  ?full-width=${args.fullWidth}
-  helper-message="${args.helperMessage}"
-  ?hide-label=${args.hideLabel}
-  .highlight=${args.highlight}
-  ?invalid=${args.invalid}
-  label="${args.label || 'Label'}"
-  name="${args.name}"
-  placeholder="${args.placeholder}"
-  ?readonly=${args.readonly}
-  ?required=${args.required}
-  type="${args.type || 'text'}"
-  value="${args.value}">
-  <pds-icon slot="prefix" name="mail" size="small"></pds-icon>
-</pds-input>`;
+export const Highlight = BaseTemplate.bind({});
 Highlight.args = {
+  componentId: 'pds-input-highlight-example',
   highlight: true,
+  label: 'Email',
+  type: 'text',
   value: 'This input is highlighted',
 };

If demonstrating icon styling is essential, consider creating a separate HighlightWithIcon story or adding a note in the documentation.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ba80935 and f116d4a.

📒 Files selected for processing (8)

• libs/core/src/components.d.ts (58 hunks)
• libs/core/src/components/pds-input/docs/pds-input.mdx (1 hunks)
• libs/core/src/components/pds-input/pds-input.scss (1 hunks)
• libs/core/src/components/pds-input/pds-input.tsx (1 hunks)
• libs/core/src/components/pds-input/readme.md (1 hunks)
• libs/core/src/components/pds-input/stories/pds-input.stories.js (13 hunks)
• libs/core/src/components/pds-input/test/pds-input.e2e.ts (1 hunks)
• libs/core/src/components/pds-input/test/pds-input.spec.tsx (2 hunks)

⏰ 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). (3)

• GitHub Check: Cursor Bugbot
• GitHub Check: Cycode: Vulnerable Dependencies
• GitHub Check: Cycode: Vulnerable Dependencies

🔇 Additional comments (3)

libs/core/src/components/pds-input/stories/pds-input.stories.js (3)

15-15: LGTM!

The highlight prop is correctly added to the default args with a false default value, consistent with other boolean props in the component.

---

59-60: LGTM!

The .highlight property binding is correctly implemented using Lit's property binding syntax, which properly passes the boolean value rather than a string attribute.

---

187-187: LGTM!

The .highlight binding has been consistently added to all story templates, ensuring that the highlight control works across all story variants. This follows the established pattern for other props and allows users to test highlight in combination with various slot configurations.

Also applies to: 207-207, 229-229, 253-253, 275-275, 299-299, 321-321, 346-346, 373-373, 395-395

[QuintonJason]

Good to go

[kajabi-chris]

Thanks @pixelflips! I'm sure this is a constraint of the Pine preview, but, I was curious if I should see the tint change to the default state when I modify anything in the field?

[pixelflips]

Thanks @pixelflips! I'm sure this is a constraint of the Pine preview, but, I was curious if I should see the tint change to the default state when I modify anything in the field?

@kajabi-chris great question. it is indeed a limitation of storybook. engineers will need to implement the functionality and remove/reset the highlight prop on their side when the input is interacted with. you can toggle the highlight toggle in storybook to get the idea of them settting it to true/false. let me know if that helps.