From 237143ac0f94e56eb6712da61c3565c61214d637 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 7 Apr 2020 22:30:30 -0400 Subject: [PATCH] Switch to feather icons and improve icons --- docs/assets/scripts/code-block-plugin.js | 2 +- docs/assets/styles/docs.css | 2 +- docs/home.md | 2 +- package-lock.json | 26 ++++++++++--- package.json | 2 +- postinstall.js | 17 +++++++-- src/components.d.ts | 8 ++++ src/components/alert/readme.md | 8 ++-- src/components/button/button.scss | 2 +- src/components/button/button.tsx | 9 +---- src/components/button/readme.md | 27 +++++++++---- src/components/icon/icon.tsx | 19 +++++++++- src/components/icon/readme.md | 48 +++++++++++++----------- src/components/input/input.tsx | 4 +- src/components/input/readme.md | 12 +++--- src/styles/mixins/button.scss | 3 +- 16 files changed, 126 insertions(+), 65 deletions(-) diff --git a/docs/assets/scripts/code-block-plugin.js b/docs/assets/scripts/code-block-plugin.js index 41620c89f..c61874324 100644 --- a/docs/assets/scripts/code-block-plugin.js +++ b/docs/assets/scripts/code-block-plugin.js @@ -62,7 +62,7 @@ toggle.classList.add('code-block__toggle'); toggle.setAttribute('aria-expanded', 'false'); toggle.setAttribute('aria-controls', preId); - toggle.innerHTML = ''; + toggle.innerHTML = ''; codeBlock.prepend(preview); codeBlock.append(toggle); diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index b1e605b9e..91bd2ea61 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -263,7 +263,7 @@ body.close .sidebar-toggle:focus { align-items: center; justify-content: center; position: absolute; - color: var(--sl-color-gray-70); + color: var(--sl-color-gray-60); top: 0; right: 0; bottom: 0; diff --git a/docs/home.md b/docs/home.md index cea8d4627..2c3d51dfc 100644 --- a/docs/home.md +++ b/docs/home.md @@ -66,7 +66,7 @@ Although Web Components can (to some degree) be polyfilled for older browsers, s - Components are compiled by [Stencil](https://stenciljs.com/) - Theme colors and form controls are inspired by [Element](element.eleme.io) -- Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/) +- Icons are courtesy of [Feather Icons](https://feathericons.com/) - Positioning of menus, popovers, etc. is handled by [Popper.js](https://popper.js.org/) - Tooltips are powered by [Tippy.js](https://atomiks.github.io/tippyjs/) - Documentation is powered by [Docsify](https://docsify.js.org/) diff --git a/package-lock.json b/package-lock.json index 123a10db4..5c73e4eeb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -559,11 +559,6 @@ "file-uri-to-path": "1.0.0" } }, - "bootstrap-icons": { - "version": "1.0.0-alpha3", - "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.0.0-alpha3.tgz", - "integrity": "sha512-UO++43jb/qlWVsC31WkHOjFsTihJkSz0wngnUS+P1ImcCMTqDJqDHySld+hpkzxi+q6fL8iom7nfT3ApAxZ6cQ==" - }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -706,6 +701,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -1561,6 +1561,22 @@ "reusify": "^1.0.4" } }, + "feather-icons": { + "version": "4.28.0", + "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.28.0.tgz", + "integrity": "sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==", + "requires": { + "classnames": "^2.2.5", + "core-js": "^3.1.3" + }, + "dependencies": { + "core-js": { + "version": "3.6.4", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz", + "integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==" + } + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", diff --git a/package.json b/package.json index 0e58f6ca5..711a147b7 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@popperjs/core": "^2.1.1", "@stencil/core": "^1.12.1", "@stencil/sass": "^1.1.1", - "bootstrap-icons": "^1.0.0-alpha3", + "feather-icons": "^4.28.0", "normalize.css": "^8.0.1", "resize-observer-polyfill": "^1.5.1", "tippy.js": "^5.1.3" diff --git a/postinstall.js b/postinstall.js index f700d5b66..5ab64035e 100644 --- a/postinstall.js +++ b/postinstall.js @@ -1,6 +1,15 @@ const copy = require('recursive-copy'); +const del = require('del'); -Promise.all([ - copy('./node_modules/bootstrap-icons/icons', './src/components/icon/icons', { overwrite: true }), - copy('./node_modules/bootstrap-icons/LICENSE.md', './src/components/icon/icons/LICENSE.md', { overwrite: true }) -]).catch(err => console.error(err)); +(async () => { + try { + await del('./src/components/icon/icons'); + + await Promise.all([ + copy('./node_modules/feather-icons/dist/icons', './src/components/icon/icons', { overwrite: true }), + copy('./node_modules/feather-icons/LICENSE', './src/components/icon/icons/LICENSE', { overwrite: true }) + ]); + } catch (err) { + console.error(err); + } +})(); diff --git a/src/components.d.ts b/src/components.d.ts index cb427ecee..43e196ee9 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -137,6 +137,10 @@ export namespace Components { * An external URL of the SVG file to fetch. */ "src": string; + /** + * An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. + */ + "strokeWidth": string; } interface SlInput { /** @@ -804,6 +808,10 @@ declare namespace LocalJSX { * An external URL of the SVG file to fetch. */ "src"?: string; + /** + * An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. + */ + "strokeWidth"?: string; } interface SlInput { /** diff --git a/src/components/alert/readme.md b/src/components/alert/readme.md index 5e71d209a..2366076b8 100644 --- a/src/components/alert/readme.md +++ b/src/components/alert/readme.md @@ -25,7 +25,7 @@ ```html preview - + Your changes have been saved
You can continue working or safely leave the app now.
@@ -37,19 +37,19 @@
- + Your changes have been saved
You can continue working or safely leave the app now.
- + Your changes have been saved
You can continue working or safely leave the app now.
- + Your changes have been saved
You can continue working or safely leave the app now. diff --git a/src/components/button/button.scss b/src/components/button/button.scss index bc47074a2..9308f5652 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -17,7 +17,7 @@ border-style: solid; border-width: var(--sl-form-control-border-width); font-family: var(--sl-form-control-font-sans-serif); - font-weight: var(--sl-font-weight-normal); + font-weight: var(--sl-font-weight-semibold); user-select: none; white-space: nowrap; vertical-align: middle; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 6aecd5da9..dccc37179 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -92,14 +92,7 @@ export class Button { {this.caret && ( - - - - - - - - + )} diff --git a/src/components/button/readme.md b/src/components/button/readme.md index 2f0383fb8..b50823a43 100644 --- a/src/components/button/readme.md +++ b/src/components/button/readme.md @@ -39,9 +39,9 @@ Use the `size` prop to change a button's size. Use the `circle` prop to create circular icon buttons. ```html preview - - - + + + ``` ## Text @@ -70,16 +70,16 @@ Use the `prefix` and `suffix` slots to add icons. ```html preview - + Settings - + Refresh - - + + Open ``` @@ -170,6 +170,19 @@ Type: `Promise` | `"suffix"` | Used to append an icon or similar element to the button. | +## Dependencies + +### Depends on + +- [sl-icon](../icon) + +### Graph +```mermaid +graph TD; + sl-button --> sl-icon + style sl-button fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 01738b8c1..277f477b9 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -2,6 +2,8 @@ import { Component, Prop, State, Watch, getAssetPath, h } from '@stencil/core'; import { requestIcon } from './request'; +const parser = new DOMParser(); + @Component({ tag: 'sl-icon', styleUrl: 'icon.scss', @@ -20,6 +22,9 @@ export class Icon { /** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */ @Prop() label: string; + /** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */ + @Prop() strokeWidth = '2'; + @Watch('name') @Watch('src') handleChange() { @@ -46,10 +51,20 @@ export class Icon { setIcon() { const url = this.name ? getAssetPath(`./icons/${this.name}.svg`) : this.src; - requestIcon(url).then(svg => (this.svg = svg)); + requestIcon(url).then(source => { + const doc = parser.parseFromString(source, 'text/html'); + const svg = doc.body.querySelector('svg'); + + if (svg) { + svg.setAttribute('stroke-width', this.strokeWidth); + this.svg = svg.outerHTML; + } else { + this.svg = ''; + } + }); } render() { - return