Bug 1805491 - add statuses to existing components r=tgiles,mstriemer

Let me know if you think some of these components should have different statuses.

I'm also not demonstrating our ability to override the default status descriptions, but we can do that if we want to.

Differential Revision: https://phabricator.services.mozilla.com/D175932

UltraBlame original commit: 2f83b33d3258908f362320825b02ba0c227056c9

Author: marco-c

browser/components/storybook/stories/button.stories.mjs

@@ -8,6 +8,7 @@ export default {
   title: "UI Widgets/Button",
   component: "button",
   parameters: {
+    status: "stable",
     fluent: `
 button-regular = Regular
 button-primary = Primary

browser/components/storybook/stories/message-bar.stories.mjs

@@ -25,6 +25,7 @@ export default {
     },
   },
   parameters: {
+    status: "stable",
     fluent: `
 message-bar-text = A very expressive and slightly whimsical message goes here.
 message-bar-button = Click me, please!

browser/components/storybook/stories/named-deck.stories.mjs

@@ -11,6 +11,7 @@ export default {
   title: "UI Widgets/Named Deck",
   component: "named-deck",
   parameters: {
+    status: "stable",
     fluent: `
 named-deck-tab-one = Tab 1
 named-deck-tab-two = Tab 2

browser/components/storybook/stories/panel-list.stories.mjs

@@ -10,6 +10,7 @@ export default {
   title: "UI Widgets/Panel Menu",
   component: "panel-list",
   parameters: {
+    status: "stable",
     actions: {
       handles: ["click"],
     },

toolkit/content/widgets/moz-button-group/moz-button-group.stories.mjs

@@ -19,6 +19,7 @@ export default {
     },
   },
   parameters: {
+    status: "stable",
     fluent: `
 moz-button-group-p = The button group is below. Card for emphasis.
 moz-button-group-ok = OK

toolkit/content/widgets/moz-label/README.stories.md

@@ -0,0 +1,20 @@
+# MozLabel
+
+`moz-label` is an extension of the built-in `HTMLLabelElement` that provides accesskey styling and formatting as well as some click handling logic.
+
+```html story
+<label is="moz-label" accesskey="c" for="check">
+    This is a label with an accesskey:
+</label>
+<input id="check" type="checkbox" defaultChecked />
+```
+
+Accesskey underlining is enabled by default on Windows and Linux. It is also enabled in Storybook on Mac for demonstrative purposes, but is usually controlled by the `ui.key.menuAccessKey` preference.
+
+## Component status
+
+At this time `moz-label` may not be suitable for general use in Firefox.
+
+`moz-label` is currently only used in the `moz-toggle` custom element. There are no instances in Firefox where we set an accesskey on a toggle, so it is still largely untested in the wild.
+
+Additionally there is at least [one outstanding bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1819469) related to accesskey handling in the shadow DOM.

toolkit/content/widgets/moz-label/moz-label.stories.mjs

@@ -17,6 +17,17 @@ export default {
       control: { type: "select" },
     },
   },
+  parameters: {
+    status: {
+      type: "unstable",
+      links: [
+        {
+          title: "Learn more",
+          href: "?path=/docs/ui-widgets-label-readme--page#component-status",
+        },
+      ],
+    },
+  },
 };
 
 const Template = ({

toolkit/content/widgets/moz-support-link/moz-support-link.stories.mjs

@@ -27,6 +27,9 @@ export default {
     },
     onClick: { action: "clicked" },
   },
+  parameters: {
+    status: "stable",
+  },
 };
 
 const Template = ({

toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs

@@ -11,6 +11,7 @@ export default {
   title: "Toggle",
   component: "moz-toggle",
   parameters: {
+    status: "in-development",
     actions: {
       handles: ["toggle"],
     },