From dd207e395a5e90e4c7cfb35c0df8a9b2efc448a6 Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Thu, 3 Oct 2024 19:27:50 +0300 Subject: [PATCH] feat(TopPanel): add align prop --- src/components/AsideHeader/README.md | 25 ++++++++++--------- .../AsideHeader/components/TopPanel.tsx | 1 + src/components/types.ts | 1 + 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md index bee887d..3df0f50 100644 --- a/src/components/AsideHeader/README.md +++ b/src/components/AsideHeader/README.md @@ -175,18 +175,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 6a333eb..3565b08 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -81,6 +81,7 @@ export type AsideHeaderTopAlertProps = { view?: AlertProps['view']; theme?: AlertProps['theme']; actions?: AlertProps['actions']; + align?: AlertProps['align']; closable?: boolean; centered?: boolean; dense?: boolean;