mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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>
This commit is contained in:
Sam 2023-05-22 03:59:53 +10:00 • committed by GitHub
commit 60a796ea48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

17
COMPONENT_INDEX.md
View file

@ -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

12
docs/src/COMPONENT_API.json
View file

@ -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": [],

8
docs/src/pages/components/PaginationNav.svx
View file

@ -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 />

18
src/PaginationNav/PaginationNav.svelte
View file

@ -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}"

6
types/PaginationNav/PaginationNav.svelte.d.ts vendored
View file

@ -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<