feat(pagination-nav): add tooltipPosition prop (#1733)

* Add `tooltipPosition` to `PaginationNav` per #1656 * Rebuild test * Update description in documentation Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com> * chore: update docs --------- Co-authored-by: Samuel Janda <hi@simpleprogramming.com.au> Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com> Co-authored-by: Enrico Sacchetti <enrico@theetrain.ca>
carbon-design-system · May 21, 2023 · 60a796e · 60a796e
1 parent edcb14b
commit 60a796e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 11 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -2696,14 +2696,15 @@ None.
 
 ### Props
 
-| Prop name    | Required | Kind             | Reactive | Type                 | Default value                | Description                               |
-| :----------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | ----------------------------------------- |
-| page         | No       | <code>let</code> | Yes      | <code>number</code>  | <code>1</code>               | Specify the current page index            |
-| total        | No       | <code>let</code> | No       | <code>number</code>  | <code>10</code>              | Specify the total number of pages         |
-| shown        | No       | <code>let</code> | No       | <code>number</code>  | <code>10</code>              | Specify the total number of pages to show |
-| loop         | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>           | Set to `true` to loop the navigation      |
-| forwardText  | No       | <code>let</code> | No       | <code>string</code>  | <code>"Next page"</code>     | Specify the forward button text           |
-| backwardText | No       | <code>let</code> | No       | <code>string</code>  | <code>"Previous page"</code> | Specify the backward button text          |
+| Prop name       | Required | Kind             | Reactive | Type                                                                                             | Default value                | Description                                                         |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
+| page            | No       | <code>let</code> | Yes      | <code>number</code>                                                                              | <code>1</code>               | Specify the current page index                                      |
+| total           | No       | <code>let</code> | No       | <code>number</code>                                                                              | <code>10</code>              | Specify the total number of pages                                   |
+| shown           | No       | <code>let</code> | No       | <code>number</code>                                                                              | <code>10</code>              | Specify the total number of pages to show                           |
+| loop            | No       | <code>let</code> | No       | <code>boolean</code>                                                                             | <code>false</code>           | Set to `true` to loop the navigation                                |
+| forwardText     | No       | <code>let</code> | No       | <code>string</code>                                                                              | <code>"Next page"</code>     | Specify the forward button text                                     |
+| backwardText    | No       | <code>let</code> | No       | <code>string</code>                                                                              | <code>"Previous page"</code> | Specify the backward button text                                    |
+| tooltipPosition | No       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left" &#124; "outside" &#124; "inside"</code> | <code>"bottom"</code>        | Set the position of the tooltip relative to the pagination buttons. |
 
 ### Slots
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -8520,6 +8520,18 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "tooltipPosition",
+          "kind": "let",
+          "description": "Set the position of the tooltip relative to the pagination buttons.",
+          "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"outside\" | \"inside\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],

diff --git a/docs/src/pages/components/PaginationNav.svx b/docs/src/pages/components/PaginationNav.svx
@@ -42,4 +42,10 @@ Use the `forwardText` and `backwardText` props to customize the button text.
 <PaginationNav
   forwardText="Next"
   backwardText="Previous"
-/>
+/>
+
+## Tooltip Position
+
+Use the `tooltipPosition` prop to change the alignment of the tooltip.
+
+<PaginationNav tooltipPosition="outside" total={3} loop />
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
@@ -23,6 +23,12 @@
   /** Specify the backward button text */
   export let backwardText = "Previous page";
 
+  /**
+   * Set the position of the tooltip relative to the pagination buttons.
+   * @type {"top" | "right" | "bottom" | "left" | "outside" | "inside"}
+   */
+  export let tooltipPosition = "bottom";
+
   import { createEventDispatcher } from "svelte";
   import CaretLeft from "../icons/CaretLeft.svelte";
   import CaretRight from "../icons/CaretRight.svelte";
@@ -76,7 +82,11 @@
       <Button
         kind="ghost"
         tooltipAlignment="center"
-        tooltipPosition="bottom"
+        tooltipPosition="{tooltipPosition === 'inside'
+          ? 'right'
+          : tooltipPosition === 'outside'
+          ? 'left'
+          : tooltipPosition}"
         iconDescription="{backwardText}"
         disabled="{!loop && page === 1}"
         icon="{CaretLeft}"
@@ -147,7 +157,11 @@
       <Button
         kind="ghost"
         tooltipAlignment="center"
-        tooltipPosition="bottom"
+        tooltipPosition="{tooltipPosition === 'inside'
+          ? 'left'
+          : tooltipPosition === 'outside'
+          ? 'right'
+          : tooltipPosition}"
         iconDescription="{forwardText}"
         disabled="{!loop && page === total}"
         icon="{CaretRight}"

diff --git a/types/PaginationNav/PaginationNav.svelte.d.ts b/types/PaginationNav/PaginationNav.svelte.d.ts
@@ -38,6 +38,12 @@ export interface PaginationNavProps
    * @default "Previous page"
    */
   backwardText?: string;
+
+  /**
+   * Set the position of the tooltip relative to the pagination buttons.
+   * @default "bottom"
+   */
+  tooltipPosition?: "top" | "right" | "bottom" | "left" | "outside" | "inside";
 }
 
 export default class PaginationNav extends SvelteComponentTyped<