Merge pull request #1104 from kaliber5/warn-extend

Remove support for subclassing component classes

addon/components/bs-accordion.js

@@ -4,6 +4,7 @@ import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-accordion';
 import listenTo from 'ember-bootstrap/utils/cp/listen-to';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
   Bootstrap-style [accordion group](http://getbootstrap.com/javascript/#collapse-example-accordion),
@@ -31,12 +32,15 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
 
   In the example above the first accordion item utilizes the yielded `change` action to add some custom behaviour.
 
+  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
+
   @class Accordion
   @namespace Components
   @extends Ember.Component
   @public
 */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class Accordion extends Component {
   /**

addon/components/bs-accordion/item.js

@@ -7,6 +7,7 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import typeClass from 'ember-bootstrap/utils/cp/type-class';
 import { macroCondition, getOwnConfig } from '@embroider/macros';
 import { guidFor } from '@ember/object/internals';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
  A collapsible/expandable item within an accordion
@@ -19,6 +20,7 @@ import { guidFor } from '@ember/object/internals';
  @public
  */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class AccordionItem extends Component {
   /**

addon/components/bs-accordion/item/body.js

@@ -1,6 +1,7 @@
 import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-accordion/item/body';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
  Component for an accordion item body.
@@ -14,6 +15,7 @@ import layout from 'ember-bootstrap/templates/components/bs-accordion/item/body'
  */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class AccordionItemBody extends Component {
   /**
    * @property collapsed

addon/components/bs-accordion/item/title.js

@@ -2,6 +2,7 @@ import { action } from '@ember/object';
 import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-accordion/item/title';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
  Component for an accordion item title.
@@ -14,6 +15,7 @@ import layout from 'ember-bootstrap/templates/components/bs-accordion/item/title
  @public
  */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class AccordionItemTitle extends Component {
   /**

addon/components/bs-alert.js

@@ -9,6 +9,7 @@ import typeClass from 'ember-bootstrap/utils/cp/type-class';
 import listenTo from 'ember-bootstrap/utils/cp/listen-to';
 import usesTransition from 'ember-bootstrap/utils/cp/uses-transition';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
   Implements [Bootstrap alerts](http://getbootstrap.com/components/#alerts)
@@ -24,12 +25,15 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
   </BsAlert>
   ```
 
+  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
+
   @class Alert
   @namespace Components
   @extends Ember.Component
   @public
 */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class Alert extends Component {
   /**

addon/components/bs-button-group.js

@@ -6,6 +6,7 @@ import { A, isArray } from '@ember/array';
 import layout from 'ember-bootstrap/templates/components/bs-button-group';
 import sizeClass from 'ember-bootstrap/utils/cp/size-class';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
   Bootstrap-style button group, that visually groups buttons, and optionally adds radio/checkbox like behaviour.
@@ -58,12 +59,15 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
   </ul>
   ```
 
+  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
+
   @class ButtonGroup
   @namespace Components
   @extends Ember.Component
   @public
 */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class ButtonGroup extends Component {
   ariaRole = 'group';

addon/components/bs-button-group/button.js

@@ -12,6 +12,8 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
  @private
  */
 export default class ButtonGroupButton extends Button {
+  '__ember-bootstrap_subclass' = true;
+
   /**
    * @property groupValue
    * @private

addon/components/bs-button.js

@@ -12,6 +12,7 @@ import typeClass from 'ember-bootstrap/utils/cp/type-class';
 import overrideableCP from 'ember-bootstrap/utils/cp/overrideable';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import { macroCondition, getOwnConfig } from '@embroider/macros';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
   Implements a HTML button element, with support for all [Bootstrap button CSS styles](http://getbootstrap.com/css/#buttons)
@@ -98,13 +99,16 @@ import { macroCondition, getOwnConfig } from '@embroider/macros';
   You can `reset` the state represented by these properties and used for button's text by setting `reset` property to
   `true`.
 
+  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
+
   @class Button
   @namespace Components
   @extends Ember.Component
   @public
 */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class Button extends Component {
   /**
    * Default label of the button. Not need if used as a block component

addon/components/bs-carousel.js

@@ -11,6 +11,7 @@ import { task, timeout } from 'ember-concurrency';
 import RSVP from 'rsvp';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import { equal } from '@ember/object/computed';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
   Ember implementation of Bootstrap's Carousel. Supports all original features but API is partially different:
@@ -55,12 +56,15 @@ import { equal } from '@ember/object/computed';
   | Wrap | wrap slides, cycles without stopping at first or last slide. |
   ```
 
+  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
+
   @class Carousel
   @namespace Components
   @extends Ember.Component
   @public
 */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class Carousel extends Component.extend(ComponentParent) {
   tabindex = '1';

addon/components/bs-carousel/slide.js

@@ -6,6 +6,7 @@ import layout from 'ember-bootstrap/templates/components/bs-carousel/slide';
 import { next } from '@ember/runloop';
 import overrideableCP from 'ember-bootstrap/utils/cp/overrideable';
 import { addObserver } from '@ember/object/observers';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
   A visible user-defined slide.
@@ -18,6 +19,7 @@ import { addObserver } from '@ember/object/observers';
   @public
  */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class CarouselSlide extends Component.extend(ComponentChild) {
   /**

addon/components/bs-collapse.js

@@ -10,6 +10,7 @@ import transitionEnd from 'ember-bootstrap/utils/transition-end';
 import { assert } from '@ember/debug';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import { computed } from '@ember/object';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
   An Ember component that mimics the behaviour of [Bootstrap's collapse.js plugin](http://getbootstrap.com/javascript/#collapse)
@@ -25,12 +26,15 @@ import { computed } from '@ember/object';
   </BsCollapse>
   ```
 
+  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
+
   @class Collapse
   @namespace Components
   @extends Ember.Component
   @public
 */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class Collapse extends Component {
   /**

addon/components/bs-dropdown.js

@@ -4,6 +4,7 @@ import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-dropdown';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import { assert } from '@ember/debug';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 const ESCAPE_KEYCODE = 27; // KeyboardEvent.which value for Escape (Esc) key
 const SPACE_KEYCODE = 32; // KeyboardEvent.which value for space key
@@ -164,12 +165,15 @@ const SUPPORTED_KEYCODES = [ESCAPE_KEYCODE, ARROW_DOWN_KEYCODE, ARROW_UP_KEYCODE
   version does. This also allows you to set `renderInPlace=false` on the menu component to render it in a wormhole,
   which you might want to do if you experience clipping issues by an outer `overflow: hidden` element.
 
+  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
+
   @class Dropdown
   @namespace Components
   @extends Ember.Component
   @public
 s*/
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class Dropdown extends Component {
   /**

addon/components/bs-dropdown/button.js

@@ -15,6 +15,8 @@ import { computed, action } from '@ember/object';
  */
 @templateLayout(layout)
 export default class DropdownButton extends Button {
+  '__ember-bootstrap_subclass' = true;
+
   @action
   handleKeyDown(e) {
     this.onKeyDown(e);

addon/components/bs-dropdown/menu.js

@@ -5,6 +5,7 @@ import layout from 'ember-bootstrap/templates/components/bs-dropdown/menu';
 import { next } from '@ember/runloop';
 import { getDestinationElement } from 'ember-bootstrap/utils/dom';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
  Component for the dropdown menu.
@@ -18,6 +19,7 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
  */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class DropdownMenu extends Component {
   /**
    * @property ariaRole

addon/components/bs-dropdown/menu/divider.js

@@ -1,6 +1,7 @@
 import Component from '@ember/component';
 import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import layout from 'ember-bootstrap/templates/components/bs-dropdown/menu/divider';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
  Component for a dropdown menu divider.
@@ -14,4 +15,5 @@ import layout from 'ember-bootstrap/templates/components/bs-dropdown/menu/divide
  */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class DropdownMenuDivider extends Component {}

addon/components/bs-dropdown/menu/item.js

@@ -1,6 +1,7 @@
 import Component from '@ember/component';
 import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import layout from 'ember-bootstrap/templates/components/bs-dropdown/menu/item';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
  Component for a dropdown menu item.
@@ -14,4 +15,5 @@ import layout from 'ember-bootstrap/templates/components/bs-dropdown/menu/item';
  */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class DropdownMenuItem extends Component {}

addon/components/bs-dropdown/toggle.js

@@ -4,6 +4,7 @@ import { layout as templateLayout } from '@ember-decorators/component';
 import layout from 'ember-bootstrap/templates/components/bs-dropdown/toggle';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import { computed, action } from '@ember/object';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
  Anchor element that triggers the parent dropdown to open.
@@ -17,6 +18,7 @@ import { computed, action } from '@ember/object';
  @publicø
  */
 @tagName('')
+@deprecateSubclassing
 @templateLayout(layout)
 export default class DropdownToggle extends Component {
   /**

addon/components/bs-form.js

@@ -10,6 +10,7 @@ import RSVP from 'rsvp';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import { macroCondition, getOwnConfig } from '@embroider/macros';
 import { DEBUG } from '@glimmer/env';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
   Render a form with the appropriate Bootstrap layout class (see `formLayout`).
@@ -104,13 +105,16 @@ import { DEBUG } from '@glimmer/env';
   </BsForm>
   ```
 
+  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
+
   @class Form
   @namespace Components
   @extends Ember.Component
   @public
 */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class Form extends Component {
   /**
    * Bootstrap form class name (computed)

addon/components/bs-form/element/control/checkbox.js

@@ -2,6 +2,7 @@ import { action } from '@ember/object';
 import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import layout from 'ember-bootstrap/templates/components/bs-form/element/control/checkbox';
 import Control from '../control';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
 
@@ -12,6 +13,7 @@ import Control from '../control';
  */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class FormElementControlCheckbox extends Control {
   @action
   handleClick(event) {

addon/components/bs-form/element/control/input.js

@@ -5,6 +5,7 @@ import Control from '../control';
 import { isEmpty } from '@ember/utils';
 import sizeClass from 'ember-bootstrap/utils/cp/size-class';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 const allowedTypes = new Map();
 function canUseType(type) {
@@ -36,6 +37,7 @@ function canUseType(type) {
  */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class FormElementControlInput extends Control {
   /**
    * @property type

addon/components/bs-form/element/control/radio.js

@@ -2,6 +2,7 @@ import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Control from '../control';
 import layout from 'ember-bootstrap/templates/components/bs-form/element/control/radio';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
 
@@ -12,6 +13,7 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
  */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class FormElementControlRadio extends Control {
   /**
    * @property inline

addon/components/bs-form/element/control/textarea.js

@@ -2,6 +2,7 @@ import { action } from '@ember/object';
 import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import layout from 'ember-bootstrap/templates/components/bs-form/element/control/textarea';
 import Control from '../control';
+import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 
 /**
 
@@ -12,6 +13,7 @@ import Control from '../control';
  */
 @templateLayout(layout)
 @tagName('')
+@deprecateSubclassing
 export default class FormElementControlTextarea extends Control {
   @action
   handleChange(event) {