feat(button): add 'raised' button

Author: arturbien

src/Button/Button.stories.tsx

@@ -63,6 +63,47 @@ Default.story = {
   name: 'default'
 };
 
+export function Raised() {
+  return (
+    <div id='default-buttons'>
+      <Button variant='raised'>Default</Button>
+      <br />
+      <Button variant='raised' primary>
+        Primary
+      </Button>
+      <br />
+      <Button variant='raised' disabled>
+        Disabled
+      </Button>
+      <br />
+      <Button variant='raised' active>
+        Active
+      </Button>
+      <br />
+      <Button variant='raised' square>
+        <span role='img' aria-label='recycle'>
+          ♻︎
+        </span>
+      </Button>
+      <br />
+      <Button variant='raised' fullWidth>
+        Full width
+      </Button>
+      <br />
+      <Button variant='raised' size='sm'>
+        Size small
+      </Button>
+      <Button variant='raised' size='lg'>
+        Size large
+      </Button>
+    </div>
+  );
+}
+
+Raised.story = {
+  name: 'raised'
+};
+
 export function Flat() {
   return (
     <Window>

src/Button/Button.tsx

@@ -25,7 +25,7 @@ type ButtonProps = {
   type?: string;
 } & (
   | {
-      variant?: 'default' | 'flat' | 'thin';
+      variant?: 'default' | 'raised' | 'flat' | 'thin';
     }
   | {
       /** @deprecated Use `thin` */
@@ -146,11 +146,21 @@ export const StyledButton = styled.button<StyledButtonProps>`
                 `}
 
             ${active
-              ? createBorderStyles({ invert: true })
-              : createBorderStyles({ invert: false })}
+              ? createBorderStyles({
+                  style: variant === 'raised' ? 'window' : 'button',
+                  invert: true
+                })
+              : createBorderStyles({
+                  style: variant === 'raised' ? 'window' : 'button',
+                  invert: false
+                })}
           }
           &:active:before {
-            ${!disabled && createBorderStyles({ invert: true })}
+            ${!disabled &&
+            createBorderStyles({
+              style: variant === 'raised' ? 'window' : 'button',
+              invert: true
+            })}
           }
           &:focus:after,
           &:active:after {

src/NumberInput/NumberInput.tsx

@@ -28,7 +28,7 @@ const StyledNumberInputWrapper = styled.div`
   align-items: center;
 `;
 
-const StyledButton = styled(Button)<Pick<NumberInputProps, 'variant'>>`
+const StyledButton = styled(Button)`
   width: 30px;
   padding: 0;
   flex-shrink: 0;
@@ -40,13 +40,6 @@ const StyledButton = styled(Button)<Pick<NumberInputProps, 'variant'>>`
         `
       : css`
           height: 50%;
-          &:before {
-            border-left-color: ${({ theme }) => theme.borderLight};
-            border-top-color: ${({ theme }) => theme.borderLight};
-            box-shadow: inset 1px 1px 0px 1px
-                ${({ theme }) => theme.borderLightest},
-              inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
-          }
         `}
 `;
 
@@ -159,6 +152,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       handleClick(-step);
     }, [handleClick, step]);
 
+    const buttonVariant = variant === 'flat' ? 'flat' : 'raised';
     return (
       <StyledNumberInputWrapper
         className={className}
@@ -181,15 +175,15 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <StyledButtonWrapper variant={variant}>
           <StyledButton
             data-testid='increment'
-            variant={variant}
+            variant={buttonVariant}
             disabled={disabled || readOnly}
             onClick={stepUp}
           >
             <StyledButtonIcon invert />
           </StyledButton>
           <StyledButton
             data-testid='decrement'
-            variant={variant}
+            variant={buttonVariant}
             disabled={disabled || readOnly}
             onClick={stepDown}
           >

src/Select/Select.styles.tsx

@@ -109,7 +109,7 @@ export const StyledNativeSelect = styled.select`
 
 export const StyledDropdownButton = styled(Button).attrs(() => ({
   'aria-hidden': 'true'
-}))<CommonSelectStyleProps>`
+}))<Omit<CommonSelectStyleProps, 'variant'>>`
   width: 30px;
   padding: 0;
   flex-shrink: 0;
@@ -121,13 +121,6 @@ export const StyledDropdownButton = styled(Button).attrs(() => ({
         `
       : css`
           height: 100%;
-          &:before {
-            border-left-color: ${({ theme }) => theme.borderLight};
-            border-top-color: ${({ theme }) => theme.borderLight};
-            box-shadow: inset 1px 1px 0px 1px
-                ${({ theme }) => theme.borderLightest},
-              inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
-          }
         `}
   ${({ native = false, variant = 'default' }) =>
     native &&

src/Select/useSelectCommon.tsx

@@ -54,7 +54,7 @@ export const useSelectCommon = <T,>({
         $disabled={disabled}
         native={native}
         tabIndex={-1}
-        variant={variant}
+        variant={variant === 'flat' ? 'flat' : 'raised'}
       >
         <StyledDropdownIcon data-testid='select-icon' $disabled={disabled} />
       </StyledDropdownButton>