From e197624b3557cd712c5cc4ce5e20fa7003cf8e4a Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 26 Jun 2020 08:24:12 -0400 Subject: [PATCH 1/5] Move constructor to top --- src/components/alert/alert.tsx | 4 +-- src/components/button/button.tsx | 4 +-- src/components/checkbox/checkbox.tsx | 8 +++--- src/components/color-picker/color-picker.tsx | 28 ++++++++++---------- src/components/details/details.tsx | 10 +++---- src/components/dialog/dialog.tsx | 8 +++--- src/components/drawer/drawer.tsx | 8 +++--- src/components/dropdown/dropdown.tsx | 16 +++++------ src/components/input/input.tsx | 4 +-- src/components/menu/menu.tsx | 12 ++++----- src/components/radio/radio.tsx | 8 +++--- src/components/range/range.tsx | 8 +++--- src/components/select/select.tsx | 10 +++---- src/components/switch/switch.tsx | 8 +++--- src/components/tab-group/tab-group.tsx | 10 +++---- src/components/tag/tag.tsx | 4 +-- src/components/textarea/textarea.tsx | 6 ++--- src/components/tooltip/tooltip.tsx | 10 +++---- 18 files changed, 83 insertions(+), 83 deletions(-) diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx index 1e941ec57..28ad7f1cc 100644 --- a/src/components/alert/alert.tsx +++ b/src/components/alert/alert.tsx @@ -16,13 +16,13 @@ import { focusVisible } from '../../utilities/focus-visible'; shadow: true }) export class Tab { - alert: HTMLElement; - constructor() { this.handleCloseClick = this.handleCloseClick.bind(this); this.handleTransitionEnd = this.handleTransitionEnd.bind(this); } + alert: HTMLElement; + @Element() host: HTMLSlAlertElement; /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */ diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 16e6b5eba..c50261252 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -15,13 +15,13 @@ import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil shadow: true }) export class Button { - button: HTMLButtonElement; - constructor() { this.handleBlur = this.handleBlur.bind(this); this.handleFocus = this.handleFocus.bind(this); } + button: HTMLButtonElement; + @State() hasFocus = false; /** The button's type. */ diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx index 936cd4b6d..41a21e654 100644 --- a/src/components/checkbox/checkbox.tsx +++ b/src/components/checkbox/checkbox.tsx @@ -15,10 +15,6 @@ let id = 0; shadow: true }) export class Checkbox { - id = `checkbox-${++id}`; - labelId = `checkbox-label-${id}`; - input: HTMLInputElement; - constructor() { this.handleClick = this.handleClick.bind(this); this.handleBlur = this.handleBlur.bind(this); @@ -26,6 +22,10 @@ export class Checkbox { this.handleMouseDown = this.handleMouseDown.bind(this); } + id = `checkbox-${++id}`; + labelId = `checkbox-label-${id}`; + input: HTMLInputElement; + @State() hasFocus = false; /** A native input's name attribute. */ diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 5c609b4ee..050009592 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -13,20 +13,6 @@ import { clamp } from '../../utilities/math'; shadow: true }) export class ColorPicker { - alphaSlider: HTMLElement; - alphaHandle: HTMLElement; - bypassValueParse = false; - copyButton: HTMLSlButtonElement; - dropdown: HTMLSlDropdownElement; - grid: HTMLElement; - gridHandle: HTMLElement; - hueSlider: HTMLElement; - hueHandle: HTMLElement; - lastValueEmitted: string; - menu: HTMLElement; - textInput: HTMLSlInputElement; - trigger: HTMLElement; - constructor() { this.handleAlphaDrag = this.handleAlphaDrag.bind(this); this.handleAlphaInput = this.handleAlphaInput.bind(this); @@ -50,6 +36,20 @@ export class ColorPicker { this.handleTextInputKeyDown = this.handleTextInputKeyDown.bind(this); } + alphaSlider: HTMLElement; + alphaHandle: HTMLElement; + bypassValueParse = false; + copyButton: HTMLSlButtonElement; + dropdown: HTMLSlDropdownElement; + grid: HTMLElement; + gridHandle: HTMLElement; + hueSlider: HTMLElement; + hueHandle: HTMLElement; + lastValueEmitted: string; + menu: HTMLElement; + textInput: HTMLSlInputElement; + trigger: HTMLElement; + @Element() host: HTMLSlColorPickerElement; @State() textInputValue = ''; diff --git a/src/components/details/details.tsx b/src/components/details/details.tsx index 59bba6682..579817fc3 100644 --- a/src/components/details/details.tsx +++ b/src/components/details/details.tsx @@ -16,17 +16,17 @@ let id = 0; shadow: true }) export class Details { - details: HTMLElement; - header: HTMLElement; - id = `details-${++id}`; - body: HTMLElement; - constructor() { this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this); this.handleSummaryClick = this.handleSummaryClick.bind(this); this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this); } + details: HTMLElement; + header: HTMLElement; + id = `details-${++id}`; + body: HTMLElement; + /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */ @Prop({ mutable: true, reflect: true }) open = false; diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index 90abc48d0..5dab0514f 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -17,10 +17,6 @@ let id = 0; shadow: true }) export class Dialog { - panel: HTMLElement; - dialog: HTMLElement; - id = `dialog-${++id}`; - constructor() { this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this); this.handleCloseClick = this.handleCloseClick.bind(this); @@ -29,6 +25,10 @@ export class Dialog { this.handleOverlayClick = this.handleOverlayClick.bind(this); } + panel: HTMLElement; + dialog: HTMLElement; + id = `dialog-${++id}`; + @Element() host: HTMLSlDialogElement; /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */ diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx index 586dbf680..390e090dd 100644 --- a/src/components/drawer/drawer.tsx +++ b/src/components/drawer/drawer.tsx @@ -17,10 +17,6 @@ let id = 0; shadow: true }) export class Drawer { - panel: HTMLElement; - drawer: HTMLElement; - id = `drawer-${++id}`; - constructor() { this.handleCloseClick = this.handleCloseClick.bind(this); this.handleTransitionEnd = this.handleTransitionEnd.bind(this); @@ -29,6 +25,10 @@ export class Drawer { this.handleOverlayClick = this.handleOverlayClick.bind(this); } + panel: HTMLElement; + drawer: HTMLElement; + id = `drawer-${++id}`; + @Element() host: HTMLSlDrawerElement; /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */ diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index 4118efe74..ed29de5dd 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -17,14 +17,6 @@ let id = 0; shadow: true }) export class Dropdown { - id = `dropdown-${++id}`; - ignoreMouseEvents = false; - ignoreMouseTimeout: any; - ignoreOpenWatcher = false; - panel: HTMLElement; - popover: Popover; - trigger: HTMLElement; - constructor() { this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this); this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this); @@ -33,6 +25,14 @@ export class Dropdown { this.togglePanel = this.togglePanel.bind(this); } + id = `dropdown-${++id}`; + ignoreMouseEvents = false; + ignoreMouseTimeout: any; + ignoreOpenWatcher = false; + panel: HTMLElement; + popover: Popover; + trigger: HTMLElement; + @Element() host: HTMLSlDropdownElement; /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */ diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx index 9b882559f..ab37484c1 100644 --- a/src/components/input/input.tsx +++ b/src/components/input/input.tsx @@ -17,8 +17,6 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, h } from shadow: true }) export class Input { - input: HTMLInputElement; - constructor() { this.handleChange = this.handleChange.bind(this); this.handleInput = this.handleInput.bind(this); @@ -29,6 +27,8 @@ export class Input { this.handlePasswordToggle = this.handlePasswordToggle.bind(this); } + input: HTMLInputElement; + @Element() host: HTMLSlInputElement; @State() hasFocus = false; diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx index ec29b479a..e84322e86 100644 --- a/src/components/menu/menu.tsx +++ b/src/components/menu/menu.tsx @@ -15,12 +15,6 @@ import { getTextContent } from '../../utilities/slot'; shadow: true }) export class Menu { - ignoreMouseEvents = false; - ignoreMouseTimeout: any; - menu: HTMLElement; - typeToSelect = ''; - typeToSelectTimeout: any; - constructor() { this.handleBlur = this.handleBlur.bind(this); this.handleClick = this.handleClick.bind(this); @@ -31,6 +25,12 @@ export class Menu { this.handleMouseOut = this.handleMouseOut.bind(this); } + ignoreMouseEvents = false; + ignoreMouseTimeout: any; + menu: HTMLElement; + typeToSelect = ''; + typeToSelectTimeout: any; + /** Emitted when the menu gains focus. */ @Event() slFocus: EventEmitter; diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx index a638f09f1..18bb4d02b 100644 --- a/src/components/radio/radio.tsx +++ b/src/components/radio/radio.tsx @@ -15,10 +15,6 @@ let id = 0; shadow: true }) export class Radio { - id = `radio-${++id}`; - labelId = `radio-label-${id}`; - input: HTMLInputElement; - constructor() { this.handleClick = this.handleClick.bind(this); this.handleBlur = this.handleBlur.bind(this); @@ -26,6 +22,10 @@ export class Radio { this.handleMouseDown = this.handleMouseDown.bind(this); } + id = `radio-${++id}`; + labelId = `radio-label-${id}`; + input: HTMLInputElement; + @Element() host: HTMLSlRadioElement; @State() hasFocus = false; diff --git a/src/components/range/range.tsx b/src/components/range/range.tsx index a116936d9..d0778b7c5 100644 --- a/src/components/range/range.tsx +++ b/src/components/range/range.tsx @@ -12,16 +12,16 @@ import ResizeObserver from 'resize-observer-polyfill'; shadow: true }) export class Range { - input: HTMLInputElement; - output: HTMLElement; - resizeObserver: any; - constructor() { this.handleInput = this.handleInput.bind(this); this.handleBlur = this.handleBlur.bind(this); this.handleFocus = this.handleFocus.bind(this); } + input: HTMLInputElement; + output: HTMLElement; + resizeObserver: any; + @State() hasFocus = false; /** The input's name attribute. */ diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx index d6d7bd526..0a834beee 100644 --- a/src/components/select/select.tsx +++ b/src/components/select/select.tsx @@ -13,11 +13,6 @@ import { getTextContent } from '../../utilities/slot'; shadow: true }) export class Select { - dropdown: HTMLSlDropdownElement; - input: HTMLSlInputElement; - menu: HTMLSlMenuElement; - resizeObserver: any; - constructor() { this.handleBlur = this.handleBlur.bind(this); this.handleFocus = this.handleFocus.bind(this); @@ -29,6 +24,11 @@ export class Select { this.handleSlotChange = this.handleSlotChange.bind(this); } + dropdown: HTMLSlDropdownElement; + input: HTMLSlInputElement; + menu: HTMLSlMenuElement; + resizeObserver: any; + @Element() host: HTMLSlSelectElement; @State() hasFocus = false; diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 52a08534f..019d900ff 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -16,10 +16,6 @@ let id = 0; shadow: true }) export class Switch { - id = `switch-${++id}`; - labelId = `switch-label-${id}`; - input: HTMLInputElement; - constructor() { this.handleClick = this.handleClick.bind(this); this.handleBlur = this.handleBlur.bind(this); @@ -28,6 +24,10 @@ export class Switch { this.handleMouseDown = this.handleMouseDown.bind(this); } + id = `switch-${++id}`; + labelId = `switch-label-${id}`; + input: HTMLInputElement; + @State() hasFocus = false; /** A native input's name attribute. */ diff --git a/src/components/tab-group/tab-group.tsx b/src/components/tab-group/tab-group.tsx index 6e995b052..a758b0ddd 100644 --- a/src/components/tab-group/tab-group.tsx +++ b/src/components/tab-group/tab-group.tsx @@ -17,6 +17,11 @@ import { focusVisible } from '../../utilities/focus-visible'; shadow: true }) export class TabGroup { + constructor() { + this.handleClick = this.handleClick.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + } + activeTab: HTMLSlTabElement; activeTabIndicator: HTMLElement; body: HTMLElement; @@ -25,11 +30,6 @@ export class TabGroup { tabGroup: HTMLElement; tabs: HTMLElement; - constructor() { - this.handleClick = this.handleClick.bind(this); - this.handleKeyDown = this.handleKeyDown.bind(this); - } - @Element() host: HTMLSlTabGroupElement; /** The placement of the tabs. */ diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx index 4af228089..932de05ca 100644 --- a/src/components/tag/tag.tsx +++ b/src/components/tag/tag.tsx @@ -13,12 +13,12 @@ import { Component, Event, EventEmitter, Prop, h } from '@stencil/core'; shadow: true }) export class Tag { - tag: HTMLElement; - constructor() { this.handleRemoveClick = this.handleRemoveClick.bind(this); } + tag: HTMLElement; + /** The tag's type. */ @Prop() type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'primary'; diff --git a/src/components/textarea/textarea.tsx b/src/components/textarea/textarea.tsx index a8ea05f57..ec664038f 100644 --- a/src/components/textarea/textarea.tsx +++ b/src/components/textarea/textarea.tsx @@ -12,9 +12,6 @@ import ResizeObserver from 'resize-observer-polyfill'; shadow: true }) export class Textarea { - resizeObserver: any; - textarea: HTMLTextAreaElement; - constructor() { this.handleChange = this.handleChange.bind(this); this.handleInput = this.handleInput.bind(this); @@ -22,6 +19,9 @@ export class Textarea { this.handleFocus = this.handleFocus.bind(this); } + resizeObserver: any; + textarea: HTMLTextAreaElement; + @State() hasFocus = false; /** The textarea's size. */ diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx index e22664d69..5a70cd3ff 100644 --- a/src/components/tooltip/tooltip.tsx +++ b/src/components/tooltip/tooltip.tsx @@ -16,11 +16,6 @@ let id = 0; shadow: true }) export class Tooltip { - id = `tooltip-${++id}`; - popover: Popover; - target: HTMLElement; - tooltip: any; - constructor() { this.handleBlur = this.handleBlur.bind(this); this.handleClick = this.handleClick.bind(this); @@ -30,6 +25,11 @@ export class Tooltip { this.handleSlotChange = this.handleSlotChange.bind(this); } + id = `tooltip-${++id}`; + popover: Popover; + target: HTMLElement; + tooltip: any; + @Element() host: HTMLSlTooltipElement; /** The tooltip's content. */ From c241fe50bbf1e6af79cdaa25865f1d62d8e6a581 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 26 Jun 2020 08:26:33 -0400 Subject: [PATCH 2/5] Add no arrow example --- docs/components/tooltip.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md index b91e8566c..61fbb22b8 100644 --- a/docs/components/tooltip.md +++ b/docs/components/tooltip.md @@ -132,3 +132,18 @@ A tooltip's target is its _first child element_, so you should only wrap one ele toggle.addEventListener('click', () => tooltip.open = !tooltip.open); ``` + +### No Arrows + +```html preview +
+ + Above + + + + + Below + +
+``` \ No newline at end of file From d5903da0beafbacbde07c3634f4cc5633a67e0c6 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 26 Jun 2020 09:06:46 -0400 Subject: [PATCH 3/5] Change shoes --- README.md | 2 +- dev-server.js | 4 ++-- docs/overview/getting-started.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index cd26ea02f..0572116cd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Shoelace -👟 _A forward-thinking web component library for desktop and mobile._ +_A forward-thinking web component library for desktop and mobile._ 🥾 --- diff --git a/dev-server.js b/dev-server.js index c2ab23aea..cbd4652ab 100644 --- a/dev-server.js +++ b/dev-server.js @@ -1,5 +1,5 @@ // -// The Shoelace dev server! 👟 +// The Shoelace dev server! 🥾 // // This is an Express + Browsersync script that: // @@ -50,7 +50,7 @@ app.listen(proxyPort); // Give Stencil's dev server a few seconds to spin up, then launch the browser setTimeout(() => { - console.log(chalk.cyan(`\nLaunching the Shoelace dev server at http://localhost:${browserPort}! 👟\n`)); + console.log(chalk.cyan(`\nLaunching the Shoelace dev server at http://localhost:${browserPort}! 🥾\n`)); bs.init({ startPath: '/', diff --git a/docs/overview/getting-started.md b/docs/overview/getting-started.md index 7e2ce4353..776bfbbbc 100644 --- a/docs/overview/getting-started.md +++ b/docs/overview/getting-started.md @@ -1,6 +1,6 @@ -_A forward-thinking web component library for desktop and mobile._ +_A forward-thinking web component library for desktop and mobile._ 🥾 From 0be1f3f612a8e1e62c5db62f8cf8b138c1b92324 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Sat, 27 Jun 2020 08:21:25 -0400 Subject: [PATCH 4/5] Remove bootstrap-icons from package.json --- package-lock.json | 6 ------ package.json | 1 - 2 files changed, 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index a9b6c13fb..94b1e7fd1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -970,12 +970,6 @@ "type-is": "~1.6.17" } }, - "bootstrap-icons": { - "version": "1.0.0-alpha4", - "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.0.0-alpha4.tgz", - "integrity": "sha512-UcpSUPsvUiW7ueBQfXZSgknJv/rj060dglhWIRPjkLjUWa32jMWqsLXO8tXY2od4Ew6cuh0BJ3f8VOhQPVY4mA==", - "dev": true - }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index faecc6ceb..0d17e2120 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "@typescript-eslint/eslint-plugin": "^2.28.0", "@typescript-eslint/parser": "^2.28.0", "bluebird": "^3.7.2", - "bootstrap-icons": "^1.0.0-alpha4", "browser-sync": "^2.26.7", "chalk": "^4.0.0", "concurrently": "^5.1.0", From d53122e72e3881c00ebcc21deae3c49a816d70ac Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Sat, 27 Jun 2020 08:39:50 -0400 Subject: [PATCH 5/5] Added custom icon example --- docs/assets/images/boot.svg | 134 ++++++++++++++++++++++++++++++++++++ docs/components/icon.md | 16 ++++- 2 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 docs/assets/images/boot.svg diff --git a/docs/assets/images/boot.svg b/docs/assets/images/boot.svg new file mode 100644 index 000000000..26193dc43 --- /dev/null +++ b/docs/assets/images/boot.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + Openclipart + + + blue boot + 2009-06-18T11:16:58 + A draw of a boot + https://openclipart.org/detail/26707/blue-boot-by-badaman + + + badaman + + + + + azul + blue + boot + bota + deporte + inkscape + line art + monochrome + sport + vectorial + + + + + + + + + + + diff --git a/docs/components/icon.md b/docs/components/icon.md index 6f2f39e8f..d6599fbd6 100644 --- a/docs/components/icon.md +++ b/docs/components/icon.md @@ -4,7 +4,11 @@ Icons are symbols that can be used to represent or provide context to various options and actions within an application. -Shoelace comes bundled with over 600 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. You can also use your own SVG icons with this component through the `src` attribute. +Shoelace comes bundled with over 1,000 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. Click or tap on an icon below to copy the name and use it like this. + +```html + +```
@@ -29,7 +33,7 @@ Shoelace comes bundled with over 600 icons courtesy of the [Bootstrap Icons](htt ### Sizes -Icon sizes are determined by the current font size. +Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element as shown below. ```html preview
@@ -52,6 +56,14 @@ Icon sizes are determined by the current font size.
``` +### Custom Icons + +Custom icons can be loaded by setting the `src` attribute. Only SVG images are supported + +```html preview + +``` +