feat(Alert): add labelClose prop

BREAKING CHANGE: translation removed, use labelClose prop
kiwicom · Apr 17, 2023 · 5dc5d89 · 5dc5d89
1 parent e5aeb5a
commit 5dc5d89
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/packages/orbit-components/src/Alert/README.md b/packages/orbit-components/src/Alert/README.md
@@ -29,6 +29,7 @@ The table below contains all types of the props available in Alert component.
 | title         | `Translation`                   |          | The title of the Alert.                                                                                                                                        |
 | **type**      | [`enum`](#enum)                 | `"info"` | The type of Alert.                                                                                                                                             |
 | suppressed    | `boolean`                       |          | If `suppressed` is on, Alert will not have colored background                                                                                                  |
+| labelClose    | `React.Node`                    |          | The label of the close button.                                                                                                                                 |
 
 ### enum
 

diff --git a/packages/orbit-components/src/Alert/index.js.flow b/packages/orbit-components/src/Alert/index.js.flow
@@ -18,6 +18,7 @@ export type Props = {|
   +closable?: boolean,
   +suppressed?: boolean,
   +inlineActions?: React.Node,
+  +labelClose?: React.Node,
   +onClose?: () => void | Promise<any>,
   ...Globals,
   ...spaceAfter,

diff --git a/packages/orbit-components/src/Alert/index.tsx b/packages/orbit-components/src/Alert/index.tsx
@@ -19,7 +19,6 @@ import { rtlSpacing, right, left } from "../utils/rtl";
 import getSpacingToken from "../common/getSpacingToken";
 import { Item } from "../List/ListItem";
 import { StyledText } from "../Text";
-import useTranslate from "../hooks/useTranslate";
 import { StyledHeading } from "../Heading";
 import media from "../utils/mediaQuery";
 
@@ -247,14 +246,15 @@ const AlertCloseButton = ({
   hasChildren,
   dataTest,
   onClick,
+  labelClose,
   icon,
 }: {
   hasChildren: boolean;
   dataTest: string;
+  labelClose?: React.ReactNode;
   onClick?: Common.Callback;
   icon: React.ReactNode;
 }) => {
-  const translate = useTranslate();
   return (
     <CloseContainer hasChildren={hasChildren}>
       <ButtonLink
@@ -263,7 +263,7 @@ const AlertCloseButton = ({
         size="small"
         iconLeft={icon}
         type="secondary"
-        title={translate("button_close")}
+        title={labelClose}
       />
     </CloseContainer>
   );
@@ -282,6 +282,7 @@ const Alert = (props: Props) => {
     spaceAfter,
     suppressed,
     inlineActions,
+    labelClose,
   } = props;
   return (
     <StyledAlert
@@ -320,6 +321,7 @@ const Alert = (props: Props) => {
           hasChildren={!!children}
           dataTest={CLOSE_BUTTON_DATA_TEST}
           onClick={onClose}
+          labelClose={labelClose}
           icon={<Close size="small" color={type} />}
         />
       )}

diff --git a/packages/orbit-components/src/Alert/types.d.ts b/packages/orbit-components/src/Alert/types.d.ts
@@ -13,6 +13,7 @@ export interface Props extends Common.Globals, Common.SpaceAfter {
   readonly icon?: React.ReactNode;
   readonly closable?: boolean;
   readonly inlineActions?: React.ReactNode;
+  readonly labelClose?: React.ReactNode;
   readonly onClose?: Common.Callback;
   readonly suppressed?: boolean;
 }