feat(TopPanel): add align prop (#317)

gravity-ui · Nov 12, 2024 · 7f6171f · 7f6171f
1 parent b7dc21d
commit 7f6171f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md
@@ -176,18 +176,19 @@ Top Alert can be useful for displaying important information that users need to
 
 You can customize the inner content, make alert closeable if necessary. For reading top alert height see value from CSS variable `--gn-aside-top-panel-height`.
 
-| Name            | Description                                                        |                                                Type                                                |   Default   |
-| :-------------- | :----------------------------------------------------------------- | :------------------------------------------------------------------------------------------------: | :---------: |
-| actions         | Array of buttons or full custom components                         |  [`AlertActions`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#properties)   |             |
-| centered        | Centering all content                                              |                                             `boolean`                                              |   `false`   |
-| closable        | Show close button and make possible to pass `onCloseTopAlert` prop |                                             `boolean`                                              |   `false`   |
-| dense           | Add top, bottom paddings to `TopAlert` container                   |                                             `boolean`                                              |   `false`   |
-| icon            | Override default icon                                              |    [`AlertIcon`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#properties)    |             |
-| message         | Message of the alert                                               | [`AlertMessage`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#alert-message) |             |
-| onCloseTopAlert | Callback will be called when clicking on the close button          |                                            `() => void`                                            |             |
-| title           | Title of the alert                                                 |   [`AlertTitle`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#alert-title)   |             |
-| theme           | Alert appearance                                                   |      [`AlertTheme`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#theme)      | `"warning"` |
-| view            | Enable/disable background color of the alert                       |       [`AlertView`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#view)       | `"filled"`  |
+| Name            | Description                                                             |                                                Type                                                |   Default    |
+| :-------------- | :---------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------: | :----------: |
+| actions         | Array of buttons or full custom components                              |  [`AlertActions`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#properties)   |              |
+| centered        | Centering all content                                                   |                                             `boolean`                                              |   `false`    |
+| align           | Determines how content inside the Alert component is vertically aligned |      [`AlertAlign`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#align)      | `"baseline"` |
+| closable        | Show close button and make possible to pass `onCloseTopAlert` prop      |                                             `boolean`                                              |   `false`    |
+| dense           | Add top, bottom paddings to `TopAlert` container                        |                                             `boolean`                                              |   `false`    |
+| icon            | Override default icon                                                   |    [`AlertIcon`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#properties)    |              |
+| message         | Message of the alert                                                    | [`AlertMessage`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#alert-message) |              |
+| onCloseTopAlert | Callback will be called when clicking on the close button               |                                            `() => void`                                            |              |
+| title           | Title of the alert                                                      |   [`AlertTitle`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#alert-title)   |              |
+| theme           | Alert appearance                                                        |      [`AlertTheme`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#theme)      | `"warning"`  |
+| view            | Enable/disable background color of the alert                            |       [`AlertView`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#view)       |  `"filled"`  |
 
 ## CSS API
 

diff --git a/src/components/AsideHeader/components/TopPanel.tsx b/src/components/AsideHeader/components/TopPanel.tsx
@@ -41,6 +41,7 @@ export const TopPanel = ({topAlert}: Props) => {
                         })}
                         corners="square"
                         layout="horizontal"
+                        align={topAlert.align}
                         theme={topAlert.theme || 'warning'}
                         view={topAlert.view}
                         icon={topAlert.icon}

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -83,6 +83,7 @@ export type AsideHeaderTopAlertProps = {
     view?: AlertProps['view'];
     theme?: AlertProps['theme'];
     actions?: AlertProps['actions'];
+    align?: AlertProps['align'];
     closable?: boolean;
     centered?: boolean;
     dense?: boolean;