fix: improve customization fab (#1891)

README.md

@@ -217,6 +217,7 @@ You can use all of the following options with the standalone version of the <red
 * `hideDownloadButton` - do not show "Download" spec button. **THIS DOESN'T MAKE YOUR SPEC PRIVATE**, it just hides the button.
 * `hideHostname` - if set, the protocol and hostname is not shown in the operation definition.
 * `hideLoading` - do not show loading animation. Useful for small docs.
+* `hideFab` - do not show FAB in mobile view. Useful for implementing a custom floating action button.
 * `hideSchemaPattern` - if set, the pattern is not shown in the schema.
 * `hideSingleRequestSampleTab` - do not show the request sample tab for requests with only one sample.
 * `showObjectSchemaExamples` - show object schema example in the properties, default `false`.
@@ -305,6 +306,9 @@ You can use all of the following options with the standalone version of the <red
   * `backgroundColor`: '#263238'
   * `width`: '40%'
   * `textColor`: '#ffffff'
+* `fab`
+  * `backgroundColor`: '#263238'
+  * `color`: '#ffffff'
 
 -----------
 ## Development

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -56,7 +56,7 @@ const StyledStickySidebar = styled.div<{ open?: boolean }>`
 const FloatingButton = styled.div`
   outline: none;
   user-select: none;
-  background-color: #f2f2f2;
+  background-color: ${({ theme }) => theme.fab.backgroundColor};
   color: ${props => props.theme.colors.primary.main};
   display: none;
   cursor: pointer;
@@ -74,6 +74,9 @@ const FloatingButton = styled.div`
   width: 60px;
   height: 60px;
   padding: 0 20px;
+  svg {
+    color: ${({ theme }) => theme.fab.color};
+  }
 
   @media print {
     display: none;
@@ -140,9 +143,11 @@ export class StickyResponsiveSidebar extends React.Component<
         >
           {this.props.children}
         </StyledStickySidebar>
-        <FloatingButton onClick={this.toggleNavMenu}>
+        {!this.context.hideFab && (
-          <AnimatedChevronButton open={open} />
+          <FloatingButton onClick={this.toggleNavMenu}>
-        </FloatingButton>
+            <AnimatedChevronButton open={open} />
+          </FloatingButton>
+        )}
       </>
     );
   }

src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap

@@ -80,6 +80,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "expandSingleSchemaField": false,
                     "generatedPayloadSamplesMaxDepth": 10,
                     "hideDownloadButton": false,
+                    "hideFab": false,
                     "hideHostname": false,
                     "hideSchemaPattern": false,
                     "hideSchemaTitles": false,
@@ -186,6 +187,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                         },
                       },
                       "extensionsHook": undefined,
+                      "fab": Object {
+                        "backgroundColor": "#f2f2f2",
+                        "color": "#0065FB",
+                      },
                       "logo": Object {
                         "gutter": "2px",
                         "maxHeight": "260px",
@@ -320,6 +325,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "expandSingleSchemaField": false,
                     "generatedPayloadSamplesMaxDepth": 10,
                     "hideDownloadButton": false,
+                    "hideFab": false,
                     "hideHostname": false,
                     "hideSchemaPattern": false,
                     "hideSchemaTitles": false,
@@ -426,6 +432,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                         },
                       },
                       "extensionsHook": undefined,
+                      "fab": Object {
+                        "backgroundColor": "#f2f2f2",
+                        "color": "#0065FB",
+                      },
                       "logo": Object {
                         "gutter": "2px",
                         "maxHeight": "260px",
@@ -536,6 +546,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "expandSingleSchemaField": false,
               "generatedPayloadSamplesMaxDepth": 10,
               "hideDownloadButton": false,
+              "hideFab": false,
               "hideHostname": false,
               "hideSchemaPattern": false,
               "hideSchemaTitles": false,
@@ -642,6 +653,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                   },
                 },
                 "extensionsHook": undefined,
+                "fab": Object {
+                  "backgroundColor": "#f2f2f2",
+                  "color": "#0065FB",
+                },
                 "logo": Object {
                   "gutter": "2px",
                   "maxHeight": "260px",
@@ -817,6 +832,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "expandSingleSchemaField": false,
                     "generatedPayloadSamplesMaxDepth": 10,
                     "hideDownloadButton": false,
+                    "hideFab": false,
                     "hideHostname": false,
                     "hideSchemaPattern": false,
                     "hideSchemaTitles": false,
@@ -923,6 +939,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                         },
                       },
                       "extensionsHook": undefined,
+                      "fab": Object {
+                        "backgroundColor": "#f2f2f2",
+                        "color": "#0065FB",
+                      },
                       "logo": Object {
                         "gutter": "2px",
                         "maxHeight": "260px",
@@ -1057,6 +1077,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "expandSingleSchemaField": false,
                     "generatedPayloadSamplesMaxDepth": 10,
                     "hideDownloadButton": false,
+                    "hideFab": false,
                     "hideHostname": false,
                     "hideSchemaPattern": false,
                     "hideSchemaTitles": false,
@@ -1163,6 +1184,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                         },
                       },
                       "extensionsHook": undefined,
+                      "fab": Object {
+                        "backgroundColor": "#f2f2f2",
+                        "color": "#0065FB",
+                      },
                       "logo": Object {
                         "gutter": "2px",
                         "maxHeight": "260px",
@@ -1273,6 +1298,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "expandSingleSchemaField": false,
               "generatedPayloadSamplesMaxDepth": 10,
               "hideDownloadButton": false,
+              "hideFab": false,
               "hideHostname": false,
               "hideSchemaPattern": false,
               "hideSchemaTitles": false,
@@ -1379,6 +1405,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                   },
                 },
                 "extensionsHook": undefined,
+                "fab": Object {
+                  "backgroundColor": "#f2f2f2",
+                  "color": "#0065FB",
+                },
                 "logo": Object {
                   "gutter": "2px",
                   "maxHeight": "260px",
@@ -1512,6 +1542,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
           "expandSingleSchemaField": false,
           "generatedPayloadSamplesMaxDepth": 10,
           "hideDownloadButton": false,
+          "hideFab": false,
           "hideHostname": false,
           "hideSchemaPattern": false,
           "hideSchemaTitles": false,
@@ -1618,6 +1649,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               },
             },
             "extensionsHook": undefined,
+            "fab": Object {
+              "backgroundColor": "#f2f2f2",
+              "color": "#0065FB",
+            },
             "logo": Object {
               "gutter": "2px",
               "maxHeight": "260px",
@@ -1790,6 +1825,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "expandSingleSchemaField": false,
               "generatedPayloadSamplesMaxDepth": 10,
               "hideDownloadButton": false,
+              "hideFab": false,
               "hideHostname": false,
               "hideSchemaPattern": false,
               "hideSchemaTitles": false,
@@ -1896,6 +1932,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                   },
                 },
                 "extensionsHook": undefined,
+                "fab": Object {
+                  "backgroundColor": "#f2f2f2",
+                  "color": "#0065FB",
+                },
                 "logo": Object {
                   "gutter": "2px",
                   "maxHeight": "260px",
@@ -2030,6 +2070,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "expandSingleSchemaField": false,
               "generatedPayloadSamplesMaxDepth": 10,
               "hideDownloadButton": false,
+              "hideFab": false,
               "hideHostname": false,
               "hideSchemaPattern": false,
               "hideSchemaTitles": false,
@@ -2136,6 +2177,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                   },
                 },
                 "extensionsHook": undefined,
+                "fab": Object {
+                  "backgroundColor": "#f2f2f2",
+                  "color": "#0065FB",
+                },
                 "logo": Object {
                   "gutter": "2px",
                   "maxHeight": "260px",
@@ -2246,6 +2291,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
         "expandSingleSchemaField": false,
         "generatedPayloadSamplesMaxDepth": 10,
         "hideDownloadButton": false,
+        "hideFab": false,
         "hideHostname": false,
         "hideSchemaPattern": false,
         "hideSchemaTitles": false,
@@ -2352,6 +2398,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
             },
           },
           "extensionsHook": undefined,
+          "fab": Object {
+            "backgroundColor": "#f2f2f2",
+            "color": "#0065FB",
+          },
           "logo": Object {
             "gutter": "2px",
             "maxHeight": "260px",

src/services/RedocNormalizedOptions.ts

@@ -53,6 +53,7 @@ export interface RedocRawOptions {
   ignoreNamedSchemas?: string[] | string;
   hideSchemaPattern?: boolean;
   generatedPayloadSamplesMaxDepth?: number;
+  hideFab?: boolean;
 }
 
 export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
@@ -245,6 +246,7 @@ export class RedocNormalizedOptions {
   ignoreNamedSchemas: Set<string>;
   hideSchemaPattern: boolean;
   generatedPayloadSamplesMaxDepth: number;
+  hideFab: boolean;
 
   constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) {
     raw = { ...defaults, ...raw };
@@ -315,5 +317,6 @@ export class RedocNormalizedOptions {
       RedocNormalizedOptions.normalizeGeneratedPayloadSamplesMaxDepth(
         raw.generatedPayloadSamplesMaxDepth,
       );
+    this.hideFab = argValueToBoolean(raw.hideFab);
   }
 }

src/theme.ts

@@ -162,6 +162,10 @@ const defaultTheme: ThemeInterface = {
   codeBlock: {
     backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
   },
+  fab: {
+    backgroundColor: '#f2f2f2',
+    color: '#0065FB',
+  },
 };
 
 export default defaultTheme;
@@ -338,6 +342,10 @@ export interface ResolvedThemeInterface {
   codeBlock: {
     backgroundColor: string;
   };
+  fab: {
+    backgroundColor: string;
+    color: string;
+  };
 
   extensionsHook?: (name: string, props: any) => string;
 }