test(flow-item, panel): add tests for internal property.

packages/calcite-components/src/components/flow-item/flow-item.e2e.ts

@@ -27,8 +27,8 @@ describe("calcite-flow-item", () => {
         defaultValue: false,
       },
       {
-        propertyName: "collapseDirection",
-        defaultValue: "down",
+        propertyName: "collapseInverted",
+        defaultValue: false,
       },
       {
         propertyName: "collapsed",

packages/calcite-components/src/components/flow-item/flow-item.stories.ts

@@ -65,6 +65,14 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           return this;
         },
       },
+      {
+        name: "collapse-inverted",
+        commit(): Attribute {
+          this.value = boolean("collapseInverted", false);
+          delete this.build;
+          return this;
+        },
+      },
       {
         name: "height-scale",
         commit(): Attribute {
@@ -159,6 +167,10 @@ export const collapsed_TestOnly = (): string => html`
   <calcite-flow-item collapsed collapsible closable> Hello World! </calcite-flow-item>
 `;
 
+export const collapseInverted_TestOnly = (): string => html`
+  <calcite-flow-item collapsed collapsible collapse-inverted closable> Hello World! </calcite-flow-item>
+`;
+
 export const disabledWithStyledSlot_TestOnly = (): string => html`
   <calcite-flow-item style="height: 100%;" heading="Heading" disabled>
     <div id="content" style="height: 100%;">${contentHTML}</div>

packages/calcite-components/src/components/flow-item/flow-item.tsx

@@ -75,11 +75,10 @@ export class FlowItem
   @Prop({ reflect: true }) collapsed = false;
 
   /**
-   * Specifies the direction of the collapse.
+   * When `true`, inverts the collapse icon.
    *
-   * @internal
    */
-  @Prop() collapseDirection: "down" | "up" = "down";
+  @Prop() collapseInverted = false;
 
   /**
    * When `true`, the component is collapsible.
@@ -331,7 +330,7 @@ export class FlowItem
   render(): VNode {
     const {
       collapsed,
-      collapseDirection,
+      collapseInverted,
       collapsible,
       closable,
       closed,
@@ -348,7 +347,7 @@ export class FlowItem
         <calcite-panel
           closable={closable}
           closed={closed}
-          collapseDirection={collapseDirection}
+          collapseInverted={collapseInverted}
           collapsed={collapsed}
           collapsible={collapsible}
           description={description}

packages/calcite-components/src/components/panel/panel.e2e.ts

@@ -36,8 +36,8 @@ describe("calcite-panel", () => {
         defaultValue: false,
       },
       {
-        propertyName: "collapseDirection",
-        defaultValue: "down",
+        propertyName: "collapseInverted",
+        defaultValue: false,
       },
       {
         propertyName: "collapsed",

packages/calcite-components/src/components/panel/panel.stories.ts

@@ -65,6 +65,14 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           return this;
         },
       },
+      {
+        name: "collapse-inverted",
+        commit(): Attribute {
+          this.value = boolean("collapseInverted", false);
+          delete this.build;
+          return this;
+        },
+      },
       {
         name: "height-scale",
         commit(): Attribute {
@@ -222,6 +230,41 @@ export const collapsibleWithActions_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
+export const collapseInverted_TestOnly = (): string => html`
+  <calcite-panel
+    style="height: 100%;"
+    closable
+    collapsible
+    collapse-inverted
+    heading="Collapsible with actions"
+    description="A panel that can be collapsed"
+  >
+    <calcite-action text="information" text-enabled icon="information" slot="header-actions-start"></calcite-action>
+    <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+    ${footerHTML}
+  </calcite-panel>
+`;
+
+export const collapseInvertedCollapsed_TestOnly = (): string => html`
+  <calcite-panel
+    style="height: 100%;"
+    closable
+    collapsible
+    collapsed
+    collapse-inverted
+    heading="Collapsible with actions"
+    description="A panel that can be collapsed"
+  >
+    <calcite-action text="information" text-enabled icon="information" slot="header-actions-start"></calcite-action>
+    <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+    ${footerHTML}
+  </calcite-panel>
+`;
+
 export const collapsedWithActions_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"

packages/calcite-components/src/components/panel/panel.tsx

@@ -87,11 +87,10 @@ export class Panel
   @Prop({ reflect: true }) collapsed = false;
 
   /**
-   * Specifies the direction of the collapse.
+   * When `true`, inverts the collapse icon.
    *
-   * @internal
    */
-  @Prop() collapseDirection: "down" | "up" = "down";
+  @Prop() collapseInverted = false;
 
   /**
    * When `true`, the component is collapsible.
@@ -412,15 +411,15 @@ export class Panel
       messages,
       closable,
       collapsed,
-      collapseDirection,
+      collapseInverted,
       collapsible,
       hasMenuItems,
     } = this;
     const { collapse, expand, close } = messages;
 
     const icons = [ICONS.expand, ICONS.collapse];
 
-    if (collapseDirection === "up") {
+    if (collapseInverted) {
       icons.reverse();
     }