feat: add inlineLabel and hasBorder props to OcTextInput and OCSelect#1707
feat: add inlineLabel and hasBorder props to OcTextInput and OCSelect#1707AlexAndBear merged 10 commits intomainfrom
Conversation
AlexAndBear
changed the title
Co-authored-by: Jannik Stehle <[email protected]>
Co-authored-by: Jannik Stehle <[email protected]>
There was a problem hiding this comment.
Pull request overview
This PR adds two new props (inlineLabel and hasBorder) to OcTextInput and OcSelect components to provide more flexible styling options. The inlineLabel prop displays labels next to input fields instead of above them, while hasBorder controls whether the input has a visible border.
Key Changes:
- Added
inlineLabelandhasBorderprops to bothOcTextInputandOcSelectcomponents with appropriate default values - Applied these new props in the mail compose view to create a cleaner, more compact form layout
- Updated component documentation with examples demonstrating the new customization options
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
packages/design-system/src/components/OcTextInput/OcTextInput.vue |
Added inlineLabel and hasBorder props with styling logic |
packages/design-system/src/components/OcSelect/OcSelect.vue |
Added inlineLabel and hasBorder props with styling logic |
packages/web-app-mail/src/views/MailCompose.vue |
Applied new props to form fields with custom border styling |
packages/design-system/docs/components/OcTextInput/OcTextInput.md |
Added documentation for inline label feature |
packages/design-system/docs/components/OcTextInput/customization.vue |
Created example demonstrating customization options |
| Multiple snapshot files | Updated test snapshots to reflect new default prop values |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </div> | ||
| <div class="px-4"> | ||
| <div class="py-3"> | ||
| <div class="py-2 mb-2 border-b border-role-outline-variant"> |
There was a problem hiding this comment.
The border styling classes 'py-2 mb-2 border-b border-role-outline-variant' are duplicated across multiple form fields (lines 20, 36, 44, 52, 59). Consider extracting this repeated pattern into a CSS class or applying the border through the parent container to reduce duplication.
| 'pl-6': !!readOnly, | ||
| 'pr-6': showClearButton | ||
| 'pr-6': showClearButton, | ||
| 'border-none outline-none bg-transparent': !hasBorder |
There was a problem hiding this comment.
Using '!important' implicitly through 'border-none' and 'outline-none' may override necessary focus states. Consider using a more specific selector or ensure focus styles are still accessible when hasBorder is false.
| 'border-none outline-none bg-transparent': !hasBorder | |
| 'border-none bg-transparent focus:ring-2 focus:ring-primary': !hasBorder |
| .vs__dropdown-toggle { | ||
| border: none !important; | ||
| outline: none !important; | ||
| background-color: transparent !important; |
There was a problem hiding this comment.
Removing the outline with '!important' will eliminate focus indicators, which are critical for keyboard navigation and accessibility. Ensure alternative focus styling is provided when hasBorder is false.
| background-color: transparent !important; | |
| background-color: transparent !important; | |
| // Provide alternative focus indicator for accessibility | |
| &:focus { | |
| box-shadow: 0 0 0 2px var(--oc-role-outline); | |
| } |
| ::: | ||
|
|
||
| ### Customization | ||
| `OcTextInput` is highly customizable |
There was a problem hiding this comment.
The customization section description is incomplete. Add a period at the end of the sentence and expand the description to explain what customization options are demonstrated in the example.
| `OcTextInput` is highly customizable | |
| `OcTextInput` is highly customizable. The example below demonstrates how you can customize the component by adding custom icons, adjusting input styles, and modifying placeholder text to better fit your application's needs. |
Description
Related Issue
How Has This Been Tested?
Types of changes