Merge branch '24_1' into 24_1-Tileview-fix-alignment

Signed-off-by: Nikki Gonzales <[email protected]>
DevExpress · Jun 18, 2024 · 3f8adb9 · 3f8adb9
2 parents b3f060b + f7a5abe
commit 3f8adb9
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 20 deletions.
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/React/description.md b/apps/demos/Demos/DataGrid/EditStateManagement/React/description.md
@@ -1,4 +1,5 @@
 Our DataGrid component manages its edit state automatically. If your use case requires full control over the editing process, you can use the API members below to manage state manually. In this demo, we manage state with a help of the <a href="https://react.dev/reference/react/useReducer" target="_blank">useReducer</a> React hook.
+<!--split-->
 
 **Component Properties**
 

diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/description.md b/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/description.md
@@ -1,4 +1,5 @@
 Our DataGrid component manages its edit state automatically. If your use case requires full control over the editing process, you can use the API members below to manage state manually. In this demo, we manage state with a help of the <a href="https://react.dev/reference/react/useReducer" target="_blank">useReducer</a> React hook.
+<!--split-->
 
 **Component Properties**
 

diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/Vue/description.md b/apps/demos/Demos/DataGrid/EditStateManagement/Vue/description.md
@@ -1,4 +1,5 @@
 Our DataGrid component manages its edit state automatically. If your use case requires full control over the editing process, you can use the API members below to manage state manually. In this demo, we manage state with a help of the <a href="https://vuex.vuejs.org/" target="_blank">Vuex</a> library.
+<!--split-->
 
 **Component Properties**
 

diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/Angular/description.md b/apps/demos/Demos/DropDownBox/SingleSelection/Angular/description.md
@@ -1,4 +1,8 @@
-The DropDownBox component is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in the single selection mode. 
+DropDownBox is an advanced editor whose drop-down window can include other components.
+
+DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
 <!--split-->
 
 The following instructions show how to synchronize the DropDownBox with any other embedded DevExtreme component:

diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/React/description.md b/apps/demos/Demos/DropDownBox/SingleSelection/React/description.md
@@ -1,4 +1,9 @@
-The DropDownBox component is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in the single selection mode. 
+DropDownBox is an advanced editor whose drop-down window can include other components.
+
+DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
+<!--split-->
 
 The following instructions show how to synchronize the DropDownBox with any other embedded DevExtreme component:
 

diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/ReactJs/description.md b/apps/demos/Demos/DropDownBox/SingleSelection/ReactJs/description.md
@@ -1,4 +1,9 @@
-The DropDownBox component is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in the single selection mode. 
+DropDownBox is an advanced editor whose drop-down window can include other components.
+
+DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
+<!--split-->
 
 The following instructions show how to synchronize the DropDownBox with any other embedded DevExtreme component:
 

diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/Vue/description.md b/apps/demos/Demos/DropDownBox/SingleSelection/Vue/description.md
@@ -1,4 +1,9 @@
-The DropDownBox component is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in the single selection mode. 
+DropDownBox is an advanced editor whose drop-down window can include other components.
+
+DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
+<!--split-->
 
 The following instructions show how to synchronize the DropDownBox with any other embedded DevExtreme component:
 

diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.html b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.html
@@ -10,13 +10,21 @@
     <dx-toolbar #toolbar [multiline]="true">
       <dxi-item location="before" widget="dxButton">
         <div *dxTemplate>
-          <dx-button icon="undo" (onClick)="onButtonClick('Undo')"></dx-button>
+          <dx-button
+            icon="undo"
+            [stylingMode]="stylingMode"
+            (onClick)="onButtonClick('Undo')"
+          ></dx-button>
         </div>
       </dxi-item>
 
       <dxi-item location="before" widget="dxButton">
         <div *dxTemplate>
-          <dx-button icon="redo" (onClick)="onButtonClick('Redo')"></dx-button>
+          <dx-button
+            icon="redo"
+            [stylingMode]="stylingMode"
+            (onClick)="onButtonClick('Redo')"
+          ></dx-button>
         </div>
       </dxi-item>
 
@@ -37,6 +45,7 @@
             displayExpr="text"
             keyExpr="size"
             itemTemplate="fontSizeTemplate"
+            [stylingMode]="stylingMode"
             [items]="fontSizes"
             [selectedItemKey]="fontSizes[2].size"
             [useSelectMode]="true"
@@ -56,6 +65,7 @@
             icon="indent"
             displayExpr="text"
             keyExpr="lineHeight"
+            [stylingMode]="stylingMode"
             [items]="lineHeights"
             [useSelectMode]="true"
             [selectedItemKey]="lineHeight"
@@ -176,6 +186,7 @@
           <dx-button
             icon="link"
             text="Link"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Link')"
           ></dx-button>
         </div>
@@ -191,6 +202,7 @@
           <dx-button
             icon="image"
             text="Add image"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Add Image')"
           ></dx-button>
         </div>
@@ -216,6 +228,7 @@
           <dx-button
             icon="clearformat"
             text="Clear formating"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Clear Formating')"
           ></dx-button>
         </div>
@@ -231,6 +244,7 @@
           <dx-button
             icon="codeblock"
             text="Code block"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Code Block')"
           ></dx-button>
         </div>
@@ -246,6 +260,7 @@
           <dx-button
             icon="blockquote"
             text="Blockquote"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Blockquote')"
           ></dx-button>
         </div>
@@ -266,6 +281,7 @@
           <dx-button
             icon="attach"
             text="Attach"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Attach')"
           ></dx-button>
         </div>
@@ -276,6 +292,7 @@
           <dx-button
             icon="help"
             text="About"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('About')"
           ></dx-button>
         </div>

diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
@@ -11,6 +11,7 @@ import {
   DxButtonGroupModule,
   DxCheckBoxModule,
 } from 'devextreme-angular';
+import themes from 'devextreme/ui/themes';
 import notify from 'devextreme/ui/notify';
 import {
   FontFamily,
@@ -36,6 +37,8 @@ if (!/localhost/.test(document.location.host)) {
 })
 
 export class AppComponent {
+  stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
+
   fontSizes: FontSize[] = this.service.getFontSizes();
 
   lineHeights: LineHeight[] = this.service.getLineHeights();

diff --git a/apps/demos/Demos/Toolbar/Adaptability/React/App.tsx b/apps/demos/Demos/Toolbar/Adaptability/React/App.tsx
@@ -6,6 +6,7 @@ import Resizable from 'devextreme-react/resizable';
 import CheckBox from 'devextreme-react/check-box';
 import DropDownButton, { DropDownButtonTypes } from 'devextreme-react/drop-down-button';
 import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
+import themes from 'devextreme/ui/themes';
 import notify from 'devextreme/ui/notify';
 import 'devextreme/ui/select_box';
 import {
@@ -21,6 +22,7 @@ import {
   textStyleInputAttr,
 } from './data.ts';
 
+const stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
 const lineHeightDefault = lineHeights[1].lineHeight;
 const textAlignDefault = [textAlignItems[0].alignment];
 const fontSizeDefault = fontSizes[2].size;
@@ -177,11 +179,19 @@ function App() {
         >
           <Toolbar multiline={multiline}>
             <Item location="before">
-              <Button icon="undo" onClick={onUndoButtonClick}></Button>
+              <Button
+                icon="undo"
+                stylingMode={stylingMode}
+                onClick={onUndoButtonClick}
+              ></Button>
             </Item>
 
             <Item location="before">
-              <Button icon="redo" onClick={onRedoButtonClick}></Button>
+              <Button
+                icon="redo"
+                stylingMode={stylingMode}
+                onClick={onRedoButtonClick}
+              ></Button>
             </Item>
 
             <Item
@@ -198,6 +208,7 @@ function App() {
                 displayExpr="text"
                 keyExpr="size"
                 useSelectMode={true}
+                stylingMode={stylingMode}
                 items={fontSizes}
                 selectedItemKey={fontSize}
                 itemRender={renderFontSize}
@@ -212,6 +223,7 @@ function App() {
                 displayExpr="text"
                 keyExpr="lineHeight"
                 useSelectMode={true}
+                stylingMode={stylingMode}
                 items={lineHeights}
                 selectedItemKey={lineHeight}
                 onSelectionChanged={onLineHeightChanged}
@@ -303,6 +315,7 @@ function App() {
               <Button
                 icon="link"
                 text="Link"
+                stylingMode={stylingMode}
                 onClick={onLinkButtonClick}
               ></Button>
             </Item>
@@ -316,6 +329,7 @@ function App() {
               <Button
                 icon="image"
                 text="Add image"
+                stylingMode={stylingMode}
                 onClick={onAddImageButtonClick}
               ></Button>
             </Item>
@@ -337,6 +351,7 @@ function App() {
               <Button
                 icon="clearformat"
                 text="Clear formating"
+                stylingMode={stylingMode}
                 onClick={onClearButtonClick}
               ></Button>
             </Item>
@@ -350,6 +365,7 @@ function App() {
               <Button
                 icon="codeblock"
                 text="Code block"
+                stylingMode={stylingMode}
                 onClick={onCodeBlockButtonClick}
               ></Button>
             </Item>
@@ -363,6 +379,7 @@ function App() {
               <Button
                 icon="blockquote"
                 text="Blockquote"
+                stylingMode={stylingMode}
                 onClick={onQuoteButtonClick}
               ></Button>
             </Item>
@@ -379,6 +396,7 @@ function App() {
               <Button
                 icon="attach"
                 text="Attach"
+                stylingMode={stylingMode}
                 onClick={onAttachButtonClick}
               ></Button>
             </Item>
@@ -387,6 +405,7 @@ function App() {
               <Button
                 icon="help"
                 text="About"
+                stylingMode={stylingMode}
                 onClick={onAboutButtonClick}
               ></Button>
             </Item>

diff --git a/apps/demos/Demos/Toolbar/Adaptability/ReactJs/App.js b/apps/demos/Demos/Toolbar/Adaptability/ReactJs/App.js
@@ -6,6 +6,7 @@ import Resizable from 'devextreme-react/resizable';
 import CheckBox from 'devextreme-react/check-box';
 import DropDownButton from 'devextreme-react/drop-down-button';
 import SelectBox from 'devextreme-react/select-box';
+import themes from 'devextreme/ui/themes';
 import notify from 'devextreme/ui/notify';
 import 'devextreme/ui/select_box';
 import {
@@ -21,6 +22,7 @@ import {
   textStyleInputAttr,
 } from './data.js';
 
+const stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
 const lineHeightDefault = lineHeights[1].lineHeight;
 const textAlignDefault = [textAlignItems[0].alignment];
 const fontSizeDefault = fontSizes[2].size;
@@ -149,13 +151,15 @@ function App() {
             <Item location="before">
               <Button
                 icon="undo"
+                stylingMode={stylingMode}
                 onClick={onUndoButtonClick}
               ></Button>
             </Item>
 
             <Item location="before">
               <Button
                 icon="redo"
+                stylingMode={stylingMode}
                 onClick={onRedoButtonClick}
               ></Button>
             </Item>
@@ -177,6 +181,7 @@ function App() {
                 displayExpr="text"
                 keyExpr="size"
                 useSelectMode={true}
+                stylingMode={stylingMode}
                 items={fontSizes}
                 selectedItemKey={fontSize}
                 itemRender={renderFontSize}
@@ -194,6 +199,7 @@ function App() {
                 displayExpr="text"
                 keyExpr="lineHeight"
                 useSelectMode={true}
+                stylingMode={stylingMode}
                 items={lineHeights}
                 selectedItemKey={lineHeight}
                 onSelectionChanged={onLineHeightChanged}
@@ -291,6 +297,7 @@ function App() {
               <Button
                 icon="link"
                 text="Link"
+                stylingMode={stylingMode}
                 onClick={onLinkButtonClick}
               ></Button>
             </Item>
@@ -304,6 +311,7 @@ function App() {
               <Button
                 icon="image"
                 text="Add image"
+                stylingMode={stylingMode}
                 onClick={onAddImageButtonClick}
               ></Button>
             </Item>
@@ -325,6 +333,7 @@ function App() {
               <Button
                 icon="clearformat"
                 text="Clear formating"
+                stylingMode={stylingMode}
                 onClick={onClearButtonClick}
               ></Button>
             </Item>
@@ -338,6 +347,7 @@ function App() {
               <Button
                 icon="codeblock"
                 text="Code block"
+                stylingMode={stylingMode}
                 onClick={onCodeBlockButtonClick}
               ></Button>
             </Item>
@@ -351,6 +361,7 @@ function App() {
               <Button
                 icon="blockquote"
                 text="Blockquote"
+                stylingMode={stylingMode}
                 onClick={onQuoteButtonClick}
               ></Button>
             </Item>
@@ -371,6 +382,7 @@ function App() {
               <Button
                 icon="attach"
                 text="Attach"
+                stylingMode={stylingMode}
                 onClick={onAttachButtonClick}
               ></Button>
             </Item>
@@ -383,6 +395,7 @@ function App() {
               <Button
                 icon="help"
                 text="About"
+                stylingMode={stylingMode}
                 onClick={onAboutButtonClick}
               ></Button>
             </Item>