feat(button_group): Add new options

Author: marker dao ®

packages/devextreme-angular/src/ui/button-group/index.ts

@@ -151,6 +151,16 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On
     }
 
 
+    
+    @Input()
+    get gap(): string {
+        return this._getOption('gap');
+    }
+    set gap(value: string) {
+        this._setOption('gap', value);
+    }
+
+
     /**
      * [descr:DOMComponentOptions.height]
     
@@ -319,6 +329,16 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On
         this._setOption('width', value);
     }
 
+
+    
+    @Input()
+    get wrap(): boolean {
+        return this._getOption('wrap');
+    }
+    set wrap(value: boolean) {
+        this._setOption('wrap', value);
+    }
+
     /**
     
      * [descr:dxButtonGroupOptions.onContentReady]
@@ -409,6 +429,13 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On
      */
     @Output() focusStateEnabledChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() gapChange: EventEmitter<string>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -500,6 +527,13 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On
      */
     @Output() widthChange: EventEmitter<number | string | undefined>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() wrapChange: EventEmitter<boolean>;
+
 
 
 
@@ -525,6 +559,7 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On
             { emit: 'disabledChange' },
             { emit: 'elementAttrChange' },
             { emit: 'focusStateEnabledChange' },
+            { emit: 'gapChange' },
             { emit: 'heightChange' },
             { emit: 'hintChange' },
             { emit: 'hoverStateEnabledChange' },
@@ -537,7 +572,8 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On
             { emit: 'stylingModeChange' },
             { emit: 'tabIndexChange' },
             { emit: 'visibleChange' },
-            { emit: 'widthChange' }
+            { emit: 'widthChange' },
+            { emit: 'wrapChange' }
         ]);
 
         this._idh.setHost(this);

packages/devextreme-angular/src/ui/chat/nested/suggestions.ts

@@ -94,6 +94,14 @@ export class DxoChatSuggestionsComponent extends NestedOption implements OnDestr
         this._setOption('focusStateEnabled', value);
     }
 
+    @Input()
+    get gap(): string {
+        return this._getOption('gap');
+    }
+    set gap(value: string) {
+        this._setOption('gap', value);
+    }
+
     @Input()
     get height(): number | string | undefined {
         return this._getOption('height');
@@ -246,6 +254,14 @@ export class DxoChatSuggestionsComponent extends NestedOption implements OnDestr
         this._setOption('width', value);
     }
 
+    @Input()
+    get wrap(): boolean {
+        return this._getOption('wrap');
+    }
+    set wrap(value: boolean) {
+        this._setOption('wrap', value);
+    }
+
 
     /**
     

packages/devextreme-angular/src/ui/scheduler/nested/options.ts

@@ -95,6 +95,14 @@ export class DxoSchedulerOptionsComponent extends NestedOption implements OnDest
         this._setOption('focusStateEnabled', value);
     }
 
+    @Input()
+    get gap(): string {
+        return this._getOption('gap');
+    }
+    set gap(value: string) {
+        this._setOption('gap', value);
+    }
+
     @Input()
     get height(): number | string | undefined {
         return this._getOption('height');
@@ -247,6 +255,14 @@ export class DxoSchedulerOptionsComponent extends NestedOption implements OnDest
         this._setOption('width', value);
     }
 
+    @Input()
+    get wrap(): boolean {
+        return this._getOption('wrap');
+    }
+    set wrap(value: boolean) {
+        this._setOption('wrap', value);
+    }
+
 
     /**
     

packages/devextreme-metadata/make-angular-metadata.ts

@@ -53,6 +53,7 @@ Ng.makeMetadata({
     removeMembers(
       /\/chat:dxChatOptions\.(fileUploaderOptions|inputFieldText|sendButtonOptions|speechToTextOptions|suggestions|onAttachmentDownloadClick)/,
     ),
+    removeMembers(/\/button_group:dxButtonGroupOptions\.(gap|wrap)/),
     removeMembers(/\/form:dxFormOptions\.(aiIntegration|onSmartPasting|onSmartPasted|smartPaste)/),
     removeMembers(/\/form:dxFormSimpleItem\.aiOptions/),
     removeMembers(/\/form:FormPredefinedButtonItem/),

packages/devextreme-react/src/chat.ts

@@ -524,6 +524,7 @@ type ISuggestionsProps = React.PropsWithChildren<{
   disabled?: boolean;
   elementAttr?: Record<string, any>;
   focusStateEnabled?: boolean;
+  gap?: string;
   height?: number | string | undefined;
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
@@ -543,6 +544,7 @@ type ISuggestionsProps = React.PropsWithChildren<{
   tabIndex?: number;
   visible?: boolean;
   width?: number | string | undefined;
+  wrap?: boolean;
   defaultSelectedItemKeys?: Array<any>;
   onSelectedItemKeysChange?: (value: Array<any>) => void;
   defaultSelectedItems?: Array<any>;

packages/devextreme-react/src/scheduler.ts

@@ -805,6 +805,7 @@ type IOptionsProps = React.PropsWithChildren<{
   disabled?: boolean;
   elementAttr?: Record<string, any>;
   focusStateEnabled?: boolean;
+  gap?: string;
   height?: number | string | undefined;
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
@@ -824,6 +825,7 @@ type IOptionsProps = React.PropsWithChildren<{
   tabIndex?: number;
   visible?: boolean;
   width?: number | string | undefined;
+  wrap?: boolean;
   defaultSelectedItemKeys?: Array<any>;
   onSelectedItemKeysChange?: (value: Array<any>) => void;
   defaultSelectedItems?: Array<any>;

packages/devextreme-vue/src/button-group.ts

@@ -25,6 +25,7 @@ type AccessibleOptions = Pick<Properties,
   "disabled" |
   "elementAttr" |
   "focusStateEnabled" |
+  "gap" |
   "height" |
   "hint" |
   "hoverStateEnabled" |
@@ -43,7 +44,8 @@ type AccessibleOptions = Pick<Properties,
   "stylingMode" |
   "tabIndex" |
   "visible" |
-  "width"
+  "width" |
+  "wrap"
 >;
 
 interface DxButtonGroup extends AccessibleOptions {
@@ -58,6 +60,7 @@ const componentConfig = {
     disabled: Boolean,
     elementAttr: Object as PropType<Record<string, any>>,
     focusStateEnabled: Boolean,
+    gap: String,
     height: [Number, String],
     hint: String,
     hoverStateEnabled: Boolean,
@@ -76,7 +79,8 @@ const componentConfig = {
     stylingMode: String as PropType<ButtonStyle>,
     tabIndex: Number,
     visible: Boolean,
-    width: [Number, String]
+    width: [Number, String],
+    wrap: Boolean
   },
   emits: {
     "update:isActive": null,
@@ -87,6 +91,7 @@ const componentConfig = {
     "update:disabled": null,
     "update:elementAttr": null,
     "update:focusStateEnabled": null,
+    "update:gap": null,
     "update:height": null,
     "update:hint": null,
     "update:hoverStateEnabled": null,
@@ -106,6 +111,7 @@ const componentConfig = {
     "update:tabIndex": null,
     "update:visible": null,
     "update:width": null,
+    "update:wrap": null,
   },
   computed: {
     instance(): ButtonGroup {

packages/devextreme-vue/src/chat.ts

@@ -794,6 +794,7 @@ const DxSuggestionsConfig = {
     "update:disabled": null,
     "update:elementAttr": null,
     "update:focusStateEnabled": null,
+    "update:gap": null,
     "update:height": null,
     "update:hint": null,
     "update:hoverStateEnabled": null,
@@ -813,6 +814,7 @@ const DxSuggestionsConfig = {
     "update:tabIndex": null,
     "update:visible": null,
     "update:width": null,
+    "update:wrap": null,
   },
   props: {
     accessKey: String,
@@ -821,6 +823,7 @@ const DxSuggestionsConfig = {
     disabled: Boolean,
     elementAttr: Object as PropType<Record<string, any>>,
     focusStateEnabled: Boolean,
+    gap: String,
     height: [Number, String],
     hint: String,
     hoverStateEnabled: Boolean,
@@ -839,7 +842,8 @@ const DxSuggestionsConfig = {
     stylingMode: String as PropType<ButtonStyle>,
     tabIndex: Number,
     visible: Boolean,
-    width: [Number, String]
+    width: [Number, String],
+    wrap: Boolean
   }
 };
 

packages/devextreme-vue/src/scheduler.ts

@@ -1104,6 +1104,7 @@ const DxOptionsConfig = {
     "update:disabled": null,
     "update:elementAttr": null,
     "update:focusStateEnabled": null,
+    "update:gap": null,
     "update:height": null,
     "update:hint": null,
     "update:hoverStateEnabled": null,
@@ -1123,6 +1124,7 @@ const DxOptionsConfig = {
     "update:tabIndex": null,
     "update:visible": null,
     "update:width": null,
+    "update:wrap": null,
   },
   props: {
     accessKey: String,
@@ -1131,6 +1133,7 @@ const DxOptionsConfig = {
     disabled: Boolean,
     elementAttr: Object as PropType<Record<string, any>>,
     focusStateEnabled: Boolean,
+    gap: String,
     height: [Number, String],
     hint: String,
     hoverStateEnabled: Boolean,
@@ -1149,7 +1152,8 @@ const DxOptionsConfig = {
     stylingMode: String as PropType<ButtonStyle>,
     tabIndex: Number,
     visible: Boolean,
-    width: [Number, String]
+    width: [Number, String],
+    wrap: Boolean
   }
 };
 

packages/devextreme/js/ui/button_group.d.ts

@@ -101,6 +101,12 @@ export interface dxButtonGroupOptions extends WidgetOptions<dxButtonGroup> {
      * @public
      */
     focusStateEnabled?: boolean;
+    /**
+     * @docid
+     * @default '12px'
+     * @public
+     */
+    gap?: string;
     /**
      * @docid
      * @default true
@@ -159,6 +165,12 @@ export interface dxButtonGroupOptions extends WidgetOptions<dxButtonGroup> {
      * @public
      */
     stylingMode?: ButtonStyle;
+    /**
+     * @docid
+     * @default false
+     * @public
+     */
+    wrap?: boolean;
 }
 /**
  * @docid