diff --git a/packages/react-pagination/docs/react-pagination-demo.stories.js b/packages/react-pagination/docs/react-pagination-demo.stories.js index 384d6f08..b9f19b83 100644 --- a/packages/react-pagination/docs/react-pagination-demo.stories.js +++ b/packages/react-pagination/docs/react-pagination-demo.stories.js @@ -4,11 +4,6 @@ import { Pagination } from '../lib/react-pagination'; export default { title: 'Components/Pagination', component: Pagination, - parameters: { - actions: { - disable: true, - }, - }, }; export const Demo = (args) => { diff --git a/packages/react-pagination/docs/react-pagination-template.stories.js b/packages/react-pagination/docs/react-pagination-template.stories.js index 42cf8304..9f6827fa 100644 --- a/packages/react-pagination/docs/react-pagination-template.stories.js +++ b/packages/react-pagination/docs/react-pagination-template.stories.js @@ -147,8 +147,9 @@ const newTemplate = ({ ...props }) => { <select className="sui-select-sm" style={{ minWidth: 1, flex: 1, marginBottom: 0, marginRight: 10 }} + defaultValue="" > - <option value="" selected disabled> + <option value="" disabled> Bulk Actions </option> <option value="delete">Delete All</option> @@ -189,28 +190,22 @@ export const Advanced = () => { return ( <StorySection title="Advanced Template" - description={[ - 'This method allows you to modify the default template of the component. It becomes useful when you need to display the pagination outside the main area or have a complex design to replicate. You just need to call your new template inside the ', - <code style={{ fontSize: 11 }}>paginationContent</code>, - ' property.', - <br />, - <br />, - 'There are 2 elements to include in your custom template:', - <ul style={{ marginTop: 0 }}> - <li style={{ marginBottom: 5 }}> - <code style={{ fontSize: 11 }}> - { PaginationNav({ ...props }) } - </code> - , to show the navigation. - </li> - <li> - <code style={{ fontSize: 11 }}> - { PaginationResults({ ...props }) } - </code> - , to show the list of items to paginate. - </li> - </ul>, - ]} + description={ + <> + This method allows you to modify the default template of the component. It becomes useful when you need to display the pagination outside the main area or have a complex design to replicate. You just need to call your new template inside the <code style={{ fontSize: 11 }}>paginationContent</code> property. + <br /> + <br /> + There are 2 elements to include in your custom template: + <br /> + <code style={{ fontSize: 11 }}> + { PaginationNav({ ...props }) } + </code> , to show the navigation. + <br /> + <code style={{ fontSize: 11 }}> + { PaginationResults({ ...props }) } + </code> , to show the list of items to paginate. + </> + } code="const newTemplate = ({ ...props }) => { ... }" code2="<Pagination limit={ 5 } paginationContent={ newTemplate }> ... </Pagination>" isLast={true}