Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate some AuInput features #429

Merged
merged 2 commits into from
Sep 14, 2023
Merged

Conversation

Windvis
Copy link
Contributor

@Windvis Windvis commented Sep 13, 2023

This PR deprecates the 2-way-binding and input masking functionality in the AuInput component. This makes the component more flexible and easier to maintain.

It also means the inputmask library won't be bundled (when using Embroider "optimized") if the project doesn't use the masking feature (and doesn't use the AuDateInput component since that also uses it internally) reducing the bundle size by quite a bit.

Closes #250

Migration guide

2-way-binding

To resolve the deprecation warnings, simply use the attribute versions and the {{on}} modifier instead.

- <AuInput @value={{this.someValue}} @type="number" />
+ <AuInput value={{this.someValue}} type="number" {{on "change" this.handleChange}} />

input masking

The masking functionality has now moved to the {{au-inputmask}} modifier. To resolve the deprecations, remove all masking related arguments, apply the modifier and pass them in there instead.

- <AuInput @mask="9.9.9" @maskPlaceholder="_" @onChange={{this.handleChange}} />
+ <AuInput {{au-inputmask options=(hash mask="9.9.9" placeholder="_")}} {{on "change" this.handleChange}} />

Important: The @onChange action returns the unmasked value. In order to match that behavior with the {{on}} modifier, the handler needs to be adjusted.

- @action onChange(newValue) { this.value = newValue }
+ @action onChange(event) { this.value = event.target.inputmask.unmaskedvalue(); }

@Windvis Windvis added the Deprecation This change introduces a deprecation. A simple guide should be provided in the description. label Sep 13, 2023
addon/components/au-input.js Outdated Show resolved Hide resolved
This deprecates the 2-way-binding and the masking feature in the AuInput component.

We were using `Input` internally, but this wasn't always usefull requiring some projects to create new components based on the native input instead. By deprecating the `Input` usage, all projects can now use `AuInput`, even for more advanced use-cases.

The masking functionality is now replaced by the `{{au-inputmask}}` modifier. Projects can apply the modifier instead of passing arguments. This makes the implementation a lot easier to maintain and projects that don't use the masking feature (and the AuDateInput component) won't ship the inputmask library if they are using Embroider "optimized".
This updates the docs so only the non-deprecated options are shown.
@Windvis Windvis force-pushed the feat/deprecate-au-input-features branch from c764957 to 6617864 Compare September 13, 2023 15:36
@Windvis Windvis added the enhancement Used when the PR adds a new feature or enhancement. label Sep 14, 2023
@Windvis Windvis merged commit 95705af into master Sep 14, 2023
@Windvis Windvis deleted the feat/deprecate-au-input-features branch September 14, 2023 13:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Deprecation This change introduces a deprecation. A simple guide should be provided in the description. enhancement Used when the PR adds a new feature or enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Deprecate the Input component usage in AuInput
1 participant