Update custom card feature example to use isSupported (#3102)

Author: piitaya

docs/frontend/custom-ui/custom-card-feature.md

@@ -17,7 +17,11 @@ import {
   css,
 } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module";
 
-const supportsButtonPressCardFeature = (stateObj) => {
+const supportsButtonPressCardFeature = (hass, context) => {
+  const stateObj = context.entity_id
+    ? hass.states[context.entity_id]
+    : undefined;
+  if (!stateObj) return false;
   const domain = stateObj.entity_id.split(".")[0];
   return domain === "button";
 };
@@ -27,7 +31,7 @@ class ButtonPressCardFeature extends LitElement {
     return {
       hass: undefined,
       config: undefined,
-      stateObj: undefined,
+      context: undefined,
     };
   }
 
@@ -45,19 +49,26 @@ class ButtonPressCardFeature extends LitElement {
     this.config = config;
   }
 
+  get _stateObj() {
+    if (!this.hass || !this.context?.entity_id) return undefined;
+    return this.hass.states[this.context.entity_id];
+  }
+
   _press(ev) {
     ev.stopPropagation();
+    const stateObj = this._stateObj;
+    if (!stateObj) return;
     this.hass.callService("button", "press", {
-      entity_id: this.stateObj.entity_id,
+      entity_id: stateObj.entity_id,
     });
   }
 
   render() {
     if (
       !this.config ||
       !this.hass ||
-      !this.stateObj ||
-      !supportsButtonPressCardFeature(this.stateObj)
+      !this.context ||
+      !supportsButtonPressCardFeature(this.hass, this.context)
     ) {
       return null;
     }
@@ -97,11 +108,20 @@ window.customCardFeatures = window.customCardFeatures || [];
 window.customCardFeatures.push({
   type: "button-press-card-feature",
   name: "Button press",
-  supported: supportsButtonPressCardFeature, // Optional
+  isSupported: supportsButtonPressCardFeature, // Optional
   configurable: true, // Optional - defaults to false
 });
 ```
 
+## Context
+
+A card feature is rendered inside a card and receives the same context the card is bound to. This is passed both to the element as the `context` property and as the second argument of the `isSupported` function.
+
+The `context` object exposes:
+
+- `entity_id` _(optional)_: the entity id from the parent card.
+- `area_id` _(optional)_: the area id from the parent card.
+
 If you want your feature to better integrate with the default design of home assistant, you can use these CSS variables:
 
 - `--feature-height`: Recommended height (42px).
@@ -111,6 +131,6 @@ If you want your feature to better integrate with the default design of home ass
 The main difference with custom cards is the graphical configuration option.
 To have it displayed in the card editor, you must add an object describing it to the array `window.customCardFeatures`.
 
-Required properties of the object are `type` and `name`. It is recommended to define the `supported` option with a function, so the editor can only propose the feature if it is compatible with the selected entity in the card. Set `configurable` to `true` if your entity has additional configuration (e.g. `label` option in the example above) so the editor.
+Required properties of the object are `type` and `name`. It is recommended to define the `isSupported` option with a function `(hass, context) => boolean`, so the editor can only propose the feature if it is compatible with the selected entity in the card. Set `configurable` to `true` if your entity has additional configuration (e.g. `label` option in the example above).
 
 Also, the static functions `getConfigElement` and `getStubConfig` work the same as with normal custom cards.