refactor!: Remove deprecated properties and slots from components (#971)

BREAKING CHANGE: - Removed deprecated 'text-*' properties from action-bar, action-pad, block, block-section, filter, flow-item, panel, tip-manager, and tip. - Removed deprecated 'layout' property from action-bar, action-pad, and shell-panel. - Removed deprecated 'compact' property from pick-list-item, pick-list, value-list, and value-list-item. - Removed deprecated `tip-manager` slot from shell.
Esri · May 11, 2020 · a37633a · a37633a
1 parent fe43c8a
commit a37633a
Show file tree

Hide file tree

Showing 30 changed files with 324 additions and 634 deletions.
diff --git a/src/components/calcite-action-bar/calcite-action-bar.tsx b/src/components/calcite-action-bar/calcite-action-bar.tsx
@@ -9,10 +9,10 @@ import {
   h,
   VNode
 } from "@stencil/core";
-import { CalciteLayout, CalcitePosition, CalciteTheme } from "../interfaces";
+import { CalcitePosition, CalciteTheme } from "../interfaces";
 import { CalciteExpandToggle, toggleChildActionText } from "../utils/CalciteExpandToggle";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { getCalcitePosition, getSlotted } from "../utils/dom";
+import { getSlotted } from "../utils/dom";
 
 /**
  * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.
@@ -60,36 +60,16 @@ export class CalciteActionBar {
    */
   @Prop() tooltipExpand?: HTMLCalciteTooltipElement;
 
-  /**
-   * Updates the label of the expand icon when the component is not expanded.
-   * @deprecated use "intlExpand" instead.
-   */
-  @Prop() textExpand?: string;
-
   /**
    * Updates the label of the expand icon when the component is not expanded.
    */
   @Prop() intlExpand?: string;
 
-  /**
-   * Updates the label of the collapse icon when the component is expanded.
-   * @deprecated use "intlCollapse" instead.
-   */
-  @Prop() textCollapse?: string;
-
   /**
    * Updates the label of the collapse icon when the component is expanded.
    */
   @Prop() intlCollapse?: string;
 
-  /**
-   * Arrangement of the component. Leading and trailing are different depending on if the direction is LTR or RTL. For example, "leading"
-   * in a LTR app will appear on the left.
-   *
-   * @deprecated use "position" instead.
-   */
-  @Prop({ reflect: true }) layout: CalciteLayout;
-
   /**
    * Arranges the component depending on the elements 'dir' property.
    */
@@ -155,25 +135,22 @@ export class CalciteActionBar {
       expand,
       intlExpand,
       intlCollapse,
-      textExpand,
-      textCollapse,
       el,
-      layout,
       position,
       toggleExpand,
       tooltipExpand
     } = this;
 
-    const expandLabel = intlExpand || textExpand || TEXT.expand;
-    const collapseLabel = intlCollapse || textCollapse || TEXT.collapse;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
 
     const expandToggleNode = expand ? (
       <CalciteExpandToggle
         expanded={expanded}
         intlExpand={expandLabel}
         intlCollapse={collapseLabel}
         el={el}
-        position={getCalcitePosition(position, layout)}
+        position={position}
         toggleExpand={toggleExpand}
         tooltipExpand={tooltipExpand}
       />

diff --git a/src/components/calcite-action-pad/calcite-action-pad.tsx b/src/components/calcite-action-pad/calcite-action-pad.tsx
@@ -9,10 +9,9 @@ import {
   h,
   VNode
 } from "@stencil/core";
-import { CalciteLayout, CalcitePosition, CalciteTheme } from "../interfaces";
+import { CalcitePosition, CalciteTheme } from "../interfaces";
 import { CalciteExpandToggle, toggleChildActionText } from "../utils/CalciteExpandToggle";
 import { CSS, TEXT } from "./resources";
-import { getCalcitePosition } from "../utils/dom";
 
 /**
  * @slot - A slot for adding `calcite-action`s to the action pad.
@@ -59,35 +58,16 @@ export class CalciteActionPad {
    */
   @Prop() tooltipExpand?: HTMLCalciteTooltipElement;
 
-  /**
-   * Updates the label of the expand icon when the component is not expanded.
-   * @deprecated use "intlExpand" instead.
-   */
-  @Prop() textExpand?: string;
-
   /**
    * Updates the label of the expand icon when the component is not expanded.
    */
   @Prop() intlExpand?: string;
 
-  /**
-   * Updates the label of the collapse icon when the component is expanded.
-   * @deprecated use "intlCollapse" instead.
-   */
-  @Prop() textCollapse?: string;
-
   /**
    * Updates the label of the collapse icon when the component is expanded.
    */
   @Prop() intlCollapse?: string;
 
-  /**
-   * Arrangement of the component.
-   *
-   * @deprecated use "position" instead.
-   */
-  @Prop({ reflect: true }) layout: CalciteLayout;
-
   /**
    * Arranges the component depending on the elements 'dir' property.
    */
@@ -153,25 +133,22 @@ export class CalciteActionPad {
       expand,
       intlExpand,
       intlCollapse,
-      textExpand,
-      textCollapse,
       el,
-      layout,
       position,
       toggleExpand,
       tooltipExpand
     } = this;
 
-    const expandLabel = intlExpand || textExpand || TEXT.expand;
-    const collapseLabel = intlCollapse || textCollapse || TEXT.collapse;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
 
     const expandToggleNode = expand ? (
       <CalciteExpandToggle
         expanded={expanded}
         intlExpand={expandLabel}
         intlCollapse={collapseLabel}
         el={el}
-        position={getCalcitePosition(position, layout)}
+        position={position}
         toggleExpand={toggleExpand}
         tooltipExpand={tooltipExpand}
       />

diff --git a/src/components/calcite-block-section/calcite-block-section.tsx b/src/components/calcite-block-section/calcite-block-section.tsx
@@ -41,20 +41,6 @@ export class CalciteBlockSection {
    */
   @Prop() text: string;
 
-  /**
-   * Tooltip used for the toggle when expanded.
-   *
-   * @deprecated use "intlCollapse" instead.
-   */
-  @Prop() textCollapse?: string;
-
-  /**
-   * Tooltip used for the toggle when collapsed.
-   *
-   * @deprecated use "intlExpand" instead.
-   */
-  @Prop() textExpand?: string;
-
   /**
    * This property determines the look of the section toggle.
    * If the value is "switch", a toggle-switch will be displayed.
@@ -111,27 +97,15 @@ export class CalciteBlockSection {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const {
-      el,
-      guid: id,
-      intlCollapse,
-      intlExpand,
-      open,
-      text,
-      textCollapse,
-      textExpand,
-      toggleDisplay
-    } = this;
+    const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
     const dir = getElementDir(el);
     const arrowIcon = open
       ? ICONS.menuOpen
       : dir === "rtl"
       ? ICONS.menuClosedLeft
       : ICONS.menuClosedRight;
 
-    const toggleLabel = open
-      ? intlCollapse || textCollapse || TEXT.collapse
-      : intlExpand || textExpand || TEXT.expand;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
     const labelId = `${id}__label`;
 
     const headerNode =

diff --git a/src/components/calcite-block/calcite-block.tsx b/src/components/calcite-block/calcite-block.tsx
@@ -67,20 +67,6 @@ export class CalciteBlock {
    */
   @Prop() summary: string;
 
-  /**
-   * Tooltip used for the toggle when expanded.
-   *
-   * @deprecated use "intlCollapse" instead.
-   */
-  @Prop() textCollapse?: string;
-
-  /**
-   * Tooltip used for the toggle when collapsed.
-   *
-   * @deprecated use "intlExpand" instead.
-   */
-  @Prop() textExpand?: string;
-
   /**
    * Used to set the component's color scheme.
    */
@@ -132,14 +118,10 @@ export class CalciteBlock {
       intlExpand,
       loading,
       open,
-      summary,
-      textCollapse,
-      textExpand
+      summary
     } = this;
 
-    const toggleLabel = open
-      ? intlCollapse || textCollapse || TEXT.collapse
-      : intlExpand || textExpand || TEXT.expand;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
 
     const hasIcon = getSlotted(el, SLOTS.icon);
     const headerContent = (

diff --git a/src/components/calcite-filter/calcite-filter.tsx b/src/components/calcite-filter/calcite-filter.tsx
@@ -49,20 +49,6 @@ export class CalciteFilter {
    */
   @Prop() placeholder?: string;
 
-  /**
-   * A text label that will appear next to the input field.
-   *
-   * @deprecated use "intlLabel" instead.
-   */
-  @Prop() textLabel?: string;
-
-  /**
-   * Placeholder text for the input element's placeholder attribute
-   *
-   * @deprecated use "placeholder" instead.
-   */
-  @Prop() textPlaceholder?: string;
-
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -150,9 +136,9 @@ export class CalciteFilter {
           <input
             type="text"
             value=""
-            placeholder={this.placeholder || this.textPlaceholder}
+            placeholder={this.placeholder}
             onInput={this.inputHandler}
-            aria-label={this.intlLabel || this.textLabel || TEXT.filterLabel}
+            aria-label={this.intlLabel || TEXT.filterLabel}
             ref={(el): void => {
               this.textInput = el;
             }}

diff --git a/src/components/calcite-flow-item/calcite-flow-item.tsx b/src/components/calcite-flow-item/calcite-flow-item.tsx
@@ -71,34 +71,16 @@ export class CalciteFlowItem {
    */
   @Prop() intlBack?: string;
 
-  /**
-   * 'Back' text string.
-   * @deprecated use "intlBack" instead.
-   */
-  @Prop() textBack?: string;
-
   /**
    * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
    */
   @Prop() intlClose?: string;
 
-  /**
-   * 'Close' text string for the menu.
-   * @deprecated use "intlClose" instead.
-   */
-  @Prop() textClose?: string;
-
   /**
    * 'Open' text string for the menu.
    */
   @Prop() intlOpen?: string;
 
-  /**
-   * 'Open' text string for the menu.
-   * @deprecated use "intlOpen" instead.
-   */
-  @Prop() textOpen?: string;
-
   /**
    * Used to set the component's color scheme.
    */
@@ -237,8 +219,8 @@ export class CalciteFlowItem {
   // --------------------------------------------------------------------------
 
   renderBackButton(rtl: boolean): VNode {
-    const { showBackButton, intlBack, textBack, backButtonClick } = this;
-    const label = intlBack || textBack || TEXT.back;
+    const { showBackButton, intlBack, backButtonClick } = this;
+    const label = intlBack || TEXT.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
 
     return showBackButton ? (
@@ -255,9 +237,9 @@ export class CalciteFlowItem {
   }
 
   renderMenuButton(): VNode {
-    const { menuOpen, textOpen, intlOpen, intlClose, textClose } = this;
-    const closeLabel = intlClose || textClose || TEXT.close;
-    const openLabel = intlOpen || textOpen || TEXT.open;
+    const { menuOpen, intlOpen, intlClose } = this;
+    const closeLabel = intlClose || TEXT.close;
+    const openLabel = intlOpen || TEXT.open;
 
     const menuLabel = menuOpen ? closeLabel : openLabel;
 

diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
@@ -73,12 +73,6 @@ export class CalcitePanel {
    */
   @Prop() intlClose?: string;
 
-  /**
-   * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
-   * @deprecated use "intlClose" instead.
-   */
-  @Prop() textClose?: string;
-
   /**
    * Used to set the component's color scheme.
    */
@@ -174,8 +168,8 @@ export class CalcitePanel {
   }
 
   renderHeaderTrailingContent(): VNode {
-    const { dismiss, dismissible, intlClose, textClose } = this;
-    const text = intlClose || textClose || TEXT.close;
+    const { dismiss, dismissible, intlClose } = this;
+    const text = intlClose || TEXT.close;
 
     const dismissibleNode = dismissible ? (
       <calcite-action