feat(OnyxSelect, OnyxRadioGroup, OnyxCheckboxGroup): Implement trunca…

…tion on higher level (#1541)

<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

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

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxSelect, OnyxRadioGroup, OnyxCheckboxGroup): Implement truncation on higher level

packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue

@@ -14,8 +14,8 @@ const props = withDefaults(defineProps<OnyxCheckboxProps<TValue>>(), {
   disabled: false,
   loading: false,
   required: false,
-  truncation: "ellipsis",
   skeleton: false,
+  truncation: "ellipsis",
 });
 
 const emit = defineEmits<{

packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue

@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<OnyxCheckboxGroupProps<TValue>>(), {
   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)"

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<TValue extends SelectOptionValue = SelectOptionValue> =
-  DensityProp & {
-    /**
-     * Checkbox options.
-     */
-    options: CheckboxGroupOption<TValue>[];
-    /**
-     * 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<BaseSelectOption, "truncation"> & {
+      /**
+       * Checkbox options.
+       */
+      options: CheckboxGroupOption<TValue>[];
+      /**
+       * 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<TValue extends SelectOptionValue = SelectOptionValue> =
   BaseSelectOption<TValue> & RequiredMarkerProp & AutofocusProp;

packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue

@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<OnyxRadioGroupProps<TValue>>(), {
   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)"
         />

packages/sit-onyx/src/components/OnyxRadioGroup/types.ts

@@ -6,7 +6,8 @@ import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } fr
 export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
   DensityProp &
     RequiredMarkerProp &
-    CustomValidityProp & {
+    CustomValidityProp &
+    Pick<BaseSelectOption, "truncation"> & {
       /**
        * Options for the individual radio buttons of the group.
        */

packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
   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"
               >
                 <slot name="option" v-bind="option">
                   {{ option.label }}

packages/sit-onyx/src/components/OnyxSelect/types.ts

@@ -64,7 +64,8 @@ export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue
   SelectModelValueProps<TValue> &
   SelectSearchProps &
   Omit<OnyxSelectInputProps<TValue>, "density" | "modelValue"> &
-  AutofocusProp & {
+  AutofocusProp &
+  Pick<BaseSelectOption, "truncation"> & {
     /**
      * If true, the select popover is expanded and visible.
      * Property is managed internally, when undefined.