feat(label): deprecate status prop

src/components/calcite-input-message/calcite-input-message.e2e.ts

@@ -37,8 +37,8 @@ describe("calcite-input-message", () => {
     </calcite-label>
     `);
 
-    const element = await page.find("calcite-input-message");
-    expect(element).toEqualAttribute("status", "invalid");
+    const deprecatedLabelStatusElement = await page.find("calcite-input-message");
+    expect(deprecatedLabelStatusElement).toEqualAttribute("status", "invalid");
   });
 
   it("does not render an icon if not requested", async () => {

src/components/calcite-input-message/readme.md

@@ -9,10 +9,10 @@ Displays a contextual message to a user. Allows the passing of content, links, e
 ### Basic
 
 ```html
-<calcite-label status="“invalid”">
+<calcite-label>
   My great label
-  <calcite-input placeholder="“Enter" your information”></calcite-input>
-  <calcite-input-message active
+  <calcite-input placeholder="“Enter" your information” status="invalid"></calcite-input>
+  <calcite-input-message active status="invalid"
     >That's not going to work out.
     <calcite-button appearance="inline" href="">Learn more</calcite-button></calcite-input-message
   >

src/components/calcite-input/calcite-input.e2e.ts

@@ -81,9 +81,9 @@ describe("calcite-input", () => {
       </calcite-label>
     `);
 
-    const element = await page.find("calcite-input");
-    expect(await element.getProperty("status")).toEqual("invalid");
-    expect(await element.getProperty("scale")).toEqual("s");
+    const deprecatedLabelStatusElement = await page.find("calcite-input");
+    expect(await deprecatedLabelStatusElement.getProperty("status")).toEqual("invalid");
+    expect(await deprecatedLabelStatusElement.getProperty("scale")).toEqual("s");
   });
 
   it("renders an icon when explicit Calcite UI is requested, and is a type without a default icon", async () => {

src/components/calcite-input/readme.md

@@ -42,10 +42,10 @@ function logChange() {
 Using a wrapping `calcite-label` component lets consumers set the status attribute once and have it propagate to child `calcite-input` and `calcite-input-message` elements
 
 ```html
-<calcite-label status="invalid" for="invalid-input">
+<calcite-label for="invalid-input">
   Invalid input
-  <calcite-input id="invalid-input" placeholder="Filter your files" value="adfo2h2"></calcite-input>
-  <calcite-input-message active icon> Something doesn't look right </calcite-input-message>
+  <calcite-input id="invalid-input" placeholder="Filter your files" status="invalid" value="adfo2h2"></calcite-input>
+  <calcite-input-message active icon status="invalid"> Something doesn't look right </calcite-input-message>
 </calcite-label>
 ```
 

src/components/calcite-label/calcite-label.e2e.ts

@@ -21,14 +21,13 @@ describe("calcite-label", () => {
   it("renders requested props when valid props are provided", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <calcite-label status="invalid" layout="inline-space-between">
+    <calcite-label layout="inline-space-between">
     Label text
     <calcite-input></calcite-input>
     </calcite-label>
     `);
 
     const element = await page.find("calcite-label");
-    expect(element).toEqualAttribute("status", "invalid");
     expect(element).toEqualAttribute("layout", "inline-space-between");
   });
 
@@ -128,7 +127,7 @@ describe("calcite-label", () => {
   it("does not pass id to child label element", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <calcite-label id="dont-duplicate-me" status="invalid" layout="inline-space-between">
+    <calcite-label id="dont-duplicate-me" layout="inline-space-between">
     Label text
     <calcite-input></calcite-input>
     </calcite-label>
@@ -138,7 +137,6 @@ describe("calcite-label", () => {
     const childElement = await page.find("calcite-label >>> .container");
     expect(element).toEqualAttribute("id", "dont-duplicate-me");
     expect(childElement).not.toHaveAttribute("id");
-    expect(element).toEqualAttribute("status", "invalid");
     expect(element).toEqualAttribute("layout", "inline-space-between");
   });
 

src/components/calcite-label/calcite-label.tsx

@@ -28,7 +28,10 @@ export class CalciteLabel {
   /** specify the text alignment of the label */
   @Prop({ reflect: true }) alignment: Alignment = "start";
 
-  /** specify the status of the label and any child input / input messages */
+  /**
+   * specify the status of the label and any child input / input messages
+   * @deprecated set directly on child element instead
+   */
   @Prop({ reflect: true }) status: Status = "idle";
 
   /** The id of the input associated with the label */

src/components/calcite-label/readme.md

@@ -8,13 +8,11 @@ Renders a `<label>` around its children and can be used with any [labelable nati
 
 ### Basic
 
-It also allows consumers to set a `status` attribute for child `calcite-input` and `calcite-input-message` components to use to set their own properties.
-
 ```html
-<calcite-label status="invalid">
+<calcite-label>
   Invalid input
-  <calcite-input type="search" placeholder="Filter your files" value="adfo2h2"></calcite-input>
-  <calcite-input-message active icon> Something doesn't look right </calcite-input-message>
+  <calcite-input type="search" placeholder="Filter your files" value="adfo2h2" status="invalid"></calcite-input>
+  <calcite-input-message active icon status="invalid"> Something doesn't look right </calcite-input-message>
 </calcite-label>
 ```