mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Eric Reynolds 2021-06-02 08:47:23 -07:00 committed by Opender Singh
parent 7861d7a505
commit f72fca6a7b
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/insomnia-app/app/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown-button.tsx
View File

@ -1,7 +1,7 @@
import React, { FunctionComponent, useMemo } from 'react'; import React, { FunctionComponent, useMemo } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { getGrpcPathSegments, getShortGrpcPath } from '../../../../common/grpc-paths'; import { getGrpcPathSegments, getShortGrpcPath } from '../../../../common/grpc-paths';
import { Button, Tooltip } from 'insomnia-components'; import { Button, ButtonProps, Tooltip } from 'insomnia-components';
const FlexSpaceBetween = styled.span` const FlexSpaceBetween = styled.span`
width: 100%; width: 100%;
@ -25,8 +25,15 @@ const useLabel = (fullPath?: string) =>
return 'Select Method'; return 'Select Method';
}, [fullPath]); }, [fullPath]);
const buttonProps: ButtonProps = {
className: 'tall wide',
variant: 'text',
size: 'medium',
radius: '0',
};
const GrpcMethodDropdownButton: FunctionComponent<Props> = ({ fullPath }) => ( 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}> <Tooltip className="tall wide" message={fullPath} position="bottom" delay={500}>
<FlexSpaceBetween> <FlexSpaceBetween>
{useLabel(fullPath)} {useLabel(fullPath)}

2
packages/insomnia-components/src/button/button.tsx
View File

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