|
| 1 | +- Start Date: 2018-03-28 |
| 2 | +- RFC PR: |
| 3 | +- Ember Issue: |
| 4 | + |
| 5 | +# Summary |
| 6 | + |
| 7 | +The aim of this RFC is to deprecate the component's `isVisible` property. |
| 8 | +It is not used by Ember internally and left undefined unless manually set. |
| 9 | +It's poorly documented and component visibility it better managed in |
| 10 | +template space rather than JS. |
| 11 | + |
| 12 | +# Motivation |
| 13 | + |
| 14 | +Setting the isVisible property on a component instance as a way to toggle |
| 15 | +the visibility of the component is confusing. The majority of its usage |
| 16 | +predates even Ember 1.0.0, and modern Ember applications already completely |
| 17 | +avoid using isVisible in favor of simpler conditionals in the template |
| 18 | +space. |
| 19 | + |
| 20 | +In addition, when `isVisible` is used today it often introduces subtle (and |
| 21 | +difficult to track down) bugs due to its interaction with the `style` |
| 22 | +attribute (toggling `isVisible` clobbers any existing content in `style`). |
| 23 | + |
| 24 | +Simply put, removing `isVisible` will reduce confusion amongst users. |
| 25 | + |
| 26 | +# Transition Path |
| 27 | + |
| 28 | +Whenever `isVisible` is used a deprecation will be issued with a link to |
| 29 | +the deprecation guide explaining the deprecation and how to refactor in order |
| 30 | +to avoid it. |
| 31 | + |
| 32 | +Given that `Component#isVisible` is a public API, deprecating now would |
| 33 | +schedule for removal in the next major version release (4.0). |
| 34 | + |
| 35 | +There are several options available to hiding elements |
| 36 | +such as `<div hidden={{boolean}}></div>`(hidden is valid for all elements |
| 37 | +and is semantically correct) or wrapping the component in a template |
| 38 | +conditional `{{#if}}` statement. Components `classNames` and `classNameBindings` |
| 39 | +could also be used to add hidden classes. |
| 40 | + |
| 41 | +# How We Teach This |
| 42 | + |
| 43 | +The `isVisible` property is rarely used, the deprecation along with a mention |
| 44 | +in a future blog post would be sufficient. |
| 45 | + |
| 46 | +We should consider adding documentation on hiding components to the Ember |
| 47 | +guides with the conditional handlebar helper or via the widely supported `hidden` |
| 48 | +attribute. |
| 49 | + |
| 50 | +```hbs |
| 51 | +{{#if showComponent}} |
| 52 | + {{component}} |
| 53 | +{{/if}} |
| 54 | +
|
| 55 | +{{! or }} |
| 56 | +<div hidden={{isHidden}}></div> |
| 57 | +``` |
| 58 | + |
| 59 | +# Alternatives |
| 60 | + |
| 61 | +An alternative option would be to to keep `isVisible`. |
0 commit comments