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

Author: Lunory

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
 

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}

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;