@epam/uui 5.3.0-rc.1 → 5.3.0

package/components/widgets/Badge.module.scss

@@ -0,0 +1,334 @@
+@use '../../assets/styles/index' as *;
+@use 'sass:math';
+
+@mixin badge-layout($size, $borderWidth) {
+    min-height: $size;
+    min-width: $size;
+    border-radius: math.div($size, 2);
+
+    @if ($size == 18px) {
+        @include partial-calc(6px, 3px, 4px, $borderWidth);
+    } @else if ($size == 24px) {
+        @include partial-calc(6px, 6px, 8px, $borderWidth);
+    } @else if ($size == 30px) {
+        @include partial-calc(6px, 6px, 8px, $borderWidth);
+    } @else if ($size == 36px) {
+        @include partial-calc(9px, 6px, 8px, $borderWidth);
+    } @else if ($size == 42px) {
+        @include partial-calc(12px, 6px, 12px, $borderWidth);
+    } @else if ($size == 48px) {
+        @include partial-calc(12px, 6px, 12px, $borderWidth);
+    }
+}
+
+@mixin partial-calc($controlPadding, $captionPadding, $dotSize, $borderWidth) {
+    padding-left: $controlPadding - $borderWidth;
+    padding-right: $controlPadding - $borderWidth;
+
+    :global(.uui-icon):first-child {
+        padding-left: $captionPadding;
+    }
+
+    :global(.uui-caption) {
+        padding-left: $captionPadding;
+        padding-right: $captionPadding;
+    }
+
+    &:global(.uui-indicator) {
+        :global(.uui-caption) {
+            margin-left: $dotSize + $captionPadding;
+        }
+
+        &::before {
+            width: $dotSize;
+            height: $dotSize;
+        }
+    }
+}
+
+.root {
+    --uui-badge-bg: var(--uui-color-50);
+    --uui-badge-bg-hover: var(--uui-color-60);
+    --uui-badge-border: var(--uui-color-50);
+    --uui-badge-border-hover: var(--uui-color-60);
+    --uui-badge-caption: var(--uui-color-contrast);
+    --uui-badge-caption-hover: var(--uui-color-contrast);
+
+    --uui-badge-font: var(--uui-font);
+    --uui-badge-font-weight: 400;
+    //
+    background-color: var(--uui-badge-bg);
+    color: var(--uui-badge-caption);
+    fill: var(--uui-badge-caption); // ??? separate variable
+    border-color: var(--uui-badge-border);
+    justify-content: center;
+
+    &:global(.-clickable) {
+        &:hover {
+            background-color: var(--uui-badge-bg-hover);
+            border-color: var(--uui-badge-border-hover);
+            color: var(--uui-badge-caption-hover);
+            fill: var(--uui-badge-caption-hover); // ??? separate variable
+            cursor: pointer;
+        }
+    }
+
+    :global(.uui-caption) {
+        font-family: var(--uui-badge-font);
+        font-weight: var(--uui-badge-font-weight);
+    }
+
+    &:global(.uui-button-box) {
+        border-width: 1px;
+        border-style: solid;
+
+    }
+
+    &:global(.-clickable):focus-visible {
+        @include focus-visible-effect(2px, null);
+    }
+
+    :global(.uui-count_indicator) {
+        margin-right: 3px;
+    }
+
+    &:global(.uui-indicator) {
+        &::before {
+            position: absolute;
+            content: '';
+            border-radius: 50%;
+            background-color: var(--uui-badge-caption);
+        }
+    }
+
+    &.size-18 {
+        @include badge-layout(18px, 1px);
+
+        &:global(.uui-indicator) {
+            &::before {
+                top: 6px;
+                left: 8px;
+            }
+        }
+
+        :global(.uui-caption) {
+            padding-top: 2px;
+            padding-bottom: 2px;
+            line-height: 12px;
+            font-size: 12px;
+        }
+    }
+
+    &.size-24 {
+        @include badge-layout(24px, 1px);
+
+        &:global(.uui-indicator) {
+            &::before {
+                top: 7px;
+                left: 11px;
+            }
+        }
+
+        :global(.uui-caption) {
+            padding-top: 5px;
+            padding-bottom: 5px;
+            line-height: 12px;
+            font-size: 12px;
+        }
+    }
+
+    &.size-30 {
+        @include badge-layout(30px, 1px);
+
+        &:global(.uui-indicator) {
+            &::before {
+                top: 10px;
+                left: 11px;
+            }
+        }
+
+        :global(.uui-caption) {
+            padding-top: 5px;
+            padding-bottom: 5px;
+            line-height: 18px;
+            font-size: 14px;
+        }
+    }
+
+    &.size-36 {
+        @include badge-layout(36px, 1px);
+
+        &:global(.uui-indicator) {
+            &::before {
+                top: 13px;
+                left: 15px;
+            }
+        }
+
+        :global(.uui-caption) {
+            padding-top: 8px;
+            padding-bottom: 8px;
+            line-height: 18px;
+            font-size: 14px;
+        }
+    }
+
+    &.size-42 {
+        @include badge-layout(42px, 1px);
+
+        :global(.uui-caption) {
+            padding-top: 8px;
+            padding-bottom: 8px;
+            line-height: 24px;
+            font-size: 16px;
+        }
+
+        &:global(.uui-indicator) {
+            &::before {
+                top: 14px;
+                left: 17px;
+            }
+        }
+    }
+
+    &.size-48 {
+        @include badge-layout(48px, 1px);
+
+        &:global(.uui-indicator) {
+            &::before {
+                top: 17px;
+                left: 17px;
+            }
+        }
+
+        :global(.uui-caption) {
+            padding-top: 11px;
+            padding-bottom: 11px;
+            line-height: 24px;
+            font-size: 16px;
+        }
+    }
+
+    &:global(.uui-fill-solid) {
+        --uui-badge-bg: var(--uui-color-50);
+        --uui-badge-bg-hover: var(--uui-color-60);
+        --uui-badge-border: var(--uui-color-50);
+        --uui-badge-border-hover: var(--uui-color-60);
+        --uui-badge-caption: var(--uui-color-contrast);
+        --uui-badge-caption-hover: var(--uui-color-contrast);
+
+        :global(.uui-count_indicator) {
+            --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
+            --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
+        }
+    }
+
+    &:global(.uui-fill-outline) {
+        --uui-badge-bg: var(--uui-color-5);
+        --uui-badge-bg-hover: var(--uui-color-10);
+        --uui-badge-border: var(--uui-color-20);
+        --uui-badge-border-hover: var(--uui-color-20);
+        --uui-badge-caption: var(--uui-color-70);
+        --uui-badge-caption-hover: var(--uui-color-70);
+
+        --uui-badge-font-weight: 600;
+
+        :global(.uui-count_indicator) {
+            --uui-count_indicator-bg: var(--uui-neutral-0);
+            --uui-count_indicator-border: var(--uui-neutral-40);
+            --uui-count_indicator-caption: var(--uui-neutral-70);
+        }
+    }
+
+    // code below deprecated & will be removed
+
+    &.size-18 {
+        &:global(.uui-fill-transparent) {
+            :global(.uui-caption) {
+                margin-left: 8px;
+            }
+
+            &::before {
+                width: 8px;
+                height: 8px;
+                top: 4px;
+                left: 1px;
+            }
+        }
+    }
+
+    &.size-24 {
+        &:global(.uui-fill-transparent) {
+            :global(.uui-caption) {
+                margin-left: 12px;
+            }
+
+            &::before {
+                width: 12px;
+                height: 12px;
+                top: 5px;
+                left: 2px;
+            }
+        }
+    }
+
+    &.size-30 {
+        &:global(.uui-fill-transparent) {
+            :global(.uui-caption) {
+                margin-left: 12px;
+            }
+
+            &::before {
+                width: 12px;
+                height: 12px;
+                top: 8px;
+                left: 2px;
+            }
+        }
+    }
+
+    &.size-36 {
+        &:global(.uui-fill-transparent) {
+            :global(.uui-caption) {
+                margin-left: 12px;
+            }
+
+            &::before {
+                width: 12px;
+                height: 12px;
+                top: 11px;
+                left: 2px;
+            }
+        }
+    }
+
+    &.size-42 {
+        &:global(.uui-fill-transparent) {
+            :global(.uui-caption) {
+                margin-left: 12px;
+            }
+
+            &::before {
+                width: 16px;
+                height: 16px;
+                top: 12px;
+                left: 3px;
+            }
+        }
+    }
+
+    &.size-48 {
+        &:global(.uui-fill-transparent) {
+            :global(.uui-caption) {
+                margin-left: 12px;
+            }
+
+            &::before {
+                width: 16px;
+                height: 16px;
+                top: 15px;
+                left: 3px;
+            }
+        }
+    }
+}

package/components/widgets/Badge.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { EpamBadgeSemanticColor } from '../types';
+import { devLogger, withMods } from '@epam/uui-core';
+import { Button, ButtonProps } from '@epam/uui-components';
+import { CountIndicator, CountIndicatorProps } from './CountIndicator';
+import { systemIcons } from '../../icons/icons';
+import css from './Badge.module.scss';
+
+const defaultSize = '36';
+
+const mapSize = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+export type BadgeColor = EpamBadgeSemanticColor;
+export type BadgeFill = 'solid' | 'outline';
+export type BadgeSize = '18' | '24' | '30' | '36' | '42' | '48';
+
+export interface BadgeMods {
+    color?: BadgeColor;
+    fill?: BadgeFill;
+    size?: BadgeSize;
+    indicator?: boolean;
+}
+
+export type BadgeProps = ButtonProps & BadgeMods;
+
+export function applyBadgeMods(mods: BadgeMods) {
+    return [
+        'uui-badge',
+        css.root,
+        css['size-' + (mods.size || defaultSize)],
+        `uui-fill-${mods.fill || 'solid'}`,
+        mods.color && `uui-color-${mods.color}`,
+        mods.indicator && 'uui-indicator',
+    ];
+}
+
+const mapCountIndicatorSizes: Record<BadgeSize, CountIndicatorProps['size']> = {
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+
+export const Badge = withMods<ButtonProps, BadgeMods>(Button, applyBadgeMods, (props) => {
+    if (__DEV__) {
+        devLogger.warnAboutDeprecatedPropValue<BadgeProps, 'size'>({
+            component: 'Badge',
+            propName: 'size',
+            propValue: props.size,
+            propValueUseInstead: '42',
+            condition: () => ['48'].indexOf(props.size) !== -1,
+        });
+    }
+    return {
+        dropdownIcon: systemIcons[(props.size && mapSize[props.size]) || defaultSize].foldingArrow,
+        clearIcon: systemIcons[(props.size && mapSize[props.size]) || defaultSize].clear,
+        countPosition: 'left',
+        countIndicator: (countIndicatorProps) => (
+            <CountIndicator
+                { ...countIndicatorProps }
+                color={ null }
+                size={ mapCountIndicatorSizes[props.size || defaultSize] }
+            />
+        ),
+        indicator: props.indicator || false,
+    };
+});

package/components/widgets/CountIndicator.module.scss

@@ -0,0 +1,52 @@
+.root {
+    --uui-count_indicator-bg: var(--uui-color-50);
+    --uui-count_indicator-border: var(--uui-color-50);
+    --uui-count_indicator-caption: var(--uui-color-contrast);
+
+    --uui-count_indicator-font: var(--uui-font);
+    --uui-count_indicator-font-weight: 600;
+
+    &:global(.uui-count_indicator) {
+        box-sizing: border-box;
+        font-family: var(--uui-count_indicator-font);
+        font-weight: var(--uui-count_indicator-font-weight);
+        margin: auto;
+        text-align: center;
+        flex-shrink: 0;
+        //
+        background-color: var(--uui-count_indicator-bg);
+        border: 1px solid var(--uui-count_indicator-border);
+        color: var(--uui-count_indicator-caption);
+
+
+        &.size-24 {
+            height: 24px;
+            min-width: 24px;
+            font-size: 14px;
+            line-height: 22px;
+            padding-left: 5px;
+            padding-right: 5px;
+            border-radius: 12px;
+        }
+
+        &.size-18 {
+            height: 18px;
+            min-width: 18px;
+            font-size: 12px;
+            line-height: 16px;
+            padding-left: 5px;
+            padding-right: 5px;
+            border-radius: 9px;
+        }
+
+        &.size-12 {
+            height: 12px;
+            min-width: 12px;
+            font-size: 8px;
+            line-height: 10px;
+            padding-left: 2px;
+            padding-right: 2px;
+            border-radius: 6px;
+        }
+    }
+}

package/components/widgets/CountIndicator.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { IHasCaption, IHasCX } from '@epam/uui-core';
+import css from './CountIndicator.module.scss';
+
+export interface CountIndicatorProps extends IHasCaption, IHasCX {
+    size?: '24' | '18' | '12';
+    color: 'neutral' | 'white' | 'info' | 'success' | 'warning' | 'critical' | null;
+}
+
+export const CountIndicator = forwardRef<HTMLDivElement, CountIndicatorProps>((props, ref) => {
+    return (
+        <div
+            ref={ ref }
+            className={ cx([
+                css.root,
+                'uui-count_indicator',
+                css[`size-${props.size || 24}`],
+                props.color && `uui-color-${props.color}`,
+                props.cx,
+            ]) }
+        >
+            { props.caption }
+        </div>
+    );
+});

package/components/widgets/IndeterminateBar.module.scss

@@ -0,0 +1,42 @@
+.root {
+    --uui-indeterminate_bar-bg: var(--uui-secondary-20);
+    --uui-indeterminate_bar-progress-bg: var(--uui-primary-50);
+    --uui-indeterminate_bar-border-radius: var(--uui-border-radius);
+    //
+    position: relative;
+    background-color: var(--uui-indeterminate_bar-bg);
+    border-radius: var(--uui-indeterminate_bar-border-radius);
+    overflow: hidden;
+
+    .progress-bar {
+        background-color: var(--uui-indeterminate_bar-progress-bg);
+        width: 33%;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+        animation: progressBar-indeterminate 2s linear 0.15s infinite;
+    }
+}
+
+
+@keyframes progressBar-indeterminate {
+    0% {
+        left: -33%;
+    }
+
+    100% {
+        left: 100%;
+    }
+}
+
+.size-12 {
+    height: 12px;
+}
+
+.size-18 {
+    height: 18px;
+}
+
+.size-24 {
+    height: 24px;
+}

package/components/widgets/IndeterminateBar.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { IHasCX } from '@epam/uui-core';
+import css from './IndeterminateBar.module.scss';
+
+export interface IndeterminateBarMods extends IHasCX {
+    size?: '12' | '18' | '24';
+}
+
+export const IndeterminateBar = React.forwardRef<HTMLDivElement, IndeterminateBarMods>((props, ref) => {
+    return (
+        <div ref={ ref } className={ cx('uui-indeterminate_bar', props.cx, css.root, css[`size-${props.size || 12}`]) }>
+            <div className={ cx(css.progressBar) } />
+        </div>
+    );
+});

package/components/widgets/IndicatorBar.module.scss

@@ -0,0 +1,3 @@
+.root {
+    height: 2px;
+}

package/components/widgets/IndicatorBar.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { IHasCX, IHasRawProps } from '@epam/uui-core';
+import { ProgressBar } from './ProgressBar';
+import { IndeterminateBar } from './IndeterminateBar';
+import css from './IndicatorBar.module.scss';
+
+interface IIndicatorProps extends IHasCX, IHasRawProps<HTMLDivElement> {
+    progress?: number;
+}
+
+export const IndicatorBar = React.forwardRef<HTMLDivElement, IIndicatorProps>((props, ref) => {
+    const { progress } = props;
+
+    return progress || progress === 0 ? (
+        <ProgressBar ref={ ref } progress={ progress } cx={ cx(css.root, props.cx) } hideLabel />
+    ) : (
+        <IndeterminateBar ref={ ref } cx={ cx(css.root, props.cx) } />
+    );
+});

package/components/widgets/Paginator.module.scss

@@ -0,0 +1,66 @@
+@mixin set-size($padding-left, $padding-right, $min-width) {
+    &:global(.uui-button-box) {
+        min-width: $min-width;
+    }
+
+    :global(.uui-caption) {
+        font-family: var(--uui-pagination-font);
+        font-weight: var(--uui-pagination-font-weight, normal);
+        font-size: 14px;
+        padding-left: $padding-left;
+        padding-right: $padding-right;
+    }
+
+    &:first-of-type {
+        margin-right: 6px;
+    }
+
+    &:last-of-type {
+        margin-left: 6px;
+    }
+}
+
+.root {
+    --uui-pagination-font: var(--uui-font);
+    --uui-pagination-font-weight: 400;
+    //
+    display: flex;
+    flex-direction: row;
+
+    .spacer {
+        color: var(--uui-text-primary);
+    }
+
+    .mode-ghost {
+        color: var(--uui-text-primary);
+
+        &:hover {
+            color: var(--uui-primary-50);
+        }
+    }
+
+    .size-24 {
+        @include set-size(2px, 2px, 24px);
+
+        &.spacer {
+            min-width: 28px;
+        }
+    }
+
+    .size-30 {
+        @include set-size(5px, 5px, 30px);
+
+        &.spacer {
+            min-width: 34px;
+        }
+    }
+
+    .navigation-size-24 {
+        @include set-size(0, 0, 24px);
+    }
+
+    .navigation-size-30 {
+        @include set-size(0, 0, 30px);
+    }
+}
+

package/components/widgets/Paginator.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import cx from 'classnames';
+import { Paginator as UuiPaginator, PaginatorParams, PaginatorProps } from '@epam/uui-components';
+import { Button } from '../buttons';
+import css from './Paginator.module.scss';
+import { ReactComponent as ArrowLeftIcon_24 } from '@epam/assets/icons/common/navigation-chevron-left-12.svg';
+import { ReactComponent as ArrowRightIcon_24 } from '@epam/assets/icons/common/navigation-chevron-right-12.svg';
+import { ReactComponent as ArrowLeftIcon_30 } from '@epam/assets/icons/common/navigation-chevron-left-18.svg';
+import { ReactComponent as ArrowRightIcon_30 } from '@epam/assets/icons/common/navigation-chevron-right-18.svg';
+
+export function Paginator(props: PaginatorProps) {
+    const renderPaginator = (params: PaginatorParams) => (
+        <nav role="navigation" className={ cx(css.root, 'uui-paginator') } { ...params.rawProps }>
+            <Button
+                cx={ css[`navigation-size-${params.size ?? '30'}`] }
+                size={ params.size }
+                icon={ params.size === '30' ? ArrowLeftIcon_30 : ArrowLeftIcon_24 }
+                onClick={ params.goToPrev }
+                isDisabled={ params.isFirst }
+                fill="outline"
+                color="secondary"
+            />
+            {params.pages.map((page, index) => {
+                if (page.type === 'spacer') {
+                    return (
+                        <Button
+                            cx={ cx(css[`size-${params.size ?? '30'}`], css.spacer) }
+                            size={ params.size }
+                            key={ `${index}_spacer` }
+                            caption="..."
+                            fill="ghost"
+                            color="secondary"
+                            tabIndex={ -1 }
+                        />
+                    );
+                } else {
+                    return (
+                        <Button
+                            cx={ cx(css[`size-${params.size ?? '30'}`], css[`mode-${!page.isActive && 'ghost'}`]) }
+                            size={ params.size }
+                            key={ page.pageNumber }
+                            caption={ page.pageNumber }
+                            onClick={ () => page.onClick?.() }
+                            rawProps={ { 'aria-current': page.isActive } }
+                            fill={ (page.isActive && 'outline') || 'ghost' }
+                            color="primary"
+                        />
+                    );
+                }
+            })}
+            <Button
+                cx={ css[`navigation-size-${params.size ?? '30'}`] }
+                size={ params.size }
+                icon={ params.size === '30' ? ArrowRightIcon_30 : ArrowRightIcon_24 }
+                onClick={ params.goToNext }
+                isDisabled={ params.isLast }
+                fill="outline"
+                color="secondary"
+            />
+        </nav>
+    );
+
+    return <UuiPaginator { ...props } render={ renderPaginator } />;
+}