Scss generator: additional widgets (#11782)

DevExpress · Jan 30, 2020 · bfd3bbc · bfd3bbc
1 parent bb5db62
commit bfd3bbc
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 47 deletions.
diff --git a/build/gulp/scss/generator.js b/build/gulp/scss/generator.js
@@ -40,9 +40,12 @@ gulp.task('less2sass', (callback) => {
 const replaceColorFunctions = (content) => {
     // TODO lighten and darken is not included directly in the new module system (https://sass-lang.com/documentation/modules/color#lighten), but it works
     // change fade($color, 20%) to the color.change($color, $alpha: 0.20), $color can be other function
-    content = content.replace(/fade\(([$\d\w-#]*|[\w]*\(.*\)),\s*(\d+)%\)(;|,)/g, 'color.change($1, $alpha: 0.$2)$3');
     // change fadein($color, 20%) to the color.adjust($color, $alpha: 0.20), $color can be other function
-    content = content.replace(/fadein\(([$\d\w-#]*|[\w]*\(.*\)),\s*(\d+)%\)(;|,)/g, 'color.adjust($1, $alpha: 0.$2)$3');
+
+    content = content.replace(/(fadein|fade)\(([$\d\w-#]*|[\w]*\(.*\)),\s*(\d+)%\)(;|,|\))/g, (match, func, color, percent, sign) => {
+        const colorFunction = func === 'fade' ? 'change' : 'adjust';
+        return `color.${colorFunction}(${color}, $alpha: ${percent / 100})${sign}`;
+    });
     return content;
 };
 
@@ -62,7 +65,16 @@ gulp.task('fix-base', () => {
     // the same code for different themes
     return gulp
         .src(`${unfixedScssPath}/widgets/base/*.scss`)
-        .pipe(replace(/\.dx-font-icon\("/g, '@include dx-font-icon("'))
+        // .pipe(replace(/\.dx-font-icon\("/g, '@include dx-font-icon("'))
+        // icons
+        .pipe(replace('@mixin dx-icon-sizing', '@use "sass:map";\n\n@mixin dx-icon-sizing'))
+        .pipe(replace('@mixin dx-font-icon($icons[$$name]),', '@include dx-font-icon(map.get($icons, $name));'))
+        .pipe(replace(/\$icons:\s{([\w\W]*?)}/, (_, codes) => {
+            return `$icons: (${codes.replace(/;/g, ',')});`;
+        }))
+        .pipe(replace('f11d",', 'f11d"'))
+        .pipe(replace(/each\(\$icons,\s{([\w\W]*)}\);/, '@each $key, $val in $icons {$1}'))
+
         .pipe(replace(parentSelectorRegex, parentSelectorReplacement))
         .pipe(rename((path) => {
             path.basename = '_' + path.basename;
@@ -407,7 +419,8 @@ gulp.task('create-theme-index', (callback) => {
             if(item.task === 'comment') {
                 content += `// ${item.content}\n`;
             } else if(item.task === 'widget') {
-                content += `@use "./${item.content}";\n`;
+                const privateComment = item.private ? ' // private' : '';
+                content += `@use "./${item.content}";${privateComment}\n`;
             } else if(item.task === 'newline') {
                 content += '\n';
             }

diff --git a/build/gulp/scss/index-data.js b/build/gulp/scss/index-data.js
@@ -6,12 +6,12 @@ module.exports = [
     { content: 'ex. core', task: 'comment' },
     // mixins - in place @use
     // typography
-    { content: 'typography', task: 'widget' },
+    { content: 'typography', task: 'widget', private: true },
     // common - used in typogrphy, in place @use
     // icons
-    { content: 'icons', task: 'widget' },
+    { content: 'icons', task: 'widget', private: true },
     // widget
-    { content: 'widget', task: 'widget' },
+    { content: 'widget', task: 'widget', private: true },
     // card
     { content: 'card', task: 'widget' },
     // fieldset
@@ -27,11 +27,29 @@ module.exports = [
     { content: 'button', task: 'widget' },
     // buttonGroup
     { content: 'buttonGroup', task: 'widget' },
-    // scrollable - non-public
-    { content: 'scrollable', task: 'widget' },
+    // scrollable
+    { content: 'scrollable', task: 'widget', private: true },
     // scrollview
     { content: 'scrollView', task: 'widget' },
     // checkbox
-    // { content: 'checkBox', task: 'widget' },
+    { content: 'checkBox', task: 'widget' },
+    // switch
+    { content: 'switch', task: 'widget' },
+    // badge
+    { content: 'badge', task: 'widget', private: true },
+    // tabs
+    { content: 'tabs', task: 'widget' },
+    // navBar
+    { content: 'navBar', task: 'widget' },
+    // validation
+    { content: 'validation', task: 'widget', private: true },
+    // textEditor
+    { content: 'textEditor', task: 'widget', private: true },
+    // textBox
+    { content: 'textBox', task: 'widget', private: true },
+    // dropDownEditor
+    { content: 'dropDownEditor', task: 'widget', private: true },
+    // dropDownBox
+    { content: 'dropDownBox', task: 'widget' },
     { task: 'newline' }
 ];
diff --git a/build/gulp/scss/replacements.js b/build/gulp/scss/replacements.js
@@ -14,6 +14,7 @@ module.exports = {
         { regex: /@mixin badge-settings\(\),/, replacement: '@include badge-settings();' },
         { regex: /@mixin validation-badge-animation\(\),/, replacement: '@include validation-badge-animation();' },
         { import: '../../base/mixins', type: 'index' },
+        { import: '../../base/validation', type: 'index' },
     ],
     'icons': [
         { regex: /@import \(once\) "..\/base\/icons.scss";/, replacement: '' },
@@ -47,5 +48,55 @@ module.exports = {
     ],
     'checkBox': [
         { import: 'colors', type: 'sizes' },
+        { import: '../../base/icons', type: 'index' },
+    ],
+    'switch': [
+        { import: '../../base/mixins', type: 'index' },
+    ],
+    'tabs': [
+        { import: '../button', type: 'index' },
+        { import: '../button/colors', type: 'index' },
+        { import: '../button/colors', type: 'colors' },
+        { import: '../../base/icons', type: 'index' },
+    ],
+    'navBar': [
+        { import: '../../base/icons', type: 'index' },
+    ],
+    'validation': [
+        { import: '../../base/validation', type: 'index' },
+    ],
+    'textEditor': [
+        { import: '../../base/icons', type: 'index' },
+        { import: '../common/sizes', type: 'index' },
+        { import: '../button/sizes', type: 'index' },
+        { import: '../common', type: 'index' },
+        { import: '../button', type: 'index' },
+        { regex: /@mixin texteditor-input-padding-filled\(\),/g, replacement: '@inclide texteditor-input-padding-filled();' },
+        { regex: /@mixin texteditor-input-padding\(\),/g, replacement: '@inclide texteditor-input-padding();' },
+        { regex: /.texteditor-validation-icon-offset-filled\(\),/g, replacement: '@include texteditor-validation-icon-offset-filled();' },
+        { regex: /.texteditor-validation-icon-offset\(\),/g, replacement: '@include texteditor-validation-icon-offset();' },
+        { regex: /@mixin dx-icon-sizing\(\$MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE\),/, replacement: '@include dx-icon-sizing($MATERIAL_TEXTEDITOR_ICON_CONTAINER_SIZE);' },
+        { regex: /@mixin dx-texteditor-icon\(\),/, replacement: '@include dx-texteditor-icon();' },
+        { regex: /.dx-icon-font-centered-sizing\(\$MATERIAL_TEXTEDITOR_CLEAR_ICON_SIZE\),/, replacement: '@include dx-icon-font-centered-sizing($MATERIAL_TEXTEDITOR_CLEAR_ICON_SIZE);' },
+        { regex: /\$texteditor-input-border-radius,/g, replacement: '$texteditor-input-border-radius;' },
+        { regex: /relative,/g, replacement: 'relative;' }
+    ],
+    'textBox': [
+        { import: '../../base/icons', type: 'index' },
+        { import: '../textEditor', type: 'index' },
+        { import: '../textEditor/colors', type: 'index' },
+        { import: '../textEditor/sizes', type: 'index' },
+    ],
+    'dropDownEditor': [
+        { import: '../common', type: 'index' },
+        { import: '../common/sizes', type: 'index' },
+        { import: '../textEditor/sizes', type: 'index' },
+        { import: '../button/colors', type: 'colors' },
+        { import: '../button/colors', type: 'index' },
+        { import: '../textEditor/colors', type: 'colors' },
+        { import: '../../base/icons', type: 'index' },
+    ],
+    'dropDownBox': [
+        { import: '../dropDownEditor', type: 'index' },
     ]
 };
diff --git a/styles/mixins.less b/styles/mixins.less
@@ -62,12 +62,6 @@
     }
 }
 
-.pseudo-link() {
-    border-bottom: 1px dashed;
-    display: inline-block;
-    line-height: normal;
-}
-
 .hide-input-cursor() {
     border: none;
     color: transparent;

diff --git a/styles/widgets/base/validation.less b/styles/widgets/base/validation.less
@@ -1,14 +1,18 @@
-.dx-validationsummary-item {
-    color: @VALIDATION_SUMMARY_COLOR;
-}
+.dx-base-validation(@summary-color, @message-color, @message-bg-color) {
+    .dx-validationsummary-item {
+        color: @summary-color;
+    }
 
-.dx-validationsummary-item-content {
-    .pseudo-link();
+    .dx-invalid-message > .dx-overlay-content {
+        color: @message-color;
+        background-color: @message-bg-color;
+    }
 }
 
-.dx-invalid-message > .dx-overlay-content {
-    color: @VALIDATION_MESSAGE_COLOR;
-    background-color: @VALIDATION_MESSAGE_BACKGROUND_COLOR;
+.dx-validationsummary-item-content {
+    border-bottom: 1px dashed;
+    display: inline-block;
+    line-height: normal;
 }
 
 @keyframes valid-badge-frames {

diff --git a/styles/widgets/generic/color-schemes/light/generic.light.less b/styles/widgets/generic/color-schemes/light/generic.light.less
@@ -6,12 +6,6 @@
 */
 @base-font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
 
-/**
-* @name 40. Icon color
-* @type color
-*/
-@base-icon-color: @base-text-color;
-
 /**
 * @name 10. Accent color
 * @type color
@@ -36,6 +30,12 @@
 */
 @base-link-color: @base-accent;
 
+/**
+* @name 40. Icon color
+* @type color
+*/
+@base-icon-color: @base-text-color;
+
 /**
 * @name 30. Background color
 * @type color

diff --git a/styles/widgets/generic/dropDownEditor.generic.less b/styles/widgets/generic/dropDownEditor.generic.less
@@ -76,16 +76,21 @@
 .dx-dropdowneditor-button-visible {
     .dx-texteditor-input {
         padding-right: 0;
+    }
+}
 
-        .dx-rtl&,
-        .dx-rtl & {
+.dx-rtl {
+    .dx-dropdowneditor-button-visible,
+    &.dx-dropdowneditor-button-visible {
+        .dx-texteditor-input {
             padding-right: @GENERIC_BASE_INLINE_BORDEREDWIDGET_HORIZONTAL_PADDING;
             padding-left: 0;
         }
 
-        .dx-rtl.dx-editor-underlined&,
-        .dx-rtl .dx-editor-underlined& {
-            padding-right: 0;
+        &.dx-editor-underlined {
+            .dx-texteditor-input {
+                padding-right: 0;
+            }
         }
     }
 }

diff --git a/styles/widgets/generic/textBox.generic.less b/styles/widgets/generic/textBox.generic.less
@@ -24,10 +24,15 @@
         .dx-rtl & {
             padding-right: @GENERIC_TEXTEDITOR_ICON_CONTAINER_SIZE;
         }
+    }
 
-        .dx-rtl.dx-editor-underlined&,
-        .dx-rtl .dx-editor-underlined& {
-            padding-right: 0;
+    &.dx-editor-underlined {
+        .dx-texteditor-input,
+        .dx-placeholder:before {
+            .dx-rtl&,
+            .dx-rtl & {
+                padding-right: 0;
+            }
         }
     }
 }

diff --git a/styles/widgets/generic/validation.generic.less b/styles/widgets/generic/validation.generic.less
@@ -1,6 +1,8 @@
 @import (once) "../base/validation.less";
 @import (once) "./overlay.generic.less";
 
+.dx-base-validation(@VALIDATION_SUMMARY_COLOR, @VALIDATION_MESSAGE_COLOR, @VALIDATION_MESSAGE_BACKGROUND_COLOR);
+
 .dx-invalid-message > .dx-overlay-content {
     border-radius: @validation-overlay-border-radius;
 

diff --git a/styles/widgets/material/size-schemes/shared/base.less b/styles/widgets/material/size-schemes/shared/base.less
@@ -19,3 +19,5 @@
 * @type text
 */
 @base-border-radius: @MATERIAL_BASE_BORDER_RADIUS;
+
+@MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING: 0;
diff --git a/styles/widgets/material/switch.material.less b/styles/widgets/material/switch.material.less
@@ -182,19 +182,21 @@
 }
 
 .dx-invalid {
-    .dx-switch-container {
-        .dx-switch&:before {
+    &.dx-switch {
+        .dx-switch-container:before {
             background-color: @switch-invalid-container-bg;
         }
+    }
 
-        .dx-switch-handle:before {
-            .dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled)& {
-                background-color: @switch-invalid-handle-bg;
+    &.dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled) {
+        .dx-switch-container .dx-switch-handle:before {
+            background-color: @switch-invalid-handle-bg;
+        }
 
-                .dx-state-active&,
-                .dx-state-focused& {
-                    box-shadow: @MATERIAL_INVALID_SWITCH_SHADOW;
-                }
+        &.dx-state-active,
+        &.dx-state-focused {
+            .dx-switch-container .dx-switch-handle:before {
+                box-shadow: @MATERIAL_INVALID_SWITCH_SHADOW;
             }
         }
     }

diff --git a/styles/widgets/material/validation.material.less b/styles/widgets/material/validation.material.less
@@ -11,6 +11,8 @@
     @MATERIAL_VALIDATIONSUMMARY_ITEM_MARGIN: 6px;
 }
 
+.dx-base-validation(@VALIDATION_SUMMARY_COLOR, @VALIDATION_MESSAGE_COLOR, @VALIDATION_MESSAGE_BACKGROUND_COLOR);
+
 .dx-invalid-message > .dx-overlay-content {
     background-color: transparent;
     color: @VALIDATION_MESSAGE_BACKGROUND_COLOR;