From 67a5e500c16555064d7298b1ce007ade0b60d247 Mon Sep 17 00:00:00 2001 From: Maja Zarkova <60856270+MajaZarkova@users.noreply.github.com> Date: Wed, 10 Jul 2024 15:55:09 +0300 Subject: [PATCH] feat(OnyxSelect, OnyxRadioGroup, OnyxCheckboxGroup): Implement truncation on higher level (#1541) Relates to #1539 Up until now the truncation property was on option-level only for OnyxSelect, OnyxRadioGroup and OnyxCheckboxGroup. The user had to set the property for each option separately. In this PR, the truncation property is added to the grouped component too, so that the user can set the truncation only once for every option. This property is used only as a fallback if the truncation is not set on option-level. ## Checklist - [x] A changeset is added with `npx changeset add` if your changes should be released as npm package (because they affect the library usage) --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/yellow-dragons-fly.md | 5 ++ .../components/OnyxCheckbox/OnyxCheckbox.vue | 2 +- .../OnyxCheckboxGroup/OnyxCheckboxGroup.vue | 2 + .../src/components/OnyxCheckboxGroup/types.ts | 79 ++++++++++--------- .../OnyxRadioGroup/OnyxRadioGroup.vue | 2 + .../src/components/OnyxRadioGroup/types.ts | 3 +- .../src/components/OnyxSelect/OnyxSelect.vue | 3 +- .../src/components/OnyxSelect/types.ts | 3 +- 8 files changed, 56 insertions(+), 43 deletions(-) create mode 100644 .changeset/yellow-dragons-fly.md diff --git a/.changeset/yellow-dragons-fly.md b/.changeset/yellow-dragons-fly.md new file mode 100644 index 0000000000..c02c09cbef --- /dev/null +++ b/.changeset/yellow-dragons-fly.md @@ -0,0 +1,5 @@ +--- +"sit-onyx": minor +--- + +feat(OnyxSelect, OnyxRadioGroup, OnyxCheckboxGroup): Implement truncation on higher level diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue index 7a3f69474e..cf1361b3c6 100644 --- a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue +++ b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue @@ -14,8 +14,8 @@ const props = withDefaults(defineProps>(), { disabled: false, loading: false, required: false, - truncation: "ellipsis", skeleton: false, + truncation: "ellipsis", }); const emit = defineEmits<{ diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue index 8c9408c58b..3577ea4fe9 100644 --- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue +++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue @@ -13,6 +13,7 @@ const props = withDefaults(defineProps>(), { direction: "vertical", withCheckAll: false, disabled: false, + truncation: "ellipsis", }); const { densityClass } = useDensity(props); @@ -77,6 +78,7 @@ const checkAllLabel = computed(() => { v-for="option in props.options" :key="option.value.toString()" v-bind="option" + :truncation="option.truncation ?? props.truncation" :model-value="props.modelValue.includes(option.value)" class="onyx-checkbox-group__option" @update:model-value="handleUpdate(option.value, $event)" diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts index efc48334aa..12297ea4b8 100644 --- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts +++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts @@ -3,45 +3,46 @@ import type { RequiredMarkerProp } from "../../composables/required"; import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types"; export type OnyxCheckboxGroupProps = - DensityProp & { - /** - * Checkbox options. - */ - options: CheckboxGroupOption[]; - /** - * Currently checked checkboxes. - */ - modelValue?: TValue[]; - /** - * Headline to show above all checkboxes which is also the fieldset legend. - */ - headline?: string; - /** - * Direction of the checkboxes. - */ - direction?: Direction; - /** - * If true, an additional checkbox will be displayed to check/uncheck all options. - * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior. - */ - withCheckAll?: - | boolean - | { - /** - * Label for the `select all` checkbox. - * If unset, a default label will be shown depending on the current locale/language. - */ - label?: string; - }; - /** - * Whether all checkboxes should be disabled. - */ - disabled?: boolean; - /** - * If set, the specified number of skeleton radio buttons will be shown. - */ - skeleton?: number; - }; + DensityProp & + Pick & { + /** + * Checkbox options. + */ + options: CheckboxGroupOption[]; + /** + * Currently checked checkboxes. + */ + modelValue?: TValue[]; + /** + * Headline to show above all checkboxes which is also the fieldset legend. + */ + headline?: string; + /** + * Direction of the checkboxes. + */ + direction?: Direction; + /** + * If true, an additional checkbox will be displayed to check/uncheck all options. + * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior. + */ + withCheckAll?: + | boolean + | { + /** + * Label for the `select all` checkbox. + * If unset, a default label will be shown depending on the current locale/language. + */ + label?: string; + }; + /** + * Whether all checkboxes should be disabled. + */ + disabled?: boolean; + /** + * If set, the specified number of skeleton radio buttons will be shown. + */ + skeleton?: number; + }; export type CheckboxGroupOption = BaseSelectOption & RequiredMarkerProp & AutofocusProp; diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue index 7e87ec34a3..fb68d4f187 100644 --- a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue +++ b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue @@ -13,6 +13,7 @@ const props = withDefaults(defineProps>(), { headline: "", required: false, disabled: false, + truncation: "ellipsis", }); const { densityClass } = useDensity(props); @@ -57,6 +58,7 @@ const handleChange = (selected: boolean, value: TValue) => { :custom-error="props.customError" :checked="option.value === props.modelValue" :required="props.required" + :truncation="option.truncation ?? props.truncation" @validity-change="index === 0 && emit('validityChange', $event)" @change="handleChange($event, option.value)" /> diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts index 987dc415ee..982a343338 100644 --- a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts +++ b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts @@ -6,7 +6,8 @@ import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } fr export type OnyxRadioGroupProps = DensityProp & RequiredMarkerProp & - CustomValidityProp & { + CustomValidityProp & + Pick & { /** * Options for the individual radio buttons of the group. */ diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue index 75ead73772..bf11765603 100644 --- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue +++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue @@ -21,6 +21,7 @@ const props = withDefaults(defineProps>(), { loading: false, searchTerm: undefined, open: undefined, + truncation: "ellipsis", }); const emit = defineEmits<{ @@ -360,7 +361,7 @@ const selectInputProps = computed(() => { :active="option.value === activeValue" :icon="option.icon" :density="props.density" - :truncation="option.truncation" + :truncation="option.truncation ?? props.truncation" > {{ option.label }} diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts index 3c21d5dcdd..226761cd14 100644 --- a/packages/sit-onyx/src/components/OnyxSelect/types.ts +++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts @@ -64,7 +64,8 @@ export type OnyxSelectProps & SelectSearchProps & Omit, "density" | "modelValue"> & - AutofocusProp & { + AutofocusProp & + Pick & { /** * If true, the select popover is expanded and visible. * Property is managed internally, when undefined.