feat(pagination): sync with @carbon/react v11 (#10420)

* feat(pagination): syncing pagination

---------

Co-authored-by: kennylam <[email protected]>

web-components/packages/carbon-web-components/src/components/button/button.scss

@@ -12,6 +12,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/components/popover/index';
 @use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/theme' as *;
 
 :host(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
@@ -21,6 +22,30 @@ $css--plex: true !default;
     width: rem(20px);
     height: rem(20px);
   }
+
+  &[pagination] {
+    .#{$prefix}--btn {
+      border: none;
+      border-left: 1px solid $border-subtle;
+      transition: none;
+
+      &:focus {
+        outline: 2px solid $focus;
+        outline-offset: -2px;
+        box-shadow: none;
+        border-left: 1px solid transparent;
+      }
+    }
+
+    &:not([disabled]) {
+      .#{$prefix}--btn {
+        color: $icon-primary;
+        &:active {
+          background-color: $layer-hover;
+        }
+      }
+    }
+  }
 }
 
 :host(#{$prefix}-button[kind='ghost']:hover) .#{$prefix}--btn--ghost,

web-components/packages/carbon-web-components/src/components/button/button.ts

@@ -76,7 +76,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @HostListener('mouseover')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleOver = () => {
-    this.openTooltip = !this.openTooltip;
+    this.openTooltip = true;
   };
 
   /**
@@ -85,7 +85,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @HostListener('mouseout')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleHoverOut = async () => {
-    this.openTooltip = !this.openTooltip;
+    this.openTooltip = false;
   };
 
   /**
@@ -95,7 +95,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @HostListener('focus')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleFocus = async (event) => {
-    this._handleOver();
+    this.openTooltip = true;
   };
 
   /**
@@ -105,7 +105,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @HostListener('focusout')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleFocusout = async (event) => {
-    this._handleOver();
+    this.openTooltip = false;
   };
 
   /**
@@ -114,6 +114,12 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ type: Boolean, reflect: true })
   autofocus = false;
 
+  /**
+   * Specify an optional className to be added to your Button
+   */
+  @property({ reflect: true, attribute: 'class-name' })
+  className;
+
   /**
    * Specify the message read by screen readers for the danger button variant
    */
@@ -229,6 +235,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   render() {
     const {
       autofocus,
+      className,
       dangerDescriptor,
       disabled,
       download,
@@ -251,7 +258,8 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
       _hasMainContent: hasMainContent,
       _handleSlotChange: handleSlotChange,
     } = this;
-    const classes = classMap({
+
+    let defaultClasses = {
       [`${prefix}--btn`]: true,
       [`${prefix}--btn--${kind}`]: kind,
       [`${prefix}--btn--disabled`]: disabled,
@@ -260,7 +268,16 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
       [`${prefix}-ce--btn--has-icon`]: hasIcon,
       [`${prefix}--btn--expressive`]: isExpressive,
       [`${prefix}--btn--selected`]: isSelected && kind === 'ghost',
-    });
+    };
+
+    if (className) {
+      const outputObject = {};
+      className?.split(' ').forEach((element) => {
+        outputObject[element] = true;
+      });
+      defaultClasses = outputObject;
+    }
+    const classes = classMap(defaultClasses);
 
     const isDanger = kind.includes('danger');
 
@@ -308,7 +325,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
       [`${prefix}--popover--${tooltipPosition}${alignmentClass}`]: tooltipText,
     });
 
-    return tooltipText
+    return tooltipText && !disabled
       ? html`
           <span class="${tooltipClasses}">
             <button

web-components/packages/carbon-web-components/src/components/data-table/data-table-story.ts

@@ -28,8 +28,6 @@ import '../overflow-menu/overflow-menu';
 import '../overflow-menu/overflow-menu-body';
 import '../overflow-menu/overflow-menu-item';
 import '../pagination/pagination';
-import '../pagination/page-sizes-select';
-import '../pagination/pages-select';
 import { TABLE_COLOR_SCHEME, TABLE_SIZE } from './table';
 import './table-head';
 import './table-header-row';

web-components/packages/carbon-web-components/src/components/pagination/defs.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Pagination size.
+ */
+export enum PAGINATION_SIZE {
+  /**
+   * Small size.
+   */
+  SMALL = 'sm',
+
+  /**
+   * Medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+}

web-components/packages/carbon-web-components/src/components/pagination/index.ts

@@ -1,12 +1,10 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import './page-sizes-select';
-import './pages-select';
 import './pagination';