diff --git a/packages/plasma-homeds/src/components/Note/Note.config.ts b/packages/plasma-homeds/src/components/Note/Note.config.ts index bd40c5f739..94c62f0912 100644 --- a/packages/plasma-homeds/src/components/Note/Note.config.ts +++ b/packages/plasma-homeds/src/components/Note/Note.config.ts @@ -58,6 +58,9 @@ export const config = { ${tokens.contentGap}: 0.125rem; ${tokens.contentBeforeAlignSelf}: center; + ${tokens.contentAfterAlignSelf}: center; + + ${tokens.contentAfterPadding}: 0 1.625rem 0 0; ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; diff --git a/packages/plasma-homeds/src/components/Note/Note.stories.tsx b/packages/plasma-homeds/src/components/Note/Note.stories.tsx index ba8fa97ca1..045a4eec8a 100644 --- a/packages/plasma-homeds/src/components/Note/Note.stories.tsx +++ b/packages/plasma-homeds/src/components/Note/Note.stories.tsx @@ -17,6 +17,13 @@ const { meta: META, Default } = getNoteStories({ }, defaultArgs: { size: 'm', + enableContentAfter: false, + }, + additionalArgTypes: { + enableContentAfter: { + control: { type: 'boolean' }, + table: { category: 'layout' }, + }, }, disablePropsList: ['size'], getIconSize: (_size, isScalable) => (isScalable ? 's' : 'xs'), diff --git a/packages/plasma-new-hope/src/components/Note/Note.styles.ts b/packages/plasma-new-hope/src/components/Note/Note.styles.ts index 1ce974afc9..512611e5ff 100644 --- a/packages/plasma-new-hope/src/components/Note/Note.styles.ts +++ b/packages/plasma-new-hope/src/components/Note/Note.styles.ts @@ -20,6 +20,12 @@ export const ContentBefore = styled.div` flex-shrink: 0; `; +export const ContentAfter = styled.div<{ hasClose?: boolean }>` + display: flex; + flex-shrink: 0; + padding: ${({ hasClose }) => (hasClose ? `var(${tokens.contentAfterPadding}, 0)` : 0)}; +`; + export const ContentWrapper = styled.div` display: flex; flex-direction: row; diff --git a/packages/plasma-new-hope/src/components/Note/Note.tokens.ts b/packages/plasma-new-hope/src/components/Note/Note.tokens.ts index ec19004d99..15b955f265 100644 --- a/packages/plasma-new-hope/src/components/Note/Note.tokens.ts +++ b/packages/plasma-new-hope/src/components/Note/Note.tokens.ts @@ -18,6 +18,7 @@ export const tokens = { color: '--plasma-note-color', contentBeforeColor: '--plasma-note-content-before-color', contentBeforeAlignSelf: '--plasma-note-content-before-align-self', + contentAfterAlignSelf: '--plasma-note-content-after-align-self', padding: '--plasma-note-padding', paddingBottomWithActionContent: '--plasma-note-padding-bottom-with-action-content', @@ -31,6 +32,8 @@ export const tokens = { fixedContentBeforeHeight: '--plasma-note-fixed-content-before-height', fixedContentBeforePadding: '--plasma-note-fixed-content-before-padding', + contentAfterPadding: '--plasma-note-content-after-padding', + titleFontFamily: '--plasma-note-title-font-family', titleFontSize: '--plasma-note-title-font-size', titleFontStyle: '--plasma-note-title-font-style', diff --git a/packages/plasma-new-hope/src/components/Note/Note.tsx b/packages/plasma-new-hope/src/components/Note/Note.tsx index 2afa68a23b..8bef7be526 100644 --- a/packages/plasma-new-hope/src/components/Note/Note.tsx +++ b/packages/plasma-new-hope/src/components/Note/Note.tsx @@ -13,6 +13,7 @@ import { ActionContentContainer, base, CloseIconWrapper, + ContentAfter, ContentBefore, ContentWrapper, Text, @@ -33,6 +34,7 @@ export const noteRoot = (Root: RootProps) => text, contentBefore, contentBeforeSizing = 'fixed', + contentAfter, size, view, stretch, @@ -130,7 +132,7 @@ export const noteRoot = (Root: RootProps) => useLayoutEffect(() => { setTruncatedText(); - }, [text, title, contentBefore, contentBeforeSizing, stretch, orientation]); + }, [text, title, contentBefore, contentBeforeSizing, contentAfter, stretch, orientation]); useEffect(() => { if (!contentBeforeRef?.current) { @@ -187,6 +189,9 @@ export const noteRoot = (Root: RootProps) => )} + {contentAfter && ( + {contentAfter} + )} {actionContent && {actionContent}} {hasClose && ( diff --git a/packages/plasma-new-hope/src/components/Note/Note.types.ts b/packages/plasma-new-hope/src/components/Note/Note.types.ts index 17389cdfcb..58088e99f6 100644 --- a/packages/plasma-new-hope/src/components/Note/Note.types.ts +++ b/packages/plasma-new-hope/src/components/Note/Note.types.ts @@ -18,6 +18,10 @@ export type NoteProps = { * @default 'fixed' */ contentBeforeSizing?: 'fixed' | 'scalable'; + /** + * Слот под иконку справа от контента. + */ + contentAfter?: ReactNode; /** * Компонент растягивается на всю доступную ширину и высоту. */ diff --git a/packages/plasma-new-hope/src/components/Note/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Note/variations/_size/base.ts index a86ae7f1a7..336e5c791c 100644 --- a/packages/plasma-new-hope/src/components/Note/variations/_size/base.ts +++ b/packages/plasma-new-hope/src/components/Note/variations/_size/base.ts @@ -3,6 +3,7 @@ import { css } from 'styled-components'; import { classes, privateTokens, tokens } from '../../Note.tokens'; import { ActionContentContainer, + ContentAfter, ContentBefore, ContentWrapper, Text, @@ -42,6 +43,10 @@ export const base = css` box-sizing: border-box; } + ${ContentAfter} { + align-self: var(${tokens.contentAfterAlignSelf}, auto); + } + ${TextBox} { gap: var(${tokens.contentGap}); min-height: var(${tokens.fixedContentBeforeHeight}); diff --git a/utils/plasma-sb-utils/src/components/Note/meta.ts b/utils/plasma-sb-utils/src/components/Note/meta.ts index 49bb0f28c9..ec87b3feee 100644 --- a/utils/plasma-sb-utils/src/components/Note/meta.ts +++ b/utils/plasma-sb-utils/src/components/Note/meta.ts @@ -11,7 +11,7 @@ type CreateMetaProps = { disablePropsList?: string[]; }; -const commonDisabledArgs = ['contentBefore', 'onCloseButtonClick']; +const commonDisabledArgs = ['contentBefore', 'contentAfter', 'onCloseButtonClick']; export const createMeta = ({ component, diff --git a/utils/plasma-sb-utils/src/components/Note/stories.tsx b/utils/plasma-sb-utils/src/components/Note/stories.tsx index f26b373134..6a22d14919 100644 --- a/utils/plasma-sb-utils/src/components/Note/stories.tsx +++ b/utils/plasma-sb-utils/src/components/Note/stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { IconPlasma } from '@salutejs/plasma-icons'; +import { IconDisclosureRight, IconPlasma } from '@salutejs/plasma-icons'; import { getIconSize as defaultGetIconSize } from './fixtures'; @@ -15,7 +15,7 @@ export const createDefaultStory = ( ) => { const { LinkButton } = Components; - return ({ enableContentBefore, enableHeightControl, hasActionContent, ...args }: any) => { + return ({ enableContentBefore, enableContentAfter, enableHeightControl, hasActionContent, ...args }: any) => { return (
) : undefined } + contentAfter={enableContentAfter ? : undefined} height={enableHeightControl ? args.height : undefined} actionContent={ hasActionContent ? ( diff --git a/website/plasma-homeds-docs/docs/components/Note.mdx b/website/plasma-homeds-docs/docs/components/Note.mdx index e95a6c6b59..5cbf39c781 100644 --- a/website/plasma-homeds-docs/docs/components/Note.mdx +++ b/website/plasma-homeds-docs/docs/components/Note.mdx @@ -138,6 +138,28 @@ export function App() { } ``` +### Контент `contentAfter` + +Свойство `contentAfter` позволяет разместить произвольный контент справа от основного текста. + +```tsx live +import React from 'react'; +import { Note } from '@salutejs/plasma-homeds'; +import { IconDisclosureRight } from '@salutejs/plasma-icons'; + +export function App() { + return ( + } + /> + ); +} +``` + ### Дополнительный контент `actionContent` Свойство `actionContent` позволяет разместить произвольный контент (например, кнопку) после основного текста.