-
Notifications
You must be signed in to change notification settings - Fork 25
feat: add inlineLabel and hasBorder props to OcTextInput and OCSelect #1707
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.
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
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
4c6a239
feat: add inlineLabel and hasBorder props to OcTextInput
AlexAndBear cb2e585
add to oc-select
AlexAndBear 830db1f
update snapshots
AlexAndBear 9ba1336
OcSelect.vue aktualisieren
AlexAndBear 62fa6c9
OcSelect.vue aktualisieren
AlexAndBear 478cd2c
add examples to docs
AlexAndBear f57fa35
add examples to docs
AlexAndBear 1fdf48a
add examples to docs
AlexAndBear 8126b8f
add new docs component
AlexAndBear 697f686
format
AlexAndBear File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
packages/design-system/docs/components/OcTextInput/customization.vue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <template> | ||
| <div class="border-b mb-2"> | ||
| <oc-text-input class="mb-2" label="Your name" :inline-label="true" :has-border="false" /> | ||
| </div> | ||
| <div class="border-b"> | ||
| <oc-text-input class="mb-2" label="Full address" :inline-label="true" :has-border="false" /> | ||
| </div> | ||
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,6 +1,12 @@ | ||||||||||||||||
| <template> | ||||||||||||||||
| <div> | ||||||||||||||||
| <label v-if="!labelHidden" :aria-hidden="true" :for="id" class="inline-block mb-0.5"> | ||||||||||||||||
| <div :class="{ 'flex items-center': inlineLabel }"> | ||||||||||||||||
| <label | ||||||||||||||||
| v-if="!labelHidden" | ||||||||||||||||
| :aria-hidden="true" | ||||||||||||||||
| :for="id" | ||||||||||||||||
| class="inline-block" | ||||||||||||||||
| :class="{ 'mr-2': inlineLabel, 'mb-0.5': !inlineLabel }" | ||||||||||||||||
| > | ||||||||||||||||
| {{ label }} | ||||||||||||||||
| <span v-if="requiredMark" class="text-role-error" aria-hidden="true">*</span> | ||||||||||||||||
| </label> | ||||||||||||||||
|
|
@@ -19,7 +25,8 @@ | |||||||||||||||
| :multiple="multiple" | ||||||||||||||||
| class="oc-select bg-transparent" | ||||||||||||||||
| :class="{ | ||||||||||||||||
| 'oc-select-position-fixed': positionFixed | ||||||||||||||||
| 'oc-select-position-fixed': positionFixed, | ||||||||||||||||
| 'oc-select-no-border': !hasBorder | ||||||||||||||||
| }" | ||||||||||||||||
| :dropdown-should-open="selectDropdownShouldOpen" | ||||||||||||||||
| :map-keydown="selectMapKeydown" | ||||||||||||||||
|
|
@@ -134,6 +141,11 @@ export interface Props { | |||||||||||||||
| * @docs The label of the select input. | ||||||||||||||||
| */ | ||||||||||||||||
| label: string | ||||||||||||||||
| /** | ||||||||||||||||
| * @docs Determines if the label will be displayed next to the select input field. | ||||||||||||||||
| * @default false | ||||||||||||||||
| * */ | ||||||||||||||||
| inlineLabel?: boolean | ||||||||||||||||
| /** | ||||||||||||||||
| * @docs Determines if the label is visually hidden. Note that it will still be read by screen readers. | ||||||||||||||||
| * @default false | ||||||||||||||||
|
|
@@ -201,13 +213,19 @@ export interface Props { | |||||||||||||||
| * @default false | ||||||||||||||||
| */ | ||||||||||||||||
| requiredMark?: boolean | ||||||||||||||||
| /** | ||||||||||||||||
| * @docs Determines if the select input field has a surrounding border. | ||||||||||||||||
| * @default true | ||||||||||||||||
| */ | ||||||||||||||||
| hasBorder?: boolean | ||||||||||||||||
| } | ||||||||||||||||
|
|
||||||||||||||||
| export interface Emits { | ||||||||||||||||
| /** | ||||||||||||||||
| * @docs Emitted when the user has typed. | ||||||||||||||||
| */ | ||||||||||||||||
| (e: 'search:input', search: string): void | ||||||||||||||||
|
|
||||||||||||||||
| /** | ||||||||||||||||
| * @docs Emitted when the user has selected an option. | ||||||||||||||||
| */ | ||||||||||||||||
|
|
@@ -219,6 +237,7 @@ export interface Slots { | |||||||||||||||
| * @docs Slot for when an option is selected. | ||||||||||||||||
| */ | ||||||||||||||||
| 'selected-option'?: () => unknown | ||||||||||||||||
|
|
||||||||||||||||
| /** | ||||||||||||||||
| * @docs This component inherits all slots from `vue-select`. See https://vue-select.org/api/slots for more information. | ||||||||||||||||
| */ | ||||||||||||||||
|
|
@@ -252,6 +271,7 @@ const { | |||||||||||||||
| }, | ||||||||||||||||
| disabled = false, | ||||||||||||||||
| label, | ||||||||||||||||
| inlineLabel = false, | ||||||||||||||||
| labelHidden = false, | ||||||||||||||||
| contextualHelper, | ||||||||||||||||
| optionLabel = 'label', | ||||||||||||||||
|
|
@@ -265,7 +285,8 @@ const { | |||||||||||||||
| multiple = false, | ||||||||||||||||
| readOnly = false, | ||||||||||||||||
| positionFixed = false, | ||||||||||||||||
| requiredMark = false | ||||||||||||||||
| requiredMark = false, | ||||||||||||||||
| hasBorder = true | ||||||||||||||||
| } = defineProps<Props>() | ||||||||||||||||
|
|
||||||||||||||||
| const emit = defineEmits<Emits>() | ||||||||||||||||
|
|
@@ -485,6 +506,14 @@ export default { components: { VueSelect } } | |||||||||||||||
| } | ||||||||||||||||
|
|
||||||||||||||||
| .oc-select { | ||||||||||||||||
| &-no-border { | ||||||||||||||||
| .vs__dropdown-toggle { | ||||||||||||||||
| border: none !important; | ||||||||||||||||
| outline: none !important; | ||||||||||||||||
| background-color: transparent !important; | ||||||||||||||||
|
||||||||||||||||
| 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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,12 +1,16 @@ | ||||||
| <template> | ||||||
| <div :class="$attrs.class"> | ||||||
| <div :class="[{ 'flex items-center': inlineLabel }, $attrs.class]"> | ||||||
| <slot name="label"> | ||||||
| <label class="inline-block mb-0.5" :for="id"> | ||||||
| <label | ||||||
| class="inline-block" | ||||||
| :class="{ 'mr-2': inlineLabel, 'mb-0.5': !inlineLabel }" | ||||||
| :for="id" | ||||||
| > | ||||||
| {{ label }} | ||||||
| <span v-if="requiredMark" class="text-role-error" aria-hidden="true">*</span> | ||||||
| </label> | ||||||
| </slot> | ||||||
| <div class="relative"> | ||||||
| <div class="relative" :class="{ 'grow-1': inlineLabel }"> | ||||||
| <oc-icon v-if="readOnly" name="lock" size="small" class="mt-2 ml-2 absolute" /> | ||||||
| <component | ||||||
| :is="inputComponent" | ||||||
|
|
@@ -18,7 +22,8 @@ | |||||
| :class="{ | ||||||
| 'oc-text-input-danger border-role-error': !!showErrorMessage, | ||||||
| 'pl-6': !!readOnly, | ||||||
| 'pr-6': showClearButton | ||||||
| 'pr-6': showClearButton, | ||||||
| 'border-none outline-none bg-transparent': !hasBorder | ||||||
|
||||||
| 'border-none outline-none bg-transparent': !hasBorder | |
| 'border-none bg-transparent focus:ring-2 focus:ring-primary': !hasBorder |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,10 +17,12 @@ | |
| </oc-button> | ||
| </div> | ||
| <div class="px-4"> | ||
| <div class="py-3"> | ||
| <div class="py-2 mb-2 border-b border-role-outline-variant"> | ||
|
||
| <oc-select | ||
| v-model="from" | ||
| :label="`${$gettext('From')}:`" | ||
| :inline-label="true" | ||
| :has-border="false" | ||
| :options="fromOptions" | ||
| option-label="label" | ||
| option-value="value" | ||
|
|
@@ -31,25 +33,33 @@ | |
| <oc-text-input | ||
| v-model="toMail" | ||
| type="email" | ||
| class="mail-new-message-to-input mb-2" | ||
| class="mail-new-message-to-input mb-2 pb-2 border-b border-role-outline-variant" | ||
| :label="`${$gettext('To')}:`" | ||
| :inline-label="true" | ||
| :has-border="false" | ||
| /> | ||
| <oc-text-input | ||
| v-model="ccMail" | ||
| type="email" | ||
| class="mail-new-message-cc-input mb-2" | ||
| class="mail-new-message-cc-input mb-2 pb-2 border-b border-role-outline-variant" | ||
| :label="`${$gettext('CC')}:`" | ||
| :inline-label="true" | ||
| :has-border="false" | ||
| /> | ||
| <oc-text-input | ||
| v-model="bccMail" | ||
| type="email" | ||
| class="mail-new-message-bcc-input mb-2" | ||
| class="mail-new-message-bcc-input mb-2 pb-2 border-b border-role-outline-variant" | ||
| :label="`${$gettext('BCC')}:`" | ||
| :inline-label="true" | ||
| :has-border="false" | ||
| /> | ||
| <oc-text-input | ||
| v-model="subject" | ||
| class="mail-new-message-to-input" | ||
| :label="$gettext('Subject')" | ||
| class="mail-new-message-to-input pb-2 border-b border-role-outline-variant" | ||
| :label="`${$gettext('Subject')}:`" | ||
| :inline-label="true" | ||
| :has-border="false" | ||
| /> | ||
| <div class="py-4"> | ||
| <oc-textarea v-model="mailBody" :label="$gettext('Write email')" /> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.