fix: update StyledCallbackTitle

to fix chevron animation

src/components/Callbacks/CallbackOperation.tsx

@@ -12,13 +12,16 @@ export class CallbackOperation extends React.Component<{ callbackOperation: Oper
   };
 
   render() {
-    const { expanded } = this.props.callbackOperation;
+    const { name, expanded, httpVerb, deprecated } = this.props.callbackOperation;
 
     return (
       <>
         <StyledCallbackTitle
           onClick={this.toggle}
-          callbackOperation={this.props.callbackOperation}
+          name={name}
+          opened={expanded}
+          httpVerb={httpVerb}
+          deprecated={deprecated}
         />
         {expanded && <CallbackDetails operation={this.props.callbackOperation} />}
       </>

src/components/Callbacks/CallbackTitle.tsx

@@ -6,23 +6,24 @@ import { shortenHTTPVerb } from '../../utils/openapi';
 import styled from '../../styled-components';
 import { Badge } from '../../common-elements/';
 import { l } from '../../services/Labels';
-import { OperationModel } from '../../services/models';
 
 export interface CallbackTitleProps {
+  name: string;
+  opened?: boolean;
+  httpVerb: string;
+  deprecated?: boolean;
   className?: string;
   onClick?: () => void;
-  callbackOperation: OperationModel;
 }
 
 export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
   render() {
-    const { className, onClick, callbackOperation } = this.props;
+    const { name, opened, className, onClick, httpVerb, deprecated } = this.props;
-    const { name, httpVerb, deprecated, expanded } = callbackOperation;
 
     return (
       <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
         <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
-        <ShelfIcon size={'1.5em'} direction={expanded ? 'down' : 'right'} float={'left'} />
+        <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
         <CallbackName deprecated={deprecated}>{name}</CallbackName>
         {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
       </CallbackTitleWrapper>
@@ -34,6 +35,12 @@ const CallbackTitleWrapper = styled.div`
   & > * {
     vertical-align: middle;
   }
+
+  ${ShelfIcon} {
+    polygon {
+      fill: ${({ theme }) => theme.colors.gray.A200};
+    }
+  }
 `;
 
 const CallbackName = styled.span<{ deprecated?: boolean }>`

src/components/__tests__/Callbacks.test.tsx

@@ -8,7 +8,6 @@ import { CallbackModel } from '../../services/models/Callback';
 import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
 import { CallbacksList, CallbackTitle, CallbackOperation } from '../Callbacks';
 import * as simpleCallbackFixture from './fixtures/simple-callback.json';
-import { OperationModel } from '../../services/models';
 
 const options = new RedocNormalizedOptions({});
 describe('Components', () => {
@@ -32,16 +31,8 @@ describe('Components', () => {
     });
 
     it('should correctly render CallbackTitle', () => {
-      const callbackOperation = {
-        name: 'Test',
-        httpVerb: 'get',
-      } as OperationModel;
       const callbackTitleViewElement = shallow(
-        <CallbackTitle
+        <CallbackTitle name={'Test'} className={'.test'} onClick={undefined} httpVerb={'get'} />,
-          className={'.test'}
-          onClick={undefined}
-          callbackOperation={callbackOperation}
-        />,
       ).getElement();
       expect(callbackTitleViewElement.props).toBeDefined();
       expect(callbackTitleViewElement.props.className).toEqual('.test');