feat(ButtonPrimitive): migrate to Tailwind

kiwicom · Oct 2, 2023 · 4ea8178 · 4ea8178
1 parent 5faa7bd
commit 4ea8178
Show file tree

Hide file tree

Showing 12 changed files with 278 additions and 369 deletions.
diff --git a/docs/src/components/BrandedTile.tsx b/docs/src/components/BrandedTile.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { Heading, Stack, Button, mediaQueries as mq } from "@kiwicom/orbit-components";
-import { StyledButtonPrimitive } from "@kiwicom/orbit-components/lib/primitives/ButtonPrimitive";
 import useTheme from "@kiwicom/orbit-components/lib/hooks/useTheme";
 import styled, { css } from "styled-components";
 
@@ -40,18 +39,18 @@ const StyledWrapper = styled.a<{ primary: string; type?: "primary" | "secondary"
       ${boxShadowActive};
     }
 
-    ${StyledButtonPrimitive} {
+    .orbit-button-primitive {
       pointer-events: none;
       background: ${getBgColor({ theme, type, color })};
     }
 
-    &:hover ${StyledButtonPrimitive} {
+    &:hover .orbit-button-primitive {
       background: ${getBgColorHover({ theme, type, color })}
     }
-    &:focus ${StyledButtonPrimitive} {
+    &:focus .orbit-button-primitive {
       background: ${getBgColor({ theme, type, color })}
     }
-    &:active ${StyledButtonPrimitive} {
+    &:active .orbit-button-primitive {
       background: ${getBgColorActive({ theme, type, color })}
     }
   `};

diff --git a/packages/orbit-components/src/ButtonGroup/index.tsx b/packages/orbit-components/src/ButtonGroup/index.tsx
@@ -5,14 +5,13 @@ import styled, { css } from "styled-components";
 
 import defaultTheme from "../defaultTheme";
 import { borderRadius, rtlSpacing } from "../utils/rtl";
-import { StyledButtonPrimitive } from "../primitives/ButtonPrimitive";
 import mq from "../utils/mediaQuery";
 import type { Props } from "./types";
 
 const StyledButtonGroup = styled.div`
   display: flex;
 
-  ${StyledButtonPrimitive} {
+  .orbit-button-primitive {
     border-radius: 0;
     margin: ${({ theme }) => rtlSpacing(theme.orbit.marginButtonGroup)};
 
@@ -26,7 +25,7 @@ const StyledButtonGroup = styled.div`
     }
   }
   ${mq.tablet(css`
-    ${StyledButtonPrimitive} {
+    .orbit-button-primitive {
       :first-child {
         border-radius: ${({ theme }) =>
           borderRadius(`${theme.orbit.borderRadiusNormal} 0 0 ${theme.orbit.borderRadiusNormal}`)};

diff --git a/packages/orbit-components/src/InputField/index.tsx b/packages/orbit-components/src/InputField/index.tsx
@@ -19,7 +19,6 @@ import InformationCircle from "../icons/InformationCircle";
 import FormLabel from "../FormLabel";
 import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
 import formElementFocus from "./helpers/formElementFocus";
-import { StyledButtonPrimitiveIconContainer } from "../primitives/ButtonPrimitive/components/ButtonPrimitiveIconContainer";
 import mq from "../utils/mediaQuery";
 import type { Props } from "./types";
 
@@ -187,7 +186,7 @@ export const Prefix = styled(({ children, className, iconRef }) => (
       height: ${theme.orbit.heightIconNormal};
     }
 
-    ${StyledButtonPrimitiveIconContainer} {
+    .orbit-button-primitive-icon {
       color: ${theme.orbit.colorIconSecondary};
     }
   `}
@@ -208,7 +207,7 @@ const Suffix = styled(({ children, className }) => <div className={className}>{c
     pointer-events: ${disabled && "none"};
     z-index: 3;
 
-    ${StyledButtonPrimitiveIconContainer} {
+    .orbit-button-primitive-icon {
       color: ${theme.orbit.colorIconSecondary};
     }
 

diff --git a/packages/orbit-components/src/Modal/ModalFooter/index.tsx b/packages/orbit-components/src/Modal/ModalFooter/index.tsx
@@ -10,7 +10,6 @@ import { rtlSpacing } from "../../utils/rtl";
 import { ModalContext } from "../ModalContext";
 import { QUERIES } from "../../utils/mediaQuery/consts";
 import useModalContextFunctions from "../helpers/useModalContextFunctions";
-import { StyledButtonPrimitive } from "../../primitives/ButtonPrimitive";
 import type { Props } from "./types";
 
 const StyledChild = styled.div<{ flex?: Props["flex"] }>`
@@ -38,7 +37,7 @@ export const StyledModalFooter = styled.div<{
     box-sizing: border-box;
     transition: ${transition(["box-shadow"], "fast", "ease-in-out")};
     @media (max-width: ${+getBreakpointWidth(QUERIES.LARGEMOBILE, theme, true) - 1}px) {
-      ${StyledButtonPrimitive} {
+      .orbit-button-primitive {
         font-size: ${theme.orbit.fontSizeButtonNormal};
         height: ${theme.orbit.heightButtonNormal};
       }

diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx
@@ -11,7 +11,6 @@ import ModalCloseButton from "./ModalCloseButton";
 import { SIZES, CLOSE_BUTTON_DATA_TEST } from "./consts";
 import KEY_CODE_MAP from "../common/keyMaps";
 import defaultTheme from "../defaultTheme";
-import { StyledButtonPrimitive } from "../primitives/ButtonPrimitive";
 import media from "../utils/mediaQuery";
 import { right } from "../utils/rtl";
 import transition from "../utils/transition";
@@ -151,7 +150,7 @@ const CloseContainer = styled.div<{
       margin: 0;
     }
 
-    ${StyledButtonPrimitive} {
+    .orbit-button-primitive {
       pointer-events: auto;
       margin-${right}: ${theme.orbit.spaceXXSmall};
 

diff --git a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
@@ -13,7 +13,6 @@ import transition from "../../utils/transition";
 import useClickOutside from "../../hooks/useClickOutside";
 import useLockScrolling from "../../hooks/useLockScrolling";
 import { ModalContext } from "../../Modal/ModalContext";
-import { StyledButtonPrimitive } from "../../primitives/ButtonPrimitive";
 import { PLACEMENTS } from "../../common/consts";
 import boundingClientRect from "../../utils/boundingClientRect";
 import type { Offset } from "../types";
@@ -82,7 +81,7 @@ const StyledActions = styled.div`
     padding: ${popoverPadding};
     padding-top: ${theme.orbit.spaceSmall};
     background-color: ${theme.orbit.paletteWhite};
-    ${StyledButtonPrimitive} {
+    .orbit-button-primitive {
       width: 100%;
       flex: 1 1 auto;
     }
@@ -92,7 +91,7 @@ const StyledActions = styled.div`
       left: auto;
       border-bottom-left-radius: ${theme.orbit.borderRadiusNormal};
       border-bottom-right-radius: 3px;
-      ${StyledButtonPrimitive} {
+      .orbit-button-primitive {
         width: auto;
         flex-grow: 0;
       }

diff --git a/...ges/orbit-components/src/primitives/ButtonPrimitive/components/ButtonPrimitiveContent.tsx b/...ges/orbit-components/src/primitives/ButtonPrimitive/components/ButtonPrimitiveContent.tsx
diff --git a/...t-components/src/primitives/ButtonPrimitive/components/ButtonPrimitiveContentChildren.tsx b/...t-components/src/primitives/ButtonPrimitive/components/ButtonPrimitiveContentChildren.tsx
diff --git a/...bit-components/src/primitives/ButtonPrimitive/components/ButtonPrimitiveIconContainer.tsx b/...bit-components/src/primitives/ButtonPrimitive/components/ButtonPrimitiveIconContainer.tsx
diff --git a/packages/orbit-components/src/primitives/ButtonPrimitive/index.js.flow b/packages/orbit-components/src/primitives/ButtonPrimitive/index.js.flow
@@ -3,7 +3,6 @@
   DOCUMENTATION: https://orbit.kiwi/utilities/buttonprimitive/
 */
 import * as React from "react";
-import type { StyledComponent } from "styled-components";
 
 import type { Globals, Component } from "../../common/common.js.flow";
 import type { spaceAfter } from "../../common/getSpacingToken/index.js.flow";
@@ -110,6 +109,4 @@ export type Props = {|
   ...PrimitiveTypes,
 |};
 
-declare export var StyledButtonPrimitive: StyledComponent<any, any, HTMLElement>;
-
 declare export default React.AbstractComponent<Props, HTMLButtonElement>;