feat(BadgePrimitive): remove borderColor prop

BREAKING CHANGE: borderColor prop is no longer accepted
kiwicom · Apr 20, 2023 · 70a620d · 70a620d
1 parent b702c75
commit 70a620d
Show file tree

Hide file tree

Showing 5 changed files with 1 addition and 10 deletions.
diff --git a/packages/orbit-components/src/primitives/BadgePrimitive/README.md b/packages/orbit-components/src/primitives/BadgePrimitive/README.md
@@ -19,7 +19,6 @@ Table below contains all types of the props available in BadgePrimitive componen
 | Name            | Type                    | Default | Description                                                          |
 | :-------------- | :---------------------- | :------ | :------------------------------------------------------------------- |
 | background      | `string`                |         | Background of a BadgePrimitive. Can use gradients and images         |
-| borderColor     | `string`                |         | Color of the border that is always solid and one pixel.              |
 | foregroundColor | `string`                |         | Foreground color, controling color of a text and icon.               |
 | children        | `React.Node`            |         | The content of the BadgePrimitive.                                   |
 | dataTest        | `string`                |         | Optional prop for testing purposes.                                  |

diff --git a/packages/orbit-components/src/primitives/BadgePrimitive/__tests__/index.test.tsx b/packages/orbit-components/src/primitives/BadgePrimitive/__tests__/index.test.tsx
@@ -11,7 +11,6 @@ describe("BadgePrimitive", () => {
         icon={<Sightseeing dataTest="icon" />}
         background="red"
         foregroundColor="blue"
-        borderColor="green"
         dataTest="test"
         ariaLabel="label"
       >
@@ -22,7 +21,6 @@ describe("BadgePrimitive", () => {
     expect(screen.getByTestId("test")).toHaveStyle({
       backgroundColor: "red",
       color: "blue",
-      borderColor: "green",
     });
     expect(screen.getByLabelText("label")).toBeInTheDocument();
     expect(screen.getByText("badge")).toBeInTheDocument();

diff --git a/packages/orbit-components/src/primitives/BadgePrimitive/index.js.flow b/packages/orbit-components/src/primitives/BadgePrimitive/index.js.flow
@@ -15,7 +15,6 @@ export type Props = {|
   +ariaLabel?: string,
   +background?: ?string,
   +foregroundColor?: ?string,
-  +borderColor?: ?string,
   ...Globals,
 |};
 

diff --git a/packages/orbit-components/src/primitives/BadgePrimitive/index.tsx b/packages/orbit-components/src/primitives/BadgePrimitive/index.tsx
@@ -11,7 +11,7 @@ export const StyledBadge = styled(({ className, children, dataTest, ariaLabel, i
     {children}
   </div>
 ))`
-  ${({ theme, borderColor, background, foregroundColor }) => css`
+  ${({ theme, background, foregroundColor }) => css`
     position: relative;
     font-family: ${theme.orbit.fontFamily};
     display: inline-flex;
@@ -27,7 +27,6 @@ export const StyledBadge = styled(({ className, children, dataTest, ariaLabel, i
     color: ${foregroundColor};
     border-radius: ${theme.orbit.borderRadiusBadge};
     padding: ${theme.orbit.paddingBadge};
-    border: ${borderColor && `1px solid ${borderColor}`};
     ${StyledCarrierLogo} {
       position: absolute;
       ${left}: 0px;
@@ -80,7 +79,6 @@ const BadgePrimitive = ({
   id,
   background,
   foregroundColor,
-  borderColor,
   carriers,
 }: Props) => {
   return (
@@ -90,7 +88,6 @@ const BadgePrimitive = ({
       id={id}
       dataTest={dataTest}
       ariaLabel={ariaLabel}
-      borderColor={borderColor}
     >
       {carriers && <CarrierLogo carriers={carriers} rounded size="medium" />}
       {icon && <IconContainer hasContent={!!children}>{icon}</IconContainer>}

diff --git a/packages/orbit-components/src/primitives/Primitives.stories.tsx b/packages/orbit-components/src/primitives/Primitives.stories.tsx
@@ -20,14 +20,12 @@ export const BadgePrimitive = () => {
   const Icon = getIcon(getIcons("icon", "Airplane"));
   const background = text("Background", "linear-gradient(#fd1d1d, #ffae28)");
   const foregroundColor = text("ForegroundColor", "#fff");
-  const borderColor = text("borderColor", "");
 
   return (
     <BadgePrimitiveComponent
       background={background}
       foregroundColor={foregroundColor}
       icon={Icon && <Icon />}
-      borderColor={borderColor}
     >
       BadgePrimitive
     </BadgePrimitiveComponent>