From 909fa768578c466394ad51a132dd79999ef633a5 Mon Sep 17 00:00:00 2001 From: Guillaume Cusnieux Date: Mon, 15 Mar 2021 19:56:27 +0100 Subject: [PATCH] fix(gv-option): resolve display with icons & without text fix: gravitee-io/issues#5234 --- assets/icons/appliances.svg | 2 +- assets/icons/clothers.svg | 2 +- assets/icons/code.svg | 2 +- assets/icons/communication.svg | 2 +- assets/icons/cooking.svg | 2 +- assets/icons/design.svg | 2 +- assets/icons/devices.svg | 2 +- assets/icons/finance.svg | 2 +- assets/icons/food.svg | 2 +- assets/icons/general.svg | 2 +- assets/icons/home.svg | 2 +- assets/icons/layout.svg | 2 +- assets/icons/media.svg | 2 +- assets/icons/navigation.svg | 2 +- assets/icons/shopping.svg | 2 +- assets/icons/text.svg | 2 +- assets/icons/tools.svg | 2 +- assets/icons/wheather.svg | 2 +- package-lock.json | 24 +++++++++++----------- src/atoms/gv-button.js | 12 ++++++----- src/organisms/gv-pagination.js | 12 +++++------ stories/atoms/gv-button.stories.js | 2 +- stories/molecules/gv-option.stories.js | 12 +++++++++++ stories/organisms/gv-pagination.stories.js | 9 ++++++++ tasks/generate-icons.js | 2 +- 25 files changed, 66 insertions(+), 43 deletions(-) diff --git a/assets/icons/appliances.svg b/assets/icons/appliances.svg index 01a52741..cff8a06c 100644 --- a/assets/icons/appliances.svg +++ b/assets/icons/appliances.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/clothers.svg b/assets/icons/clothers.svg index 6e1b7c07..32edc3ed 100644 --- a/assets/icons/clothers.svg +++ b/assets/icons/clothers.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/code.svg b/assets/icons/code.svg index 76efb336..2c397e61 100644 --- a/assets/icons/code.svg +++ b/assets/icons/code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/communication.svg b/assets/icons/communication.svg index cf54d331..314ed601 100644 --- a/assets/icons/communication.svg +++ b/assets/icons/communication.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/cooking.svg b/assets/icons/cooking.svg index 6c9c30a9..8037a589 100644 --- a/assets/icons/cooking.svg +++ b/assets/icons/cooking.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/design.svg b/assets/icons/design.svg index 61f14ce1..ea8cb8ff 100644 --- a/assets/icons/design.svg +++ b/assets/icons/design.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/devices.svg b/assets/icons/devices.svg index 195d4224..1bb3dfb1 100644 --- a/assets/icons/devices.svg +++ b/assets/icons/devices.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/finance.svg b/assets/icons/finance.svg index 90876d3d..125144a7 100644 --- a/assets/icons/finance.svg +++ b/assets/icons/finance.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/food.svg b/assets/icons/food.svg index e543383b..b07919d7 100644 --- a/assets/icons/food.svg +++ b/assets/icons/food.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/general.svg b/assets/icons/general.svg index 49e2f7c5..778fc70d 100644 --- a/assets/icons/general.svg +++ b/assets/icons/general.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/home.svg b/assets/icons/home.svg index 9c0d955c..b262b981 100644 --- a/assets/icons/home.svg +++ b/assets/icons/home.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/layout.svg b/assets/icons/layout.svg index a3d1b223..a05dd23a 100644 --- a/assets/icons/layout.svg +++ b/assets/icons/layout.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/media.svg b/assets/icons/media.svg index 57e1b8aa..9d9e0f8d 100644 --- a/assets/icons/media.svg +++ b/assets/icons/media.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/navigation.svg b/assets/icons/navigation.svg index d7f1103e..80c011c9 100644 --- a/assets/icons/navigation.svg +++ b/assets/icons/navigation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/shopping.svg b/assets/icons/shopping.svg index 490db2a0..92b5d949 100644 --- a/assets/icons/shopping.svg +++ b/assets/icons/shopping.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/text.svg b/assets/icons/text.svg index 114ffcd8..54648259 100644 --- a/assets/icons/text.svg +++ b/assets/icons/text.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/tools.svg b/assets/icons/tools.svg index af01044d..15e88b0e 100644 --- a/assets/icons/tools.svg +++ b/assets/icons/tools.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/wheather.svg b/assets/icons/wheather.svg index bac8fcd5..d5cd3db7 100644 --- a/assets/icons/wheather.svg +++ b/assets/icons/wheather.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3267f93d..8a0cd264 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25095,7 +25095,7 @@ }, "node_modules/npm/node_modules/lodash._baseindexof": { "version": "3.1.0", - "extraneous": true, + "dev": true, "inBundle": true, "license": "MIT" }, @@ -25111,19 +25111,19 @@ }, "node_modules/npm/node_modules/lodash._bindcallback": { "version": "3.0.1", - "extraneous": true, + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._cacheindexof": { "version": "3.0.2", - "extraneous": true, + "dev": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._createcache": { "version": "3.1.2", - "extraneous": true, + "dev": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -25138,7 +25138,7 @@ }, "node_modules/npm/node_modules/lodash._getnative": { "version": "3.9.1", - "extraneous": true, + "dev": true, "inBundle": true, "license": "MIT" }, @@ -25156,7 +25156,7 @@ }, "node_modules/npm/node_modules/lodash.restparam": { "version": "3.6.1", - "extraneous": true, + "dev": true, "inBundle": true, "license": "MIT" }, @@ -56850,7 +56850,7 @@ "lodash._baseindexof": { "version": "3.1.0", "bundled": true, - "extraneous": true + "dev": true }, "lodash._baseuniq": { "version": "4.6.0", @@ -56864,17 +56864,17 @@ "lodash._bindcallback": { "version": "3.0.1", "bundled": true, - "extraneous": true + "dev": true }, "lodash._cacheindexof": { "version": "3.0.2", "bundled": true, - "extraneous": true + "dev": true }, "lodash._createcache": { "version": "3.1.2", "bundled": true, - "extraneous": true, + "dev": true, "requires": { "lodash._getnative": "^3.0.0" } @@ -56887,7 +56887,7 @@ "lodash._getnative": { "version": "3.9.1", "bundled": true, - "extraneous": true + "dev": true }, "lodash._root": { "version": "3.0.1", @@ -56902,7 +56902,7 @@ "lodash.restparam": { "version": "3.6.1", "bundled": true, - "extraneous": true + "dev": true }, "lodash.union": { "version": "4.6.0", diff --git a/src/atoms/gv-button.js b/src/atoms/gv-button.js index f6fed18b..6dbb9c49 100644 --- a/src/atoms/gv-button.js +++ b/src/atoms/gv-button.js @@ -167,11 +167,11 @@ export class GvButton extends LitElement { width: 100%; } - .button.iconLeft slot { + .button.iconLeft:not(.noContent) slot { margin-left: 7px; } - .button.iconRight slot { + .button.iconRight:not(.noContent) slot { margin-right: 7px; } @@ -393,9 +393,11 @@ export class GvButton extends LitElement { firstUpdated() { const slot = this.shadowRoot.querySelector('slot'); - if (slot.assignedNodes().length > 0) { - this._hasContent = true; - } + this._hasContent = + slot + .assignedNodes() + .map((node) => node.textContent) + .filter((text) => text.trim() !== '').length > 0; this.addEventListener('keydown', this._onKeyDown); } } diff --git a/src/organisms/gv-pagination.js b/src/organisms/gv-pagination.js index 7d9f8874..b30393b8 100644 --- a/src/organisms/gv-pagination.js +++ b/src/organisms/gv-pagination.js @@ -140,22 +140,22 @@ export class GvPagination extends LitElement { html`${this.widget - ? html`` - : i18n('gv-pagination.previous')}${this.widget ? '' : i18n('gv-pagination.previous')}`, ); rightP.push( html`${this.widget - ? html`` - : i18n('gv-pagination.next')}${this.widget ? '' : i18n('gv-pagination.next')}`, ); return html`${this.widget ? leftP.slice(0, 1) : leftP} diff --git a/stories/atoms/gv-button.stories.js b/stories/atoms/gv-button.stories.js index 51f2c3f0..a163254e 100644 --- a/stories/atoms/gv-button.stories.js +++ b/stories/atoms/gv-button.stories.js @@ -26,7 +26,7 @@ const items = [ { innerHTML: 'Link href', link: true, href: 'https://gravitee.io/' }, { innerHTML: 'Default', icon: 'cooking:dish' }, { icon: 'cooking:dish' }, - { innerHTML: 'Default href', icon: 'cooking:dish', href: 'https://gravitee.io/' }, + { innerHTML: 'Default href', icon: 'navigation:angle-right', href: 'https://gravitee.io/' }, { innerHTML: 'Primary', primary: true, icon: 'cooking:dish' }, { innerHTML: 'Danger', danger: true, icon: 'cooking:dish' }, { innerHTML: 'Default', 'icon-right': 'code:plus' }, diff --git a/stories/molecules/gv-option.stories.js b/stories/molecules/gv-option.stories.js index 49d08b71..d10cfdc4 100644 --- a/stories/molecules/gv-option.stories.js +++ b/stories/molecules/gv-option.stories.js @@ -38,6 +38,18 @@ export const basics = makeStory(conf, { items: [{ options, value: 'cap' }], }); +export const icons = makeStory(conf, { + items: [ + { + options: [ + { id: 'foo', icon: 'layout:layout-4-blocks' }, + { id: 'bar', icon: 'layout:layout-horizontal' }, + ], + value: 'foo', + }, + ], +}); + const description = `

A hands-free application.
Using this type, you will be able to define the client_id by your own.

`; export const Description = makeStory(conf, { diff --git a/stories/organisms/gv-pagination.stories.js b/stories/organisms/gv-pagination.stories.js index 1b050277..ec810b8d 100644 --- a/stories/organisms/gv-pagination.stories.js +++ b/stories/organisms/gv-pagination.stories.js @@ -48,3 +48,12 @@ export const Large = makeStory(conf, { export const Empty = makeStory(conf, { items: [{}], }); + +export const Widget = makeStory(conf, { + items: [ + { + data: { first: 1, last: 1, total: 10, current_page: 1, total_pages: 10 }, + widget: true, + }, + ], +}); diff --git a/tasks/generate-icons.js b/tasks/generate-icons.js index 56693965..a59ffbc8 100644 --- a/tasks/generate-icons.js +++ b/tasks/generate-icons.js @@ -22,7 +22,7 @@ const svgstore = require('svgstore'); const glob = util.promisify(rawGlob); const svgo = new SVGO({ - plugins: [{ removeXMLNS: true }, { removeDimensions: true }, { removeAttrs: { attrs: ['svg:fill', 'path:fill'] } }], + plugins: [{ removeXMLNS: true }, { removeDimensions: true }, { removeAttrs: { attrs: ['svg:fill', 'path:fill', 'rect:fill'] } }], }); const svgoThirdparty = new SVGO({ plugins: [{ removeXMLNS: true }, { removeDimensions: true }] }); // {attrs: 'fill:none|stroke|fill-rule|clip-rule|width|height'}