chore(core:button): support for deprecated button

- revert removal of cds-inline-button which is deprecated
in 6.0 for removal in 7.0
- update docs to reflect new component

Signed-off-by: Cory Rylan <splintercode.cb@gmail.com>

packages/core/src/alert/alert-group.stories.ts

@@ -569,15 +569,15 @@ export function lightweightAlertGroup() {
       </cds-alert>
       <cds-alert status="success">
         This example is an alert with a status of "success" and inline action buttons inside a lightweight alert group.
-        <cds-inline-button>Clickable Action</cds-inline-button>
+        <cds-button-inline>Clickable Action</cds-button-inline>
       </cds-alert>
       <cds-alert status="warning">
         This example is an alert with a status of "warning" and inline action buttons inside a lightweight alert group.
-        <cds-inline-button>Clickable Action</cds-inline-button>
+        <cds-button-inline>Clickable Action</cds-button-inline>
       </cds-alert>
       <cds-alert status="danger">
         This example is an alert with a status of "danger" and inline action buttons inside a lightweight alert group.
-        <cds-inline-button>Clickable Action</cds-inline-button>
+        <cds-button-inline>Clickable Action</cds-button-inline>
       </cds-alert>
       <cds-alert status="loading">
         This example is an alert with a status of "loading" inside a lightweight alert group.
@@ -663,7 +663,7 @@ export function compactAlertGroup() {
         </cds-alert>
         <cds-alert status="danger">
           This example is an alert with a status of "danger" and an inline action inside a compact, lightweight alert
-          group.<cds-inline-button>Clickable Action</cds-inline-button>
+          group.<cds-button-inline>Clickable Action</cds-button-inline>
         </cds-alert>
         <cds-alert status="loading">
           This example is an alert with a status of "loading" inside a compact, lightweight alert group.
@@ -679,9 +679,9 @@ export function compactAlertGroup() {
           syntheses vanquish the impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings two
           ghostly white figures in coveralls and helmets are soflty dancing something incredible is waiting to be known
           vanquish the impossible vastness is bearable only through love concept of the number one and billions upon
-          billions upon billions upon billions upon billions upon billions upon billions.<cds-inline-button
-            >Clickable Action 1</cds-inline-button
-          ><cds-inline-button>Clickable Action 2</cds-inline-button>
+          billions upon billions upon billions upon billions upon billions upon billions.<cds-button-inline
+            >Clickable Action 1</cds-button-inline
+          ><cds-button-inline>Clickable Action 2</cds-button-inline>
           <cds-alert-actions>
             <cds-button>Alert actions should not be viewable in lightweight alerts</cds-button>
           </cds-alert-actions>
@@ -704,11 +704,11 @@ export function darkTheme() {
         <cds-alert status="warning">
           This example is an alert with a status of "warning" and inline action buttons inside a lightweight alert
           group.
-          <cds-inline-button>Clickable Action</cds-inline-button>
+          <cds-button-inline>Clickable Action</cds-button-inline>
         </cds-alert>
         <cds-alert status="danger">
           This example is an alert with a status of "danger" and inline action buttons inside a lightweight alert group.
-          <cds-inline-button>Clickable Action</cds-inline-button>
+          <cds-button-inline>Clickable Action</cds-button-inline>
         </cds-alert>
         <cds-alert>
           This example is a multi-line alert with a status of "default" inside a lightweight alert group. A block of
@@ -841,7 +841,7 @@ export function customStyles() {
       </cds-alert>
       <cds-alert class="alert-custom" closable>
         This example is an alert with a status of "danger" and an inline action inside a compact, lightweight alert
-        group.<cds-inline-button class="alert-custom-link">Clickable Action</cds-inline-button>
+        group.<cds-button-inline class="alert-custom-link">Clickable Action</cds-button-inline>
       </cds-alert>
     </cds-alert-group>
   `;

packages/core/src/alert/alert.stories.ts

@@ -30,7 +30,7 @@ export default {
 export function API(args: any) {
   return html`
     <cds-alert ...="${spreadProps(getElementStorybookArgs(args))}">
-      ${args.default} <cds-inline-button @click=${() => console.log('alertActionClicked')}>Dismiss</cds-inline-button>
+      ${args.default} <cds-button-inline @click=${() => console.log('alertActionClicked')}>Dismiss</cds-button-inline>
     </cds-alert>
   `;
 }
@@ -64,8 +64,8 @@ export function lightAlerts() {
   return html`
     <div cds-layout="vertical gap:xxs">
       <cds-alert>
-        <em>Single line alert:</em> This alert example has only a single line of text.<cds-inline-button
-          >Use Inline Buttons in Lightweight Alerts</cds-inline-button
+        <em>Single line alert:</em> This alert example has only a single line of text.<cds-button-inline
+          >Use Inline Buttons in Lightweight Alerts</cds-button-inline
         >
       </cds-alert>
       <cds-alert>
@@ -109,9 +109,9 @@ export function compact() {
   return html`
     <cds-alert-group type="light" size="sm">
       <cds-alert status="info">
-        This compact alert example has only a single line of text.<cds-inline-button
+        This compact alert example has only a single line of text.<cds-button-inline
           >Use Inline Buttons in Lightweight Alerts<cds-icon direction="right" shape="angle"></cds-icon
-        ></cds-inline-button>
+        ></cds-button-inline>
       </cds-alert>
       <cds-alert status="success">This is a compact alert with a status of "success"</cds-alert>
       <cds-alert status="warning">This is a compact alert with a status of "warning"</cds-alert>
@@ -134,11 +134,11 @@ export function darkTheme() {
         <cds-alert status="warning">
           This example is an alert with a status of "warning" and inline action buttons inside a lightweight alert
           group.
-          <cds-inline-button>Clickable Action</cds-inline-button>
+          <cds-button-inline>Clickable Action</cds-button-inline>
         </cds-alert>
         <cds-alert status="danger">
           This example is an alert with a status of "danger" and inline action buttons inside a lightweight alert group.
-          <cds-inline-button>Clickable Action</cds-inline-button>
+          <cds-button-inline>Clickable Action</cds-button-inline>
         </cds-alert>
         <cds-alert>
           This example is a multi-line alert with a status of "default" inside a lightweight alert group. A block of
@@ -164,7 +164,7 @@ export function customStyles() {
     </style>
     <cds-alert class="alert-branding"
       ><cds-icon shape="user" solid></cds-icon>A custom alert.
-      <cds-inline-button>Example Action</cds-inline-button></cds-alert
+      <cds-button-inline>Example Action</cds-button-inline></cds-alert
     >
   `;
 }

packages/core/src/alert/ligntweight-alerts.stories.mdx

@@ -13,7 +13,7 @@ attribute set on them so that screen-readers will announce content changes
 within the container.
 
 Making a lightweight alert dismissible or "closable" will require the use of a
-`cds-inline-button` and an action on the product side that determines whether or
+`cds-button-inline` and an action on the product side that determines whether or
 not the alert should be removed from view.
 
 ## Installation

packages/core/src/button-inline/button-inline.element.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -49,3 +49,9 @@ export class CdsButtonInline extends CdsBaseButton {
     return [baseStyles, styles];
   }
 }
+
+/**
+ * @deprecated
+ * renamed to `cds-button-inline` in 6.0 to align to rest of the `cds-button-*` APIs
+ */
+export class CdsInlineButton extends CdsButtonInline {}

packages/core/src/button-inline/button-inline.stories.mdx

@@ -57,4 +57,4 @@ import '@cds/core/button-inline/register.js';
 
 ## API
 
-<Props of={'cds-inline-button'} />
+<Props of={'cds-button-inline'} />

packages/core/src/button-inline/register.ts

@@ -1,11 +1,11 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
 import { registerElementSafely } from '@cds/core/internal';
-import { CdsButtonInline } from './button-inline.element.js';
+import { CdsButtonInline, CdsInlineButton } from './button-inline.element.js';
 
 registerElementSafely('cds-button-inline', CdsButtonInline);
 
@@ -14,3 +14,12 @@ declare global {
     'cds-button-inline': CdsButtonInline;
   }
 }
+
+/** @deprecated */
+registerElementSafely('cds-inline-button', CdsInlineButton);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cds-inline-button': CdsInlineButton;
+  }
+}

packages/react/src/button/index.tsx

@@ -1,10 +1,17 @@
 import { CdsButton as Button, CdsIconButton as IconButton } from '@cds/core/button';
 import '@cds/core/button/register';
+import { CdsButtonInline as InlineButton } from '@cds/core/button-inline';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 import { logReactVersion } from '../utils/index';
 
 export const CdsButton = createComponent(React, 'cds-button', Button, {}, 'CdsButton');
 export const CdsIconButton = createComponent(React, 'cds-icon-button', IconButton, {}, 'CdsIconButton');
 
+/**
+ * @deprecated
+ * renamed to `cds-button-inline` in 6.0 to align to rest of the `cds-button-*` APIs
+ */
+export const CdsInlineButton = createComponent(React, 'cds-inline-button', InlineButton, {}, 'CdsInlineButton');
+
 logReactVersion(React);