feat(OnyxSelect, OnyxRadioGroup, OnyxCheckboxGroup): Implement truncation on higher level

.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.