#3250 - fix presets position

epam · Oct 11, 2023 · 73fb4b2 · 73fb4b2
1 parent 8f1230b
commit 73fb4b2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/...lymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx b/...lymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx
@@ -34,6 +34,7 @@ import {
   DisabledArea,
   RnaAccordionContainer,
   StyledAccordion,
+  StyledAccordionWrapper,
   StyledButton,
 } from './styles';
 import { Summary } from './Summary';
@@ -219,7 +220,22 @@ export const RnaAccordion = ({ libraryName }) => {
               })}
             </DetailsContainer>
           );
-        return (
+        const presetsExpanded =
+          groupData.groupName === RnaBuilderPresetsItem.Presets && expanded;
+
+        return presetsExpanded ? (
+          <StyledAccordionWrapper key={groupData.groupName}>
+            <StyledAccordion
+              data-testid="styled-accordion"
+              summary={summary}
+              details={details}
+              expanded={expanded}
+              onSummaryClick={() =>
+                handleAccordionSummaryClick(groupData.groupName)
+              }
+            />
+          </StyledAccordionWrapper>
+        ) : (
           <StyledAccordion
             key={groupData.groupName}
             data-testid="styled-accordion"

diff --git a/...er-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/Summary/Summary.tsx b/...er-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/Summary/Summary.tsx
@@ -29,7 +29,7 @@ export const Summary = ({
       <SummaryText>
         {groupName} ({quantity})
       </SummaryText>
-      <StyledIcon name="chevron" expanded={expanded} />
+      <StyledIcon name="chevron" expanded={!expanded} />
     </SummaryContainer>
   );
 };
diff --git a/...cher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/styles.ts b/...cher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/styles.ts
@@ -22,12 +22,18 @@ export const RnaAccordionContainer = styled.div({
   flexDirection: 'column',
   justifyContent: 'flex-end',
   overflow: 'hidden',
+  height: '100%',
 });
 
 export const StyledAccordion = styled(Accordion)({
   minHeight: '32px',
 });
 
+export const StyledAccordionWrapper = styled.div({
+  flexGrow: 2,
+  minHeight: '32px',
+});
+
 export const DetailsContainer = styled.div({
   position: 'relative',
   width: '100%',