diff --git a/CHANGELOG.md b/CHANGELOG.md index 00e2d2ab..8fdfa8c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,20 @@ # Changelog +## [2.6.0](https://github.com/gravity-ui/components/compare/v2.5.1...v2.6.0) (2023-10-23) + + +### Features + +* **ChangelogDialog:** change style, add link, events ([#105](https://github.com/gravity-ui/components/issues/105)) ([3c119c7](https://github.com/gravity-ui/components/commit/3c119c7783e622ed6bc56be2e6625a13c29a4914)) +* **FilePreview:** add disabled prop for action ([#113](https://github.com/gravity-ui/components/issues/113)) ([58d10ad](https://github.com/gravity-ui/components/commit/58d10adbefe51a7447b420cafb13bfab14378abd)) + +## [2.5.1](https://github.com/gravity-ui/components/compare/v2.5.0...v2.5.1) (2023-10-10) + + +### Bug Fixes + +* **HelpPopover:** set default button type ([#109](https://github.com/gravity-ui/components/issues/109)) ([4ee6106](https://github.com/gravity-ui/components/commit/4ee6106430d65b7da48428d79503b49f52100e89)) + ## [2.5.0](https://github.com/gravity-ui/components/compare/v2.4.2...v2.5.0) (2023-10-04) diff --git a/package-lock.json b/package-lock.json index e37cd09a..aeb92a6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/components", - "version": "2.5.0", + "version": "2.6.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gravity-ui/components", - "version": "2.5.0", + "version": "2.6.0", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", diff --git a/package.json b/package.json index 8e990c5d..db39b705 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gravity-ui/components", - "version": "2.5.0", + "version": "2.6.0", "description": "", "license": "MIT", "main": "./build/cjs/index.js", diff --git a/src/components/ChangelogDialog/ChangelogDialog.scss b/src/components/ChangelogDialog/ChangelogDialog.scss index 22b81a8f..3a39178f 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.scss +++ b/src/components/ChangelogDialog/ChangelogDialog.scss @@ -8,14 +8,14 @@ $maxItemsHeight: 70vh; width: $width; &__full-list-link-icon { - margin-left: 4px; + margin-left: var(--g-spacing-1); vertical-align: middle; } &__items-container { max-height: $maxItemsHeight; overflow-y: auto; - margin-bottom: 20px; + margin-bottom: var(--g-spacing-5); #{$block}__item:last-child { margin-bottom: 0; @@ -23,7 +23,7 @@ $maxItemsHeight: 70vh; } &__item { - margin-bottom: 32px; + margin-bottom: var(--g-spacing-8); } &__empty-placeholder { diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx index 9bf778ad..bd1a7448 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.tsx +++ b/src/components/ChangelogDialog/ChangelogDialog.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {ArrowUpRightFromSquare} from '@gravity-ui/icons'; -import {Dialog, Icon, Link} from '@gravity-ui/uikit'; import type {DialogProps} from '@gravity-ui/uikit'; +import {Dialog, Icon, Link} from '@gravity-ui/uikit'; import {block} from '../utils/cn'; @@ -22,6 +22,7 @@ export interface ChangelogDialogProps { disableBodyScrollLock?: boolean; disableOutsideClick?: boolean; onClose: DialogProps['onClose']; + onLinkClick?: (link: string) => void; onStoryClick?: (storyId: string) => void; } @@ -39,6 +40,7 @@ export function ChangelogDialog({ disableOutsideClick, onClose, onStoryClick, + onLinkClick, }: ChangelogDialogProps) { const idRef = React.useRef(); idRef.current = idRef.current || getNextId(); @@ -72,6 +74,7 @@ export function ChangelogDialog({ className={b('item')} data={item} onStoryClick={onStoryClick} + onLinkClick={onLinkClick} /> )) ) : ( diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx index 278e6e78..64975335 100644 --- a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx +++ b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx @@ -30,6 +30,7 @@ const items: ChangelogItem[] = [ description: 'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.', storyId: 'someStoryId1', + link: 'https://github.com/gravity-ui/uikit', }, { date: '23 Jun 2022', @@ -37,6 +38,7 @@ const items: ChangelogItem[] = [ title: 'New components', description: 'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.', + link: 'https://github.com/gravity-ui/uikit', }, { date: '15 Jun 2022', @@ -65,6 +67,7 @@ const items: ChangelogItem[] = [ description: 'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.', storyId: 'someStoryId3', + link: 'https://github.com/gravity-ui/uikit', }, { date: '10 May 2022', @@ -95,8 +98,9 @@ const DefaultTemplate: StoryFn = (props: ChangelogDialogPr { + onClose={(event, reason) => { setVisible(false); + props.onClose?.(event, reason); }} /> @@ -108,8 +112,16 @@ export const Default = DefaultTemplate.bind({}); Default.args = { open: false, items, - fullListLink: 'https://github.com/gravity-ui/uikit', onStoryClick: (storyId) => { - console.log(storyId); + // eslint-disable-next-line no-console + console.log('story click', storyId); + }, + onLinkClick: (link) => { + // eslint-disable-next-line no-console + console.log('link click', link); + }, + onClose: () => { + // eslint-disable-next-line no-console + console.log('close'); }, }; diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss index d14e046f..78b2b805 100644 --- a/src/components/ChangelogDialog/components/Item/Item.scss +++ b/src/components/ChangelogDialog/components/Item/Item.scss @@ -2,7 +2,7 @@ @use '../../../variables'; $block: '.#{variables.$ns}changelog-dialog-item'; -$metaWidth: 124px; +$metaWidth: 80px; #{$block} { display: flex; @@ -17,30 +17,34 @@ $metaWidth: 124px; } &__label-new { - margin-top: 4px; + margin-top: var(--g-spacing-2); } &__content { flex: 1; - margin-left: 16px; + margin-left: var(--g-spacing-5); } &__title { margin: 0; - @include mixins.text-subheader-3(); + @include mixins.text-subheader-2(); } &__image { - margin-top: 12px; + margin-top: var(--g-spacing-3); border-radius: 16px; overflow: hidden; } &__description { - margin-top: 12px; + margin-top: var(--g-spacing-3); } - &__story-button { - margin-top: 16px; + &__button { + margin-top: var(--g-spacing-4); + } + + &__button + &__button { + margin-left: var(--g-spacing-4); } } diff --git a/src/components/ChangelogDialog/components/Item/Item.tsx b/src/components/ChangelogDialog/components/Item/Item.tsx index cb224be6..e9bbf000 100644 --- a/src/components/ChangelogDialog/components/Item/Item.tsx +++ b/src/components/ChangelogDialog/components/Item/Item.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import {CirclePlay} from '@gravity-ui/icons'; import {Button, Icon, Label} from '@gravity-ui/uikit'; @@ -16,9 +16,22 @@ export interface ItemProps { className?: string; data: ChangelogItem; onStoryClick?: (storyId: string) => void; + onLinkClick?: (link: string) => void; } -export function Item({className, data, onStoryClick}: ItemProps) { +export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) { + const handleLinkClick = useCallback(() => { + if (onLinkClick && data.link) { + onLinkClick(data.link); + } + }, [data.link, onLinkClick]); + + const handleStoryClick = useCallback(() => { + if (onStoryClick && data.storyId) { + onStoryClick(data.storyId); + } + }, [data.storyId, onStoryClick]); + return (
@@ -42,15 +55,22 @@ export function Item({className, data, onStoryClick}: ItemProps) { {data.description ? (
{data.description}
) : null} + {data.link ? ( + + ) : null} {data.storyId && onStoryClick ? (