@snack-uikit/notification 0.13.16 → 0.13.17-preview-4eb2b89e.0

package/README.md

@@ -47,18 +47,20 @@ const cards = [
     label: 'Mark all as read',
     onClick() {},
   }}
-  chips={[
-    {
-      label: 'all',
-      checked: true,
-      onChange() { /* */ },
-    },
-    {
-      label: 'unread',
-      checked: false,
-      onChange() { /* */ },
-    },
-  ]}
+  segments={{
+    items: [
+      {
+        value: 'all',
+        label: 'all',
+      },
+      {
+        value: 'unread',
+        label: 'unread',
+      },
+    ],
+    value: 'all',
+    onChange: (value) => { /* */ },
+  }}
   content={
     !cards.length ? (
       <NotificationPanel.Blank
@@ -81,71 +83,24 @@ const cards = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| date* | `string` | - | Дата уведомления |
-| content* | `ReactNode` | - | Контент уведомления |
-| title* | `string` | - | Заголовок уведомления |
-| id* | `string` | - | Идентификатор уведомления |
-| appearance | enum Appearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral | Тип уведомления |
-| label | `string` | - | Лейбл перед заголовком |
-| unread | `boolean` | - | Управление состоянием прочитано/не прочитано |
-| link | `PickLinkProps<LinkElement, "text" \| "insideText" \| "truncateVariant">` | - | Ссылка |
-| onClick | `MouseEventHandler<HTMLDivElement>` | - | Колбэк клика по карточке |
-| onVisible | `(cardId: string) => void` | - | Колбэк при попадании карточки в область видимости на 80% |
-| primaryButton | `Omit<ButtonTonalProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка главного действия у карточки |
-| secondaryButton | `Omit<ButtonSimpleProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка второстепенного действия у карточки |
-| actions | `Action[]` | - | Дополнительные действия у карточки |
-| className | `string` | - | CSS-класс |
 ## NotificationPanel
 Компонент панели для уведомлений
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| title* | `string` | - | Заголовок панели |
-| settings | `NotificationPanelSettingsProps` | - | Кнопка настроек и выпадающий список |
-| chips | `Omit<ChipToggleProps, "data-test-id" \| "size">[]` | - | Чипы для фильтрации |
-| readAllButton | `Omit<ButtonFunctionProps, "data-test-id"> & { onClick: MouseEventHandler<HTMLElement>; }` | - | Кнопка в "шапке" панели |
-| footerButton | `{ label: string; onClick: MouseEventHandler<HTMLButtonElement>; }` | - | Кнопка внизу панели |
-| className | `string` | - | CSS-класс |
-| loading | `boolean` | - | Состояние загрузки |
-| content | `ReactNode` | - | Контент для отрисовки (e.g NotificationCard \| NotificationPanel.Blank) |
-| skeletonsAmount | `number` | 2 | Количество скелетонов карточек для отображения при загрузке |
-| scrollEndRef | `RefObject<HTMLDivElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
-| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 ## NotificationPanel.Blank
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| title | `string` | - | Заголовок |
-| className | `string` | - | CSS-класс |
-| icon | `Pick<IconPredefinedProps, "appearance" \| "icon" \| "decor">` | - | Иконка |
-| description | `ReactNode` | - | Подзаголовок |
 ## NotificationPanel.Divider
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| text* | `string` | - | Текст разделителя |
-| className | `string` | - | CSS-класс |
 ## NotificationPanelPopover
 Компонент-обёртка для NotificationPanel для использования как выпадающий элемент
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| content* | `ReactElement<NotificationPanelProps, typeof NotificationPanel>` | - |  |
-| contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
-| className | `string` | - | CSS-класс |
-| children | `ReactNode \| ChildrenFunction` | - | Триггер поповера (подробнее читайте ниже) |
-| triggerClassName | `string` | - | CSS-класс триггера |
-| open | `boolean` | - | Управляет состоянием показан/не показан. |
-| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
-| hoverDelayOpen | `number` | - | Задержка открытия по ховеру |
-| hoverDelayClose | `number` | - | Задержка закрытия по ховеру |
-| offset | `number` | 0 | Отступ поповера от его триггер-элемента (в пикселях). |
-| closeOnEscapeKey | `boolean` | true | Закрывать ли по нажатию на кнопку `Esc` |
-| triggerClickByKeys | `boolean` | true | Вызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = `click`) |
-| triggerRef | `ForwardedRef<HTMLElement \| ReferenceType>` | - | Ref ссылка на триггер |
-| closeOnPopstate | `boolean` | - | Закрывать ли поповер при пекреходе по истории браузера |
-| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | click | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
-| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | bottom-end | Положение поповера относительно своего триггера (children). |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ButtonFunctionProps } from '@snack-uikit/button';
-import { ChipToggleProps } from '@snack-uikit/chips';
+import { SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
@@ -10,8 +10,8 @@ export type NotificationPanelProps = WithSupportProps<{
     title: string;
     /** Кнопка настроек и выпадающий список */
     settings?: NotificationPanelSettingsProps;
-    /** Чипы для фильтрации */
-    chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
+    /** Сегменты для фильтрации */
+    segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
     /** Кнопка в "шапке" панели */
     readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
         onClick: ButtonFunctionProps['onClick'];
@@ -34,7 +34,7 @@ export type NotificationPanelProps = WithSupportProps<{
     scrollContainerRef?: RefObject<HTMLElement>;
 }>;
 /** Компонент панели для уведомлений */
-export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;

package/dist/cjs/components/NotificationPanel/NotificationPanel.js

@@ -17,13 +17,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NotificationPanel = NotificationPanel;
-const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
-const react_2 = require("react");
+const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
-const chips_1 = require("@snack-uikit/chips");
 const scroll_1 = require("@snack-uikit/scroll");
+const segmented_control_1 = require("@snack-uikit/segmented-control");
 const skeleton_1 = require("@snack-uikit/skeleton");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
 const typography_1 = require("@snack-uikit/typography");
@@ -38,7 +37,7 @@ function NotificationPanel(_a) {
   var {
       title,
       settings,
-      chips,
+      segments,
       readAllButton,
       footerButton,
       content,
@@ -48,8 +47,8 @@ function NotificationPanel(_a) {
       scrollContainerRef,
       className
     } = _a,
-    rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
-  const skeletons = (0, react_2.useMemo)(() => Array.from({
+    rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
+  const skeletons = (0, react_1.useMemo)(() => Array.from({
     length: skeletonsAmount
   }, (_, i) => i), [skeletonsAmount]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
@@ -68,14 +67,15 @@ function NotificationPanel(_a) {
         }), settings && (0, jsx_runtime_1.jsx)(components_2.NotificationPanelSettings, Object.assign({}, settings))]
       }), (0, jsx_runtime_1.jsxs)("div", {
         className: styles_module_scss_1.default.notificationPanelHeaderFunctions,
-        children: [(0, jsx_runtime_1.jsx)("div", {
+        children: [segments && (0, jsx_runtime_1.jsx)("div", {
           className: styles_module_scss_1.default.notificationPanelChips,
-          children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (0, react_1.createElement)(chips_1.ChipToggle, Object.assign({}, chip, {
-            key: chip.label,
-            "data-test-id": `${constants_1.TEST_IDS.chip}-${chip.label}`,
-            size: 'xs',
-            disabled: chip.disabled || loading
-          })))
+          children: (0, jsx_runtime_1.jsx)(segmented_control_1.SegmentedControl, Object.assign({}, segments, {
+            size: 's',
+            items: segments.items.map(item => Object.assign(Object.assign({}, item), {
+              disabled: item.disabled || loading
+            })),
+            "data-test-id": constants_1.TEST_IDS.segment
+          }))
         }), readAllButton && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({}, readAllButton, {
           size: 'xs',
           disabled: readAllButton.disabled || loading,

package/dist/cjs/components/NotificationPanel/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const TEST_IDS: {
     title: string;
-    chip: string;
+    segment: string;
     settings: {
         droplist: string;
         droplistTrigger: string;

package/dist/cjs/components/NotificationPanel/constants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TEST_IDS = void 0;
 exports.TEST_IDS = {
   title: 'notification-panel__title',
-  chip: 'notification-panel__chip',
+  segment: 'notification-panel__segment',
   settings: {
     droplist: 'notification-panel__settings__droplist',
     droplistTrigger: 'notification-panel__settings__droplist-trigger',

package/dist/esm/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ButtonFunctionProps } from '@snack-uikit/button';
-import { ChipToggleProps } from '@snack-uikit/chips';
+import { SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
@@ -10,8 +10,8 @@ export type NotificationPanelProps = WithSupportProps<{
     title: string;
     /** Кнопка настроек и выпадающий список */
     settings?: NotificationPanelSettingsProps;
-    /** Чипы для фильтрации */
-    chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
+    /** Сегменты для фильтрации */
+    segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
     /** Кнопка в "шапке" панели */
     readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
         onClick: ButtonFunctionProps['onClick'];
@@ -34,7 +34,7 @@ export type NotificationPanelProps = WithSupportProps<{
     scrollContainerRef?: RefObject<HTMLElement>;
 }>;
 /** Компонент панели для уведомлений */
-export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;

package/dist/esm/components/NotificationPanel/NotificationPanel.js

@@ -9,13 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
-import { ChipToggle } from '@snack-uikit/chips';
 import { Scroll } from '@snack-uikit/scroll';
+import { SegmentedControl } from '@snack-uikit/segmented-control';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
@@ -27,9 +26,9 @@ import { TEST_IDS } from './constants';
 import styles from './styles.module.css';
 /** Компонент панели для уведомлений */
 export function NotificationPanel(_a) {
-    var { title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
+    var { title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [_jsx("div", { className: styles.notificationPanelChips, children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: 'xs', disabled: chip.disabled || loading })))) }), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [segments && (_jsx("div", { className: styles.notificationPanelChips, children: _jsx(SegmentedControl, Object.assign({}, segments, { size: 's', items: segments.items.map(item => (Object.assign(Object.assign({}, item), { disabled: item.disabled || loading }))), "data-test-id": TEST_IDS.segment })) })), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
 }
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;

package/dist/esm/components/NotificationPanel/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const TEST_IDS: {
     title: string;
-    chip: string;
+    segment: string;
     settings: {
         droplist: string;
         droplistTrigger: string;

package/dist/esm/components/NotificationPanel/constants.js

@@ -1,6 +1,6 @@
 export const TEST_IDS = {
     title: 'notification-panel__title',
-    chip: 'notification-panel__chip',
+    segment: 'notification-panel__segment',
     settings: {
         droplist: 'notification-panel__settings__droplist',
         droplistTrigger: 'notification-panel__settings__droplist-trigger',

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.13.16",
+  "version": "0.13.17-preview-4eb2b89e.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,13 +37,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/chips": "0.28.5",
     "@snack-uikit/icons": "0.27.3",
     "@snack-uikit/info-block": "0.6.33",
     "@snack-uikit/link": "0.17.11",
     "@snack-uikit/list": "0.32.5",
     "@snack-uikit/popover-private": "0.15.3",
     "@snack-uikit/scroll": "0.10.5",
+    "@snack-uikit/segmented-control": "0.6.11-preview-4eb2b89e.0",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/tag": "0.15.10",
     "@snack-uikit/truncate-string": "0.7.2",
@@ -51,5 +51,5 @@
     "@snack-uikit/utils": "4.0.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "6f4dbbdf91fdd49fc8a49ecf0be7a2e7e56ae73b"
+  "gitHead": "d46627c950a04cca650210be851e436e9994ca6a"
 }

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -2,8 +2,8 @@ import cn from 'classnames';
 import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
 
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
-import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
 import { Scroll } from '@snack-uikit/scroll';
+import { SegmentedControl, SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
@@ -27,8 +27,8 @@ export type NotificationPanelProps = WithSupportProps<{
   title: string;
   /** Кнопка настроек и выпадающий список */
   settings?: NotificationPanelSettingsProps;
-  /** Чипы для фильтрации */
-  chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
+  /** Сегменты для фильтрации */
+  segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
   /** Кнопка в "шапке" панели */
   readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
     onClick: ButtonFunctionProps['onClick'];
@@ -55,7 +55,7 @@ export type NotificationPanelProps = WithSupportProps<{
 export function NotificationPanel({
   title,
   settings,
-  chips,
+  segments,
   readAllButton,
   footerButton,
   content,
@@ -80,17 +80,19 @@ export function NotificationPanel({
         </div>
 
         <div className={styles.notificationPanelHeaderFunctions}>
-          <div className={styles.notificationPanelChips}>
-            {chips?.map(chip => (
-              <ChipToggle
-                {...chip}
-                key={chip.label}
-                data-test-id={`${TEST_IDS.chip}-${chip.label}`}
-                size='xs'
-                disabled={chip.disabled || loading}
+          {segments && (
+            <div className={styles.notificationPanelChips}>
+              <SegmentedControl
+                {...segments}
+                size='s'
+                items={segments.items.map(item => ({
+                  ...item,
+                  disabled: item.disabled || loading,
+                }))}
+                data-test-id={TEST_IDS.segment}
               />
-            ))}
-          </div>
+            </div>
+          )}
 
           {readAllButton && (
             <ButtonFunction

package/src/components/NotificationPanel/constants.ts

@@ -1,6 +1,6 @@
 export const TEST_IDS = {
   title: 'notification-panel__title',
-  chip: 'notification-panel__chip',
+  segment: 'notification-panel__segment',
   settings: {
     droplist: 'notification-panel__settings__droplist',
     droplistTrigger: 'notification-panel__settings__droplist-trigger',