fixes collapsible not opening

intermine · Oct 14, 2021 · d1eb3e3 · d1eb3e3
1 parent 2f603df
commit d1eb3e3
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/src/inline-alert/inline-alert.tsx b/src/inline-alert/inline-alert.tsx
@@ -104,7 +104,7 @@ export const InlineAlert = (props: InlineAlertProps): JSX.Element => {
     }
 
     return (
-        <Collapsible isOpen={isOpen} {...containerProps}>
+        <Collapsible in={isOpen} {...containerProps}>
             <InlineAlertRoot
                 isOpen
                 type={type}

diff --git a/src/stepper/stepper.stories.tsx b/src/stepper/stepper.stories.tsx
@@ -75,15 +75,15 @@ const Template: Story = (args) => {
     return (
         <Box>
             <Button color="info" variant="ghost" onClick={decreaseStep}>
-                Decrease Step
+                Previous Step
             </Button>
             <Button
                 csx={{ root: { margin: '0 0 1rem 1rem' } }}
                 onClick={increaseStep}
                 color="info"
                 variant="ghost"
             >
-                Increase Step
+                Next Step
             </Button>
 
             <Stepper stepsStatus={stepsStatus} activeStep={step} {...args} />
@@ -115,15 +115,15 @@ const Template2: Story = (args) => {
     return (
         <Box>
             <Button color="info" variant="ghost" onClick={decreaseStep}>
-                Decrease Step
+                Previous Step
             </Button>
             <Button
                 csx={{ root: { margin: '0 0 1rem 1rem' } }}
                 onClick={increaseStep}
                 color="info"
                 variant="ghost"
             >
-                Increase Step
+                Next Step
             </Button>
 
             <Stepper stepsStatus={stepsStatus} activeStep={step} {...args} />

diff --git a/src/stepper/stepper.tsx b/src/stepper/stepper.tsx
@@ -429,7 +429,7 @@ export const Stepper = (props: StepperProps): JSX.Element => {
                             </AvatarAndTitleContainer>
                             <DescriptionContainer
                                 alignment={alignment}
-                                isOpen={activeStep === idx + 1}
+                                in={activeStep === idx + 1}
                                 csx={{ root: csx.description }}
                                 classes={{ root: classes.description }}
                                 isLast={idx + 1 === steps.length}

diff --git a/src/zoom/zoom.stories.tsx b/src/zoom/zoom.stories.tsx
@@ -21,6 +21,7 @@ const Template: Story = (props) => {
                         width: 500,
                         background: '#232323',
                         color: '#fff',
+                        padding: '3rem',
                     },
                 }}
             >