Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tearsheet animation is not working #1145

Open
3 tasks
midhun8454 opened this issue Mar 16, 2022 · 1 comment
Open
3 tasks

Tearsheet animation is not working #1145

midhun8454 opened this issue Mar 16, 2022 · 1 comment
Labels
status: triage type: bug Something isn't working wontfix This will not be worked on

Comments

@midhun8454
Copy link

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 (
<>
Reopen Tearsheet
<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={

Influencer
}
label='This is the label of the tearsheet'
navigation={

<Tabs onSelectionChange={() => {}}>






}
onClose={handleCloseModal}
open={isOpen}
preventCloseOnClickOutside
title='This is the title of the tearsheet'
>

The main content of the Tearsheet should be placed here.


</>
);
};

Affected browsers

Chrome

  • /
  • /
  • /

Optional information

Version -

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

@midhun8454 midhun8454 added status: triage type: bug Something isn't working labels Mar 16, 2022
@stale
Copy link

stale bot commented May 27, 2023

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 stale bot added the wontfix This will not be worked on label May 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: triage type: bug Something isn't working wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

1 participant