@vaadin/vaadin-lumo-styles 23.1.0-alpha3 → 23.1.0-beta2

package/gulpfile.js

@@ -34,7 +34,7 @@ function createCopyright() {
 
 function createIconset(folder, filenames, idPrefix = '') {
   let output = `<svg xmlns="http://www.w3.org/2000/svg">\n<defs>\n`;
-  filenames.forEach(function (filename) {
+  filenames.forEach((filename) => {
     // Skip non-svg files
     if (filename.indexOf('.svg') === -1) {
       return;
@@ -59,39 +59,39 @@ function createIconset(folder, filenames, idPrefix = '') {
   return output;
 }
 
-gulp.task('icons', async function () {
+gulp.task('icons', async () => {
   const folder = 'icons/svg/';
   let glyphs;
 
   // Optimize the source files
   gulp
-    .src(folder + '*.svg')
+    .src(`${folder}*.svg`)
     .pipe(
       svgmin({
         plugins: [
           {
-            removeTitle: true
+            removeTitle: true,
           },
           {
-            removeViewBox: false
+            removeViewBox: false,
           },
           {
             cleanupNumericValues: {
-              floatPrecision: 6
-            }
+              floatPrecision: 6,
+            },
           },
           {
             convertPathData: {
-              floatPrecision: 6
-            }
-          }
-        ]
-      })
+              floatPrecision: 6,
+            },
+          },
+        ],
+      }),
     )
     .pipe(gulp.dest(folder))
-    .on('finish', function () {
-      // iron-iconset-svg
-      fs.readdir(folder, function (err, filenames) {
+    .on('finish', () => {
+      // Iron-iconset-svg
+      fs.readdir(folder, (err, filenames) => {
         if (err) {
           console.error(err);
           return;
@@ -109,7 +109,7 @@ $_documentContainer.innerHTML = \`<iron-iconset-svg size="1000" name="lumo">
 ${createIconset(folder, filenames)}
 </iron-iconset-svg>\`;\n\ndocument.head.appendChild($_documentContainer.content);\n`;
 
-        fs.writeFile('iconset.js', ironIcons, function (err) {
+        fs.writeFile('iconset.js', ironIcons, (err) => {
           if (err) {
             return console.error(err);
           }
@@ -125,22 +125,22 @@ $_documentContainer.innerHTML = \`<vaadin-iconset name="lumo" size="1000">
 ${createIconset(folder, filenames, 'lumo:')}
 </vaadin-iconset>\`;\n\ndocument.head.appendChild($_documentContainer.content);\n`;
 
-        fs.writeFile('vaadin-iconset.js', vaadinIcons, function (err) {
+        fs.writeFile('vaadin-iconset.js', vaadinIcons, (err) => {
           if (err) {
             return console.error(err);
           }
         });
       });
 
-      // icon font
+      // Icon font
       gulp
-        .src(folder + '*.svg')
+        .src(`${folder}*.svg`)
         .pipe(
           sort({
-            comparator: function (file1, file2) {
+            comparator(file1, file2) {
               return sortIconFilesNormalized(file1.relative, file2.relative);
-            }
-          })
+            },
+          }),
         )
         .pipe(
           iconfont({
@@ -151,15 +151,15 @@ ${createIconset(folder, filenames, 'lumo:')}
             descent: 150,
             fixedWidth: true,
             normalize: true,
-            timestamp: 1 // Truthy!
-          })
+            timestamp: 1, // Truthy!
+          }),
         )
-        .on('glyphs', function (glyphData) {
+        .on('glyphs', (glyphData) => {
           // Store for later use
           glyphs = glyphData;
         })
         .pipe(gulp.dest('.'))
-        .on('finish', function () {
+        .on('finish', () => {
           // Generate base64 version of the font
           const lumoIconsWoff = fs.readFileSync('lumo-icons.woff');
 
@@ -183,7 +183,7 @@ $_documentContainer.innerHTML = \`
 `;
           glyphs.forEach((g) => {
             const name = g.name.replace(/\s/g, '-').toLowerCase();
-            const unicode = '\\\\' + g.unicode[0].charCodeAt(0).toString(16);
+            const unicode = `\\\\${g.unicode[0].charCodeAt(0).toString(16)}`;
             output += `      --lumo-icons-${name}: "${unicode}";\n`;
           });
           output += `    }
@@ -192,21 +192,21 @@ $_documentContainer.innerHTML = \`
 
 document.head.appendChild($_documentContainer.content);
 `;
-          fs.writeFile('font-icons.js', output, function (err) {
+          fs.writeFile('font-icons.js', output, (err) => {
             if (err) {
               return console.error(err);
             }
           });
 
           const list = glyphs.map((g) => g.name);
-          fs.writeFile('test/glyphs.json', JSON.stringify(list, null, 2), function (err) {
+          fs.writeFile('test/glyphs.json', JSON.stringify(list, null, 2), (err) => {
             if (err) {
               return console.error(err);
             }
           });
 
           // Cleanup
-          fs.unlink('lumo-icons.woff', function (err) {
+          fs.unlink('lumo-icons.woff', (err) => {
             if (err) {
               return console.error(err);
             }

package/iconset.js

@@ -6,6 +6,10 @@
 import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
 import './version.js';
 
+console.warn(
+  `WARNING: Since Vaadin 23.1, using <iron-icon> is deprecated. Please use <vaadin-icon> and '@vaadin/vaadin-lumo-styles/vaadin-iconset.js' instead.`,
+);
+
 const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<iron-iconset-svg size="1000" name="lumo">

package/mixins/input-field-shared.js

@@ -143,7 +143,7 @@ const inputField = css`
 const inputFieldShared = [requiredField, fieldButton, helper, inputField];
 
 registerStyles('', inputFieldShared, {
-  moduleId: 'lumo-input-field-shared-styles'
+  moduleId: 'lumo-input-field-shared-styles',
 });
 
 export { inputField, inputFieldShared };

package/mixins/required-field.js

@@ -40,10 +40,9 @@ const requiredField = css`
     padding-top: var(--lumo-space-m);
   }
 
-  [part='required-indicator']::after {
+  :host([required]) [part='required-indicator']::after {
     content: var(--lumo-required-field-indicator, '•');
     transition: opacity 0.2s;
-    opacity: 0;
     color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
     position: absolute;
     right: 0;
@@ -51,10 +50,6 @@ const requiredField = css`
     text-align: center;
   }
 
-  :host([required]:not([has-value])) [part='required-indicator']::after {
-    opacity: 1;
-  }
-
   :host([invalid]) [part='required-indicator']::after {
     color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -42,8 +42,8 @@
     "@polymer/iron-icon": "^3.0.0",
     "@polymer/iron-iconset-svg": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/icon": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/icon": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -52,5 +52,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/version.js

@@ -5,7 +5,7 @@
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.1.0-alpha3';
+    return '23.1.0-beta2';
   }
 }