From a1c93fd30f0081004bd74dc7ce5e071aadc2dce1 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 16 Sep 2022 15:27:10 -0400 Subject: [PATCH] fixes #913 --- docs/components/input.md | 14 +++++++------- docs/resources/changelog.md | 5 ++++- src/components/input/input.ts | 16 +++++++++------- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/docs/components/input.md b/docs/components/input.md index 499c9ca7..3df755b9 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -76,14 +76,14 @@ const App = () => ; ### Toggle Password -Add the `toggle-password` attribute to add a toggle button that will show the password when activated. +Add the `password-toggle` attribute to add a toggle button that will show the password when activated. ```html preview - +
- +
- + ``` ```jsx react @@ -91,11 +91,11 @@ import { SlInput } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - +
- +
- + ); ``` diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 5b87cc4e..bf9d72f9 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -13,9 +13,11 @@ _During the beta period, these restrictions may be relaxed in the event of a mis This release removes the `` component. When this component was introduced, support for [`aspect-radio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)) wasn't great. These days, [the property is supported](https://caniuse.com/mdn-css_properties_aspect-ratio) by all of Shoelace's target browsers, making a dedicated component redundant. - 🚨 BREAKING: Removed `` (use the well-supported `aspect-ratio` CSS property instead) +- 🚨 BREAKING: Changed the `toggle-password` attribute of `` to `password-toggle` for consistency - Added an expand/collapse animation to `` - Added `sl-lazy-change` event to `` - Added `expand-button` part to `` [#893](https://github.com/shoelace-style/shoelace/pull/893) +- Added `password-visible` attribute to `` [#913](https://github.com/shoelace-style/shoelace/issues/913) - Fixed a bug in `` that didn't account for the arrow's diagonal size - Fixed a bug in `` that caused arrow placement to be incorrect with RTL - Fixed a bug in `` that caused the indeterminate animation to stop working in Safari [#891](https://github.com/shoelace-style/shoelace/issues/891) @@ -43,7 +45,8 @@ This release removes the `` component. When this component - Fixed a bug in `` that prevented the keyboard from working when the component was nested in a shadow root [#871](https://github.com/shoelace-style/shoelace/issues/871) - Fixed a bug in `` that prevented the keyboard from working when the component was nested in a shadow root [#872](https://github.com/shoelace-style/shoelace/issues/872) - Fixed a bug in `` that allowed disabled tabs to erroneously receive focus -- Improved single selection in `` so nodes expand and collapse and receive selection when clicking on the label +- Improved single selection in `` so nodes expand and collapse and rece + ive selection when clicking on the label - Renamed `expanded-icon` and `collapsed-icon` slots to `expand-icon` and `collapse-icon` in the experimental `` and `` components - Improved RTL support for `` - Refactored components to extend from `ShoelaceElement` to make `dir` and `lang` reactive properties in all components diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 2ec4de6f..34f6b479 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -67,7 +67,6 @@ export default class SlInput extends ShoelaceElement { private readonly localize = new LocalizeController(this); @state() private hasFocus = false; - @state() private isPasswordVisible = false; /** The input's type. */ @property({ reflect: true }) type: @@ -111,7 +110,10 @@ export default class SlInput extends ShoelaceElement { @property({ type: Boolean }) clearable = false; /** Adds a password toggle button to password inputs. */ - @property({ attribute: 'toggle-password', type: Boolean }) togglePassword = false; + @property({ attribute: 'password-toggle', type: Boolean }) passwordToggle = false; + + /** Determines whether or not the password is currently visible. Only applies to password inputs. */ + @property({ attribute: 'password-visible', type: Boolean }) passwordVisible = false; /** Hides the browser's built-in increment/decrement spin buttons for number inputs. */ @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons = false; @@ -324,7 +326,7 @@ export default class SlInput extends ShoelaceElement { } handlePasswordToggle() { - this.isPasswordVisible = !this.isPasswordVisible; + this.passwordVisible = !this.passwordVisible; } @watch('value', { waitUntilFirstUpdate: true }) @@ -392,7 +394,7 @@ export default class SlInput extends ShoelaceElement { part="input" id="input" class="input__control" - type=${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type} + type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type} name=${ifDefined(this.name)} ?disabled=${this.disabled} ?readonly=${this.readonly} @@ -438,17 +440,17 @@ export default class SlInput extends ShoelaceElement { ` : ''} - ${this.togglePassword && !this.disabled + ${this.passwordToggle && !this.disabled ? html`