Margin control to insomnia-component styled buttons (#3429)

Kong · Jun 2, 2021 · fa23003 · fa23003
1 parent 3ba7b88
commit fa23003
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/...mnia-app/app/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown-button.tsx b/...mnia-app/app/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown-button.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import styled from 'styled-components';
 import { getGrpcPathSegments, getShortGrpcPath } from '../../../../common/grpc-paths';
-import { Button, Tooltip } from 'insomnia-components';
+import { Button, ButtonProps, Tooltip } from 'insomnia-components';
 
 const FlexSpaceBetween = styled.span`
   width: 100%;
@@ -25,8 +25,15 @@ const useLabel = (fullPath?: string) =>
     return 'Select Method';
   }, [fullPath]);
 
+const buttonProps: ButtonProps = {
+  className: 'tall wide',
+  variant: 'text',
+  size: 'medium',
+  radius: '0',
+};
+
 const GrpcMethodDropdownButton: FunctionComponent<Props> = ({ fullPath }) => (
-  <Button className="tall wide" variant="text" size="medium" radius="0">
+  <Button {...buttonProps}>
     <Tooltip className="tall wide" message={fullPath} position="bottom" delay={500}>
       <FlexSpaceBetween>
         {useLabel(fullPath)}

diff --git a/packages/insomnia-components/src/button/button.tsx b/packages/insomnia-components/src/button/button.tsx
@@ -34,10 +34,12 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ValueOf<typeof ButtonVariantEnum>;
   size?: ValueOf<typeof ButtonSizeEnum>;
   radius?: string;
+  margin?: string;
 }
 
 const StyledButton = styled.button<ButtonProps>`
   color: ${({ bg }) => (bg ? `var(--color-${bg})` : 'var(--color-font)')};
+  margin: ${({ margin }) => (margin || 0)};
   text-align: center;
   font-size: var(--font-size-sm);
   display: inline-flex !important;