FormsAndMultiPurposeOverview: get rid of custom background (#2867)

* Chore: get rid of custom background in FormsAndMultiPurposeOverview demo * Chore: get rid of unused CSS class selector * update etalon * Revert "update etalon" This reverts commit 11fef8d. --------- Co-authored-by: Mikhail Preyskurantov <[email protected]> Co-authored-by: Alexander Bulychev <[email protected]>
DevExpress · Oct 3, 2023 · 9698b1e · 9698b1e
1 parent f22416d
commit 9698b1e
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 40 deletions.
diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/Angular/app/app.component.css b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/Angular/app/app.component.css
@@ -1,12 +1,7 @@
-::ng-deep .first-group,
-::ng-deep .second-group {
+::ng-deep .form-group {
   padding: 20px;
 }
 
-::ng-deep .second-group {
-  background-color: rgba(191, 191, 191, 0.15);
-}
-
 ::ng-deep .form-avatar {
   height: 128px;
   width: 128px;

diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/Angular/app/app.component.html b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/Angular/app/app.component.html
@@ -1,5 +1,5 @@
 <dx-form id="form" [formData]="employee">
-  <dxi-item itemType="group" cssClass="first-group" [colCount]="4">
+  <dxi-item itemType="group" cssClass="form-group" [colCount]="4">
     <dxi-item>
       <div class="form-avatar"></div>
     </dxi-item>
@@ -13,7 +13,7 @@
       ></dxi-item>
     </dxi-item>
   </dxi-item>
-  <dxi-item itemType="group" cssClass="second-group" [colCount]="2">
+  <dxi-item itemType="group" cssClass="form-group" [colCount]="2">
     <dxi-item itemType="group">
       <dxi-item dataField="Address"></dxi-item>
       <dxi-item dataField="City"></dxi-item>

diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/AngularJS/index.js b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/AngularJS/index.js
@@ -5,7 +5,7 @@ DemoApp.controller('DemoController', ($scope) => {
     formData: employee,
     items: [{
       itemType: 'group',
-      cssClass: 'first-group',
+      cssClass: 'form-group',
       colCount: 4,
       items: [{
         template: "<div class='form-avatar'></div>",
@@ -26,7 +26,7 @@ DemoApp.controller('DemoController', ($scope) => {
       }],
     }, {
       itemType: 'group',
-      cssClass: 'second-group',
+      cssClass: 'form-group',
       colCount: 2,
       items: [{
         itemType: 'group',

diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/AngularJS/styles.css b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/AngularJS/styles.css
@@ -1,12 +1,7 @@
-.first-group,
-.second-group {
+.form-group {
   padding: 20px;
 }
 
-.second-group {
-  background-color: rgba(191, 191, 191, 0.15);
-}
-
 .form-avatar {
   height: 128px;
   width: 128px;

diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/React/App.js b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/React/App.js
@@ -23,7 +23,7 @@ const avatarRender = () => (
 export default function App() {
   return (
     <Form formData={employee}>
-      <GroupItem cssClass="first-group" colCount={4}>
+      <GroupItem cssClass="form-group" colCount={4}>
         <SimpleItem render={avatarRender}>
         </SimpleItem>
         <GroupItem colSpan={3}>
@@ -36,7 +36,7 @@ export default function App() {
           />
         </GroupItem>
       </GroupItem>
-      <GroupItem cssClass="second-group" colCount={2}>
+      <GroupItem cssClass="form-group" colCount={2}>
         <GroupItem>
           <SimpleItem dataField="Address" />
           <SimpleItem dataField="City" />

diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/React/styles.css b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/React/styles.css
@@ -1,12 +1,7 @@
-.first-group,
-.second-group {
+.form-group {
   padding: 20px;
 }
 
-.second-group {
-  background-color: rgba(191, 191, 191, 0.15);
-}
-
 .form-avatar {
   height: 128px;
   width: 128px;

diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/Vue/App.vue b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/Vue/App.vue
@@ -5,7 +5,7 @@
     </template>
     <DxGroupItem
       :col-count="4"
-      css-class="first-group"
+      css-class="form-group"
     >
       <DxSimpleItem template="avatar-template"/>
       <DxGroupItem :col-span="3">
@@ -20,7 +20,7 @@
     </DxGroupItem>
     <DxGroupItem
       :col-count="2"
-      css-class="second-group"
+      css-class="form-group"
     >
       <DxGroupItem>
         <DxSimpleItem data-field="Address"/>
@@ -90,15 +90,10 @@ export default {
 };
 </script>
 <style>
-.first-group,
-.second-group {
+.form-group {
   padding: 20px;
 }
 
-.second-group {
-  background-color: rgba(191, 191, 191, 0.15);
-}
-
 .form-avatar {
   height: 128px;
   width: 128px;

diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/jQuery/index.js b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/jQuery/index.js
@@ -3,7 +3,7 @@ $(() => {
     formData: employee,
     items: [{
       itemType: 'group',
-      cssClass: 'first-group',
+      cssClass: 'form-group',
       colCount: 4,
       items: [{
         template: "<div class='form-avatar'></div>",
@@ -24,7 +24,7 @@ $(() => {
       }],
     }, {
       itemType: 'group',
-      cssClass: 'second-group',
+      cssClass: 'form-group',
       colCount: 2,
       items: [{
         itemType: 'group',

diff --git a/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/jQuery/styles.css b/JSDemos/Demos/Common/FormsAndMultiPurposeOverview/jQuery/styles.css
@@ -1,12 +1,7 @@
-.first-group,
-.second-group {
+.form-group {
   padding: 20px;
 }
 
-.second-group {
-  background-color: rgba(191, 191, 191, 0.15);
-}
-
 .form-avatar {
   height: 128px;
   width: 128px;