diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md index 25ad916..b6e4e69 100644 --- 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 index 0adafd5..099e8cf 100644 --- 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 index 5bda500..155441a 100644 --- 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;