ibm-security icon indicating copy to clipboard operation
ibm-security copied to clipboard

Tearsheet animation is not working

Open midhun8454 opened this issue 2 years ago • 1 comments

Bug - When i checked all the code sandbox i can see Teasheet is poping up from bottom on click and some kind of animation is there on show and hide of tearsheet

Description

When i checked all the code sandbox i can see Teasheet is poping up from bottom on click and some kind of animation is there on show and hide of tearsheet

<!-- Screenshot (if applicable) -->

Expected behavior

Some kind of animation when you show and hide Tearsheet

Actual behavior

its not animating

Steps for reproducing

import React, { useState } from 'react'; import { Tearsheet } from '@carbon/ibm-cloud-cognitive'; import { Button, Tabs, Tab } from 'carbon-components-react';

export const ConfirmationDropModal = () => { const [isOpen, setIsOpen] = useState(true); const handleOpenModalClick = () => { setIsOpen(true); }; const handleCloseModal = () => { setIsOpen(false); };

return ( <> <Button onClick={handleOpenModalClick}>Reopen Tearsheet</Button> <Tearsheet actions={[ { kind: 'secondary', label: 'Cancel', onClick: handleCloseModal }, { kind: 'primary', label: 'Create', onClick: handleCloseModal }, ]} closeIconDescription='Close the tearsheet' description={ // cspell:disable Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor{' '} incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. // cspell:enable } influencer={<div className='tearsheet-example__dummy-content-block'>Influencer} label='This is the label of the tearsheet' navigation={ <div className='tearsheet-example__tabs'> <Tabs onSelectionChange={() => {}}> <Tab label='Tab 1' /> <Tab label='Tab 2' /> <Tab label='Tab 3' /> <Tab label='Tab 4' /> </Tabs> } onClose={handleCloseModal} open={isOpen} preventCloseOnClickOutside title='This is the title of the tearsheet' > <div className='tearsheet-example__dummy-content-block'> The main content of the Tearsheet should be placed here. </Tearsheet> </> ); };

Affected browsers

Chrome

  • [ ] /
  • [ ] /
  • [ ] /

Optional information

Version -

"@carbon/ibm-cloud-cognitive": "^1.10.0", "@carbon/elements": "^10.54.1",

midhun8454 avatar Mar 16 '22 08:03 midhun8454

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

stale[bot] avatar May 27 '23 00:05 stale[bot]