Skip to content

Commit

Permalink
Merge branch 'main' into DATAUI-1616(UXRFC-199)-Slider
Browse files Browse the repository at this point in the history
  • Loading branch information
Arucard89 authored Jan 15, 2024
2 parents 72a830b + 9693147 commit fd16319
Show file tree
Hide file tree
Showing 14 changed files with 154 additions and 80 deletions.
16 changes: 16 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
# Changelog

## [5.27.0](https://github.com/gravity-ui/uikit/compare/v5.26.0...v5.27.0) (2024-01-10)


### Features

* **Disclosure:** allow use React.Node as summary ([#1233](https://github.com/gravity-ui/uikit/issues/1233)) ([3180060](https://github.com/gravity-ui/uikit/commit/31800603eaf6eaaab4c9849b1af12e9e6a53b5f7))


### Bug Fixes

* **Disclosure:** component size should not be used for its content ([#1234](https://github.com/gravity-ui/uikit/issues/1234)) ([c721640](https://github.com/gravity-ui/uikit/commit/c721640074baf0f5ae04ba4efaa2e187fa590e9c))
* **Pagination:** fix total page calculation ([#1237](https://github.com/gravity-ui/uikit/issues/1237)) ([8f1af66](https://github.com/gravity-ui/uikit/commit/8f1af66dd7de4dc13c33cc58e4f73715802c02cb))
* **Select:** activate first clickable item ([#1228](https://github.com/gravity-ui/uikit/issues/1228)) ([13b921e](https://github.com/gravity-ui/uikit/commit/13b921e8384108bf1ca71941e0a5908191cb325e))
* **Select:** add 100% width to default labels ([#1239](https://github.com/gravity-ui/uikit/issues/1239)) ([5bd5edd](https://github.com/gravity-ui/uikit/commit/5bd5edd63c5755a52003967b4d3e822983f5033a))
* **ThemeProvider:** fix rootClassName update ([#1231](https://github.com/gravity-ui/uikit/issues/1231)) ([4f0f099](https://github.com/gravity-ui/uikit/commit/4f0f09946023d039b8d1fed3c198d1888959f7a5))

## [5.26.0](https://github.com/gravity-ui/uikit/compare/v5.25.0...v5.26.0) (2023-12-26)


Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gravity-ui/uikit",
"version": "5.26.0",
"version": "5.27.0",
"description": "Gravity UI base styling and components",
"license": "MIT",
"repository": {
Expand Down
74 changes: 39 additions & 35 deletions src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import {Icon} from '../Icon';
import {colorText} from '../Text';
import {Flex, spacing} from '../layout';

import {AlertAction} from './AlertAction';
import {AlertActions} from './AlertActions';
import {AlertContextProvider} from './AlertContextProvider';
import {AlertIcon} from './AlertIcon';
import {AlertTitle} from './AlertTitle';
import {DEFAULT_ICON_SIZE, bAlert} from './constants';
Expand All @@ -28,48 +30,50 @@ export const Alert = (props: AlertProps) => {
qa,
} = props;

const icon = props.icon || <Alert.Icon theme={theme} view={view} />;
const title =
typeof props.title === 'string' ? <Alert.Title text={props.title} /> : props.title;
const actions = Array.isArray(props.actions) ? (
<Alert.Actions items={props.actions} parentLayout={layout} />
) : (
props.actions
);

return (
<Card
style={style}
className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
theme={theme}
view={view}
qa={qa}
>
<Flex gap="3" alignItems={align}>
{icon}
<Flex direction={layout === 'vertical' ? 'column' : 'row'} gap="5" grow>
<Flex gap="2" grow className={bAlert('text-content')}>
<Flex direction="column" gap="1" grow justifyContent={align}>
{title}
{message}
<AlertContextProvider layout={layout} view={view}>
<Card
style={style}
className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
theme={theme}
view={view}
qa={qa}
>
<Flex gap="3" alignItems={align}>
{props.icon || <Alert.Icon theme={theme} view={view} />}
<Flex direction={layout === 'vertical' ? 'column' : 'row'} gap="5" grow>
<Flex gap="2" grow className={bAlert('text-content')}>
<Flex direction="column" gap="1" grow justifyContent={align}>
{typeof props.title === 'string' ? (
<Alert.Title text={props.title} />
) : (
props.title
)}
{message}
</Flex>
</Flex>
{Array.isArray(props.actions) ? (
<Alert.Actions items={props.actions} />
) : (
props.actions
)}
</Flex>
{actions}
{onClose && (
<Button view="flat" onClick={onClose}>
<Icon
data={Xmark}
size={DEFAULT_ICON_SIZE}
className={colorText({color: 'secondary'})}
/>
</Button>
)}
</Flex>
{onClose && (
<Button view="flat" onClick={onClose}>
<Icon
data={Xmark}
size={DEFAULT_ICON_SIZE}
className={colorText({color: 'secondary'})}
/>
</Button>
)}
</Flex>
</Card>
</Card>
</AlertContextProvider>
);
};

Alert.Icon = AlertIcon;
Alert.Title = AlertTitle;
Alert.Actions = AlertActions;
Alert.Action = AlertAction;
12 changes: 12 additions & 0 deletions src/components/Alert/AlertAction.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';

import {Button} from '../Button';

import type {AlertActionProps} from './types';
import {useAlertContext} from './useAlertContext';

export const AlertAction = (props: AlertActionProps) => {
const {view} = useAlertContext();

return <Button view={view === 'filled' ? 'normal-contrast' : undefined} {...props} />;
};
20 changes: 9 additions & 11 deletions src/components/Alert/AlertActions.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
import React from 'react';

import {Button} from '../Button';
import {Flex} from '../layout';

import {AlertAction} from './AlertAction';
import {bAlert} from './constants';
import type {AlertActionsProps} from './types';
import {useAlertContext} from './useAlertContext';

export const AlertActions = ({items, children, className}: AlertActionsProps) => {
const {layout} = useAlertContext();

export const AlertActions = ({
items,
children,
parentLayout = 'vertical',
className,
}: AlertActionsProps) => {
return (
<Flex
className={bAlert('actions', {minContent: parentLayout === 'horizontal'}, className)}
className={bAlert('actions', {minContent: layout === 'horizontal'}, className)}
direction="row"
gap="3"
wrap
alignItems={parentLayout === 'horizontal' ? 'center' : 'flex-start'}
alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}
>
{items?.map(({handler, text}, i) => (
<Button key={i} onClick={handler}>
<AlertAction key={i} onClick={handler}>
{text}
</Button>
</AlertAction>
)) || children}
</Flex>
);
Expand Down
5 changes: 5 additions & 0 deletions src/components/Alert/AlertContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from 'react';

import type {AlertContextType} from './types';

export const AlertContext = React.createContext<AlertContextType | null>(null);
8 changes: 8 additions & 0 deletions src/components/Alert/AlertContextProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';

import {AlertContext} from './AlertContext';
import type {AlertContextProviderProps} from './types';

export const AlertContextProvider = ({layout, view, children}: AlertContextProviderProps) => {
return <AlertContext.Provider value={{layout, view}}>{children}</AlertContext.Provider>;
};
24 changes: 12 additions & 12 deletions src/components/Alert/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,19 +93,19 @@ of text.
<!--LANDING_BLOCK
<ExampleBlock
code={`
<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>} />
<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>} />
<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>} />
<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>} />
`}>
<UIKit.Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<UIKit.Button>button</UIKit.Button>} />
<UIKit.Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<UIKit.Button>button</UIKit.Button>} />
<UIKit.Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
<UIKit.Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>}/>
<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>}/>
<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>}/>
<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>}/>
```

<!--/GITHUB_BLOCK-->
Expand Down Expand Up @@ -202,19 +202,19 @@ or if the icon must be in the middle of the card.
<!--LANDING_BLOCK
<ExampleBlock
code={`
<Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<Button>button</Button>} />
<Alert align="center" theme="info" title="Center" message="Center align" actions={<Button>button</Button>} align="center"/>
<Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<Alert.Action>button</Alert.Action>} />
<Alert align="center" theme="info" title="Center" message="Center align" actions={<Alert.Action>button</Alert.Action>} align="center"/>
`}>
<UIKit.Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<UIKit.Button>button</UIKit.Button>} />
<UIKit.Alert align="center" theme="info" title="Center" message="Center align" actions={<UIKit.Button>button</UIKit.Button>} align="center"/>
<UIKit.Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
<UIKit.Alert align="center" theme="info" title="Center" message="Center align" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} align="center"/>
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Alert align="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>}/>
<Alert align="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>}/>
<Alert align="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>}/>
<Alert align="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>}/>
```

<!--/GITHUB_BLOCK-->
Expand Down
2 changes: 1 addition & 1 deletion src/components/Alert/__snapshots__/Alert.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
style="flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 12px; align-items: center;"
>
<button
class="yc-button yc-button_view_normal yc-button_size_m yc-button_pin_round-round"
class="yc-button yc-button_view_normal-contrast yc-button_size_m yc-button_pin_round-round"
type="button"
>
<span
Expand Down
17 changes: 12 additions & 5 deletions src/components/Alert/__stories__/Alert.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const stories: AlertProps[] = [
theme: 'danger',
view: 'filled',
onClose: () => alert('Close button pressed'),
actions: <Button>{right}</Button>,
actions: <Alert.Action>{right}</Alert.Action>,
},
{
title: <div dangerouslySetInnerHTML={{__html: '<b>Some html title</b>'}} />,
Expand All @@ -35,13 +35,20 @@ const stories: AlertProps[] = [
view: 'outlined',
onClose: () => alert('Close button pressed'),
},
{
title,
message,
view: 'outlined',
onClose: () => alert('Close button pressed'),
actions: [{text: left}, {text: center}, {text: left}],
},
{
message,
theme: 'info',
view: 'filled',
actions: (
<Alert.Actions>
<Button>{center}</Button>
<Alert.Action>{center}</Alert.Action>
</Alert.Actions>
),
},
Expand Down Expand Up @@ -81,8 +88,8 @@ const stories: AlertProps[] = [
corners: 'square',
onClose: () => {},
actions: (
<Alert.Actions parentLayout="horizontal">
<Button view="outlined">{left}</Button>
<Alert.Actions>
<Alert.Action view="outlined">{left}</Alert.Action>
</Alert.Actions>
),
},
Expand All @@ -92,7 +99,7 @@ const stories: AlertProps[] = [
theme: 'warning',
view: 'outlined',
layout: 'horizontal',
actions: <Button>{right}</Button>,
actions: <Alert.Action>{right}</Alert.Action>,
},
{
message,
Expand Down
8 changes: 7 additions & 1 deletion src/components/Alert/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,8 @@
export {Alert} from './Alert';
export type {AlertProps} from './types';
export type {
AlertProps,
AlertTitleProps,
AlertActionProps,
AlertActionsProps,
AlertIconProps,
} from './types';
31 changes: 19 additions & 12 deletions src/components/Alert/types.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type React from 'react';

import type {ButtonProps} from '../Button';
import type {QAProps} from '../types';

export type AlertTheme =
Expand All @@ -11,9 +12,24 @@ export type AlertTheme =
| 'danger'
| 'utility';
export type AlertView = 'filled' | 'outlined';
export type AlertLayout = 'vertical' | 'horizontal';
export type AlertCorners = 'rounded' | 'square';

export interface AlertProps extends QAProps {
export type AlertContextType = {
/**
* Override actions position
*
* variants:
* - `vertical` - bottom (default);
* - `horizontal` - right;
*/
layout: AlertLayout;
view: AlertView;
};

export type AlertContextProviderProps = React.PropsWithChildren<AlertContextType>;

export interface AlertProps extends QAProps, Partial<AlertContextType> {
title?: React.ReactNode;
message?: React.ReactNode;
theme?: AlertTheme;
Expand All @@ -25,15 +41,6 @@ export interface AlertProps extends QAProps {
* @default - normal
*/
corners?: AlertCorners;
/**
* Override actions position
*
* variants:
* - `vertical` - bottom (default);
* - `horizontal` - right;
*/
layout?: 'vertical' | 'horizontal';
view?: AlertView;
onClose?: () => void;
/**
* Add you Actions to alert component:
Expand All @@ -45,7 +52,7 @@ export interface AlertProps extends QAProps {
* ```tsx
* actions: (
* <Alert.Actions>
* <Button onClick={...}>...</Button>
* <Alert.Action onClick={...}>...</Alert.Action>
* </Alert.Actions>
* )
* ```
Expand Down Expand Up @@ -88,8 +95,8 @@ export interface AlertActionsProps {
className?: string;
items?: AlertAction[];
children?: React.ReactNode | React.ReactNode[];
parentLayout?: 'vertical' | 'horizontal';
}
export interface AlertActionProps extends ButtonProps {}
export interface AlertTitleProps {
className?: string;
text: string;
Expand Down
Loading

0 comments on commit fd16319

Please sign in to comment.