@epam/uui 5.3.0-rc.0 → 5.3.0

package/components/buttons/Button.module.scss

@@ -0,0 +1,157 @@
+@use '../../assets/styles/index' as *;
+
+@mixin button-disables-styles($bg-color, $border-color) {
+    background-color: $bg-color;
+    color: var(--uui-btn-caption-disabled);
+    fill: var(--uui-btn-caption-disabled);
+    border-color: $border-color;
+}
+
+.root {
+    --uui-btn-bg: var(--uui-color-50);
+    --uui-btn-bg-hover: var(--uui-color-60);
+    --uui-btn-bg-active: var(--uui-color-70);
+    --uui-btn-bg-disabled: var(--uui-neutral-30);
+    --uui-btn-border: var(--uui-color-50);
+    --uui-btn-border-hover: var(--uui-color-60);
+    --uui-btn-border-active: var(--uui-color-70);
+    --uui-btn-border-disabled: var(--uui-neutral-30);
+    --uui-btn-caption: var(--uui-color-contrast);
+    --uui-btn-caption-disabled: var(--uui-text-disabled);
+
+    --uui-btn-border-radius: var(--uui-border-radius);
+
+    --uui-btn-font: var(--uui-font);
+    --uui-btn-font-weight: var(--uui-font-weight, 600);
+    //
+    background-color: var(--uui-btn-bg);
+    color: var(--uui-btn-caption);
+    fill: var(--uui-btn-caption);
+    border-color: var(--uui-btn-border);
+
+    &:global(.-clickable) {
+        &:hover {
+            background-color: var(--uui-btn-bg-hover);
+            border-color: var(--uui-btn-border-hover);
+        }
+
+        &:active {
+            background-color: var(--uui-btn-bg-active);
+            border-color: var(--uui-btn-border-active);
+        }
+    }
+
+    &:global(.uui-button-box) {
+        border-style: solid;
+        justify-content: center;
+        border-radius: var(--uui-btn-border-radius);
+    }
+
+    &:focus-visible {
+        @include focus-visible-effect();
+    }
+
+    :global(.uui-caption) {
+        @include overflow-ellipsis();
+        min-width: 0;
+        text-align: center;
+        flex: 1 1 auto;
+        font-family: var(--uui-btn-font);
+        font-weight: var(--uui-btn-font-weight, normal);
+        user-select: none;
+    }
+
+    &:is(:global(.-clickable), :hover, :active, :focus):global(.uui-disabled),
+    &:global(.uui-disabled) {
+        &:global(.uui-fill-solid) {
+            @include button-disables-styles(var(--uui-btn-bg-disabled), var(--uui-btn-border-disabled));
+        }
+
+        &:global(.uui-fill-outline) {
+            @include button-disables-styles(var(--uui-surface-main), var(--uui-btn-border-disabled));
+        }
+
+        &:global(.uui-fill-none) {
+            @include button-disables-styles(transparent, var(--uui-btn-border-disabled));
+        }
+
+        &:global(.uui-fill-ghost) {
+            @include button-disables-styles(transparent, transparent);
+        }
+    }
+
+    &:global(.uui-fill-solid) {
+        --uui-btn-bg: var(--uui-color-50);
+        --uui-btn-bg-hover: var(--uui-color-60);
+        --uui-btn-bg-active: var(--uui-color-70);
+        --uui-btn-border: var(--uui-color-50);
+        --uui-btn-border-hover: var(--uui-color-60);
+        --uui-btn-border-active: var(--uui-color-70);
+        --uui-btn-caption: var(--uui-color-contrast);
+        --uui-btn-caption-disabled: var(--uui-text-disabled);
+    }
+
+    &:global(.uui-fill-outline) {
+        --uui-btn-bg: var(--uui-surface-main);
+        --uui-btn-bg-hover: var(--uui-color-10);
+        --uui-btn-bg-active: var(--uui-color-20);
+        --uui-btn-bg-disabled: transparent;
+        --uui-btn-border: var(--uui-color-50);
+        --uui-btn-border-hover: var(--uui-color-50);
+        --uui-btn-border-active: var(--uui-color-50);
+        --uui-btn-caption: var(--uui-color-50);
+        --uui-btn-caption-disabled: var(--uui-text-disabled);
+    }
+
+    &:global(.uui-fill-none) {
+        --uui-btn-bg: transparent;
+        --uui-btn-bg-hover: var(--uui-color-10);
+        --uui-btn-bg-active: var(--uui-color-20);
+        --uui-btn-bg-disabled: transparent;
+        --uui-btn-border: var(--uui-color-50);
+        --uui-btn-border-hover: var(--uui-color-50);
+        --uui-btn-border-active: var(--uui-color-50);
+        --uui-btn-caption: var(--uui-color-50);
+        --uui-btn-caption-disabled: var(--uui-text-disabled);
+    }
+
+    &:global(.uui-fill-ghost) {
+        --uui-btn-bg: transparent;
+        --uui-btn-bg-hover: var(--uui-color-10);
+        --uui-btn-bg-active: var(--uui-color-20);
+        --uui-btn-bg-disabled: transparent;
+        --uui-btn-border: transparent;
+        --uui-btn-border-hover: var(--uui-color-10);
+        --uui-btn-border-active: var(--uui-color-20);
+        --uui-btn-border-disabled: transparent;
+        --uui-btn-caption: var(--uui-color-50);
+        --uui-btn-caption-disabled: var(--uui-text-disabled);
+    }
+
+    &:global {
+        &.uui-size-18 {
+            @include button-layout(18px, 1px);
+        }
+
+        &.uui-size-24 {
+            @include button-layout(24px, 1px);
+        }
+
+        &.uui-size-30 {
+            @include button-layout(30px, 1px);
+        }
+
+        &.uui-size-36 {
+            @include button-layout(36px, 1px);
+        }
+
+        &.uui-size-42 {
+            @include button-layout(42px, 1px);
+        }
+
+        &.uui-size-48 {
+            @include button-layout(48px, 1px);
+        }
+    }
+}
+

package/components/buttons/Button.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button as uuiButton, ButtonProps as uuiButtonProps } from '@epam/uui-components';
+import { withMods } from '@epam/uui-core';
+import { ControlSize, ButtonFill } from '../types';
+import { systemIcons } from '../../icons/icons';
+import { CountIndicator } from '../widgets';
+import css from './Button.module.scss';
+
+export type ButtonColor = 'accent' | 'primary' | 'critical' | 'secondary' | 'neutral';
+export const allButtonColors: ButtonColor[] = [
+    'accent', 'primary', 'critical', 'secondary', 'neutral',
+];
+
+const defaultSize = '36';
+
+export interface ButtonMods {
+    size?: ControlSize | '18';
+    fill?: ButtonFill;
+    color?: ButtonColor;
+}
+
+export type ButtonProps = ButtonMods & Omit<uuiButtonProps, 'count' | 'indicator'>;
+
+export function applyButtonMods(mods: ButtonProps) {
+    return [
+        css.root,
+        'uui-button',
+        `uui-fill-${mods.fill || 'solid'}`,
+        `uui-color-${mods.color || 'primary'}`,
+        `uui-size-${mods.size || defaultSize}`,
+    ];
+}
+
+export const Button = withMods<Omit<uuiButtonProps, 'count' | 'indicator'>, ButtonMods>(
+    uuiButton,
+    applyButtonMods,
+    (props) => ({
+        dropdownIcon: systemIcons[props.size || defaultSize].foldingArrow,
+        clearIcon: systemIcons[props.size || defaultSize].clear,
+        countIndicator: (countIndicatorProps) => <CountIndicator { ...countIndicatorProps } color="white" />,
+    }),
+);

package/components/buttons/IconButton.module.scss

@@ -0,0 +1,44 @@
+@use '../../assets/styles/effects' as *;
+
+.root {
+    --uui-icon_btn: var(--uui-color-50);
+    --uui-icon_btn-hover: var(--uui-color-60);
+    --uui-icon_btn-active: var(--uui-color-70);
+    --uui-icon_btn-disabled: var(--uui-icon-disabled); // from core or color class? Current - from core
+    //
+    fill: var(--uui-icon_btn);
+
+    &:global(.uui-icon_button.uui-color-neutral) {
+        --uui-icon_btn: var(--uui-icon);
+        --uui-icon_btn-hover: var(--uui-icon-hover);
+        --uui-icon_btn-active: var(--uui-icon-active);
+    }
+
+    &:global(.-clickable) {
+        &:hover {
+            fill: var(--uui-icon_btn-hover);
+        }
+
+        &:active {
+            fill: var(--uui-icon_btn-active);
+        }
+
+        &:focus-visible {
+            @include focus-visible-effect();
+        }
+    }
+
+    &:global(.uui-disabled) {
+        fill: var(--uui-icon_btn-disabled);
+
+        &:global(.-clickable) {
+            &:hover, &:focus {
+                fill: var(--uui-icon_btn-disabled);
+            }
+
+            &:active {
+                fill: var(--uui-icon_btn-disabled);
+            }
+        }
+    }
+}

package/components/buttons/IconButton.tsx

@@ -0,0 +1,20 @@
+import { IconButtonBaseProps, IconButton as uuiIconButton } from '@epam/uui-components';
+import { withMods } from '@epam/uui-core';
+import css from './IconButton.module.scss';
+
+export type IconColor = 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'neutral';
+export const allIconColors: IconColor[] = [
+    'info', 'success', 'warning', 'error', 'secondary', 'neutral',
+];
+
+export interface IconButtonMods {
+    color?: IconColor;
+}
+
+export interface IconButtonProps extends IconButtonBaseProps, IconButtonMods {}
+
+function applyIconButtonMods(mods: IconButtonProps & IconButtonMods) {
+    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css.root];
+}
+
+export const IconButton = withMods<IconButtonProps, IconButtonMods>(uuiIconButton, applyIconButtonMods);

package/components/buttons/LinkButton.module.scss

@@ -0,0 +1,85 @@
+@use  '../../assets/styles/buttonLayout' as *;
+
+.root {
+    --uui-link_btn-text: var(--uui-color-50);
+    --uui-link_btn-text-hover: var(--uui-color-60);
+    --uui-link_btn-text-active: var(--uui-color-70);
+    --uui-link_btn-text-disabled: var(--uui-text-disabled);
+
+    --uui-link-button-font: var(--uui-font);
+    --uui-link-button-font-weight: 600;
+
+    &:global(.uui-button-box) {
+        background-color: transparent;
+        color: var(--uui-link_btn-text);
+        fill: var(--uui-link_btn-text);
+        min-width: auto;
+
+        &:global(.-clickable:not(.uui-disabled)) {
+            &:hover {
+                color: var(--uui-link_btn-text-hover);
+                fill: var(--uui-link_btn-text-hover);
+            }
+
+            &:active {
+                color: var(--uui-link_btn-text-active);
+                fill: var(--uui-link_btn-text-active);
+            }
+
+            &:focus {
+                box-shadow: none;
+            }
+
+            &:focus-visible {
+                border-radius: 2px;
+                box-shadow:
+                    inset 0 -2px 0 0 var(--uui-outline-focus),
+                    inset 0 2px 0 0 var(--uui-outline-focus),
+                    2px 0 0 0 var(--uui-outline-focus),
+                    -2px 0 0 0 var(--uui-outline-focus);
+            }
+        }
+
+        &:global(.uui-disabled) {
+            color: var(--uui-link_btn-text-disabled);
+            fill: var(--uui-link_btn-text-disabled);
+            background-color: transparent;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+    }
+
+    :global(.uui-caption) {
+        font-family: var(--uui-link-button-font);
+        font-weight: var(--uui-link-button-font-weight, normal);
+    }
+
+    // Sizes
+    &:global {
+        &.uui-size-18 {
+            @include link-button-layout(18px);
+        }
+
+        &.uui-size-24 {
+            @include link-button-layout(24px);
+        }
+
+        &.uui-size-30 {
+            @include link-button-layout(30px);
+        }
+
+        &.uui-size-36 {
+            @include link-button-layout(36px);
+        }
+
+        &.uui-size-42 {
+            @include link-button-layout(42px);
+        }
+
+        &.uui-size-48 {
+            @include link-button-layout(48px);
+        }
+    }
+}

package/components/buttons/LinkButton.tsx

@@ -0,0 +1,32 @@
+import * as types from '../types';
+import { withMods } from '@epam/uui-core';
+import { Button, ButtonProps } from '@epam/uui-components';
+import css from './LinkButton.module.scss';
+import { systemIcons } from '../../icons/icons';
+import { getIconClass } from './helper';
+
+const defaultSize = '36';
+export type LinkButtonColorType = 'primary' | 'secondary' | 'contrast';
+export const allLinkButtonColors: LinkButtonColorType[] = ['primary', 'secondary', 'contrast'];
+
+export interface LinkButtonMods {
+    size?: types.ControlSize | '42';
+    color?: LinkButtonColorType;
+}
+
+export type LinkButtonProps = LinkButtonMods & ButtonProps;
+
+function applyLinkButtonMods(mods: LinkButtonProps) {
+    return [
+        'uui-link_button',
+        css.root,
+        `uui-size-${mods.size || defaultSize}`,
+        ...getIconClass(mods),
+        `uui-color-${mods.color || 'primary'}`,
+    ];
+}
+
+export const LinkButton = withMods<ButtonProps, LinkButtonMods>(Button, applyLinkButtonMods, (props) => ({
+    dropdownIcon: systemIcons[props.size || defaultSize].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize].clear,
+}));

package/components/buttons/TabButton.module.scss

@@ -0,0 +1,94 @@
+@use 'sass:math';
+@use  '../../assets/styles/index' as *;
+
+@mixin tab-button-color($color, $activeColor, $backgroundColor) {
+    color: $color;
+    fill: $color;
+    background-color: $backgroundColor;
+
+    &:hover {
+        color: $activeColor;
+        fill: $activeColor;
+    }
+
+    &:global(.uui-active) {
+        color: $activeColor;
+        fill: $activeColor;
+        border-color: $activeColor;
+    }
+}
+
+$text-size-caption: 36px;
+$text-size-count: 24px;
+
+.root {
+    --uui-tab_btn-text: var(--uui-text-primary);
+    --uui-tab_btn-text-hover: var(--uui-primary-50);
+    --uui-tab_btn-text-active: var(--uui-primary-50);
+    --uui-tab_btn-text-disabled: var(--uui-text-disabled);
+    --uui-tab_btn-font: var(--uui-font);
+    --uui-tab_btn-font-weight: 600;
+
+    @include link-button-horizontal-layout(36px);
+    @include tab-button-color(var(--uui-tab_btn-text), var(--uui-tab_btn-text-active), transparent);
+    cursor: pointer;
+    padding-left: 12px;
+    padding-right: 12px;
+    position: relative;
+    bottom: -1px;
+    display: flex;
+    align-items: center;
+    font-family: var(--uui-tab_btn-font);
+    font-weight: var(--uui-tab_btn-font-weight);
+    border-bottom: 3px solid transparent;
+
+    &:global(.-clickable):focus-visible {
+        @include focus-visible-effect(-2px, 0);
+    }
+
+    &:global(.uui-disabled) {
+        @include tab-button-color(var(--uui-tab_btn-text-disabled), var(--uui-tab_btn-text-disabled), transparent);
+    }
+
+    &.withNotify {
+        :global(.uui-caption) {
+            &::after {
+                content: '';
+                position: absolute;
+                margin-bottom: math.div($text-size-caption, 2);
+                height: 6px;
+                width: 6px;
+                background: var(--uui-critical-50);
+                box-shadow: 0 1px 8px 0 var(--uui-critical-50);
+                border-radius: 50%;
+            }
+        }
+    }
+
+    &:global(.uui-button-box) {
+        min-width: min-content;
+    }
+
+    :global(.uui-count_indicator) {
+        padding: 0 6px;
+        margin-left: 3px;
+        margin-right: 3px;
+    }
+
+    :global(.uui-caption) {
+        @include text-size($text-size-caption, 0);
+    }
+
+    // Sizes
+    &.size-36 {
+        height: 36px;
+    }
+
+    &.size-48 {
+        height: 48px;
+    }
+
+    &.size-60 {
+        height: 60px;
+    }
+}

package/components/buttons/TabButton.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button, ButtonProps } from '@epam/uui-components';
+import { withMods } from '@epam/uui-core';
+import { getIconClass } from './helper';
+import { CountIndicator } from '../widgets';
+import { systemIcons } from '../../icons/icons';
+import css from './TabButton.module.scss';
+
+export interface TabButtonMods {
+    size?: '36' | '48' | '60';
+    withNotify?: boolean;
+}
+
+export type TabButtonProps = TabButtonMods & ButtonProps;
+
+function applyTabButtonMods(mods: TabButtonProps) {
+    return [
+        css.root,
+        'uui-tab-button',
+        css['size-' + (mods.size || '48')],
+        mods.withNotify && css.withNotify,
+        ...getIconClass(mods),
+    ];
+}
+
+export const TabButton = withMods<ButtonProps, TabButtonMods>(Button, applyTabButtonMods, (props) => ({
+    dropdownIcon: systemIcons['36'].foldingArrow,
+    clearIcon: systemIcons['36'].clear,
+    ...props,
+    rawProps: { role: 'tab', ...props.rawProps },
+    countIndicator: (countIndicatorProps) => (
+        <CountIndicator
+            { ...countIndicatorProps }
+            color={ props.isLinkActive ? 'info' : 'neutral' }
+            size="18"
+        />
+    ),
+}));

package/components/buttons/VerticalTabButton.module.scss

@@ -0,0 +1,7 @@
+@use '../../assets/styles/index' as *;
+
+.root {
+    border-bottom: 0 none;
+    border-left: 3px solid transparent;
+    text-align: left;
+}

package/components/buttons/VerticalTabButton.tsx

@@ -0,0 +1,12 @@
+import css from './VerticalTabButton.module.scss';
+import { withMods } from '@epam/uui-core';
+import { ButtonProps } from '@epam/uui-components';
+import { TabButton, TabButtonMods } from './TabButton';
+
+function applyVerticalTabButtonMods() {
+    return [css.root];
+}
+
+export type VerticalTabButtonProps = ButtonProps & TabButtonMods;
+
+export const VerticalTabButton = withMods<VerticalTabButtonProps>(TabButton, applyVerticalTabButtonMods);

package/components/buttons/__tests__/Button.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from '../Button';
+import { renderSnapshotWithContextAsync, SvgMock } from '@epam/uui-test-utils';
+
+describe('Button', () => {
+    it('should render with minimum props', async () => {
+        const tree = await renderSnapshotWithContextAsync(<Button />);
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should render with maximum props', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <Button
+                color="accent"
+                fill="outline"
+                caption="Click me"
+                onClick={ jest.fn }
+                icon={ SvgMock }
+                isDisabled={ false }
+                isDropdown={ true }
+                count={ 10 }
+                iconPosition="right"
+                onClear={ jest.fn }
+                isOpen
+                clearIcon={ SvgMock }
+            />,
+        );
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/buttons/__tests__/IconButton.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconButton } from '../IconButton';
+import { renderer } from '@epam/uui-test-utils';
+import { ReactComponent as CalendarIcon } from '../../../icons/calendar-18.svg';
+
+describe('IconButton', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<IconButton />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly with props', () => {
+        const tree = renderer.create(<IconButton color="info" onClick={ jest.fn } icon={ CalendarIcon } isDisabled={ false } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/buttons/__tests__/LinkButton.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { LinkButton } from '../LinkButton';
+import { renderer } from '@epam/uui-test-utils';
+import { ReactComponent as CalendarIcon } from '../../../icons/calendar-18.svg';
+
+describe('LinkButton', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<LinkButton />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly with props', () => {
+        const tree = renderer.create(<LinkButton onClick={ jest.fn } icon={ CalendarIcon } isDisabled={ false } isDropdown onClear={ jest.fn } size="30" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/buttons/__tests__/TabButton.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TabButton } from '../TabButton';
+import { renderer } from '@epam/uui-test-utils';
+import { ReactComponent as calendarIcon } from '../../../icons/calendar-18.svg';
+
+describe('TabButton', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<TabButton />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly with props', () => {
+        const tree = renderer.create(<TabButton onClick={ jest.fn } icon={ calendarIcon } isDisabled={ false } withNotify={ true } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/buttons/__tests__/VerticalTabButton.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { VerticalTabButton } from '../VerticalTabButton';
+import { renderer } from '@epam/uui-test-utils';
+import { ReactComponent as calendarIcon } from '../../../icons/calendar-18.svg';
+
+describe('VerticalTabButton', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<VerticalTabButton />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly with props', () => {
+        const tree = renderer.create(<VerticalTabButton onClick={ jest.fn } icon={ calendarIcon } isDisabled={ false } withNotify={ true } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});