Merge pull request #1735 from epam/skin-electric-promo-button

add 'PromoButton' to skin 'Electric'
epam · Nov 8, 2023 · af815a4 · af815a4
2 parents 557c745 + b66e231
commit af815a4
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 35 deletions.
diff --git a/app/src/sandbox/theme-electric-test/ThemeDemo.tsx b/app/src/sandbox/theme-electric-test/ThemeDemo.tsx
@@ -1,27 +1,9 @@
 import React from 'react';
 import { useAsyncDataSource, useForm, useUuiContext } from '@epam/uui-core';
 import {
-    Button,
-    Checkbox,
-    Switch,
-    TextInput,
-    SuccessNotification,
-    ErrorNotification,
-    Text,
-    LabeledInput,
-    Panel,
-    PickerInput,
-    FlexRow,
-    FlexCell,
-    FlexSpacer,
-    RadioGroup,
-    ScrollBars,
-    IconButton,
-    ModalBlocker,
-    ModalWindow,
-    ModalHeader,
-    Badge,
-    DatePicker,
+    Button, Checkbox, Switch, TextInput, SuccessNotification, ErrorNotification, Text, LabeledInput, Panel, PickerInput,
+    FlexRow, FlexCell, FlexSpacer, RadioGroup, ScrollBars, IconButton, ModalBlocker, ModalWindow, ModalHeader, Badge, DatePicker,
+    PromoButton,
 } from '@epam/electric';
 import { ReactComponent as AddIcon } from '@epam/assets/icons/common/action-add-18.svg';
 import { ReactComponent as CrossIcon } from '@epam/assets/icons/common/navigation-close-24.svg';
@@ -235,14 +217,10 @@ export function ThemeDemo() {
                         </Text>
                     </FlexRow>
                     <FlexRow vPadding="12">
-                        <FlexCell grow={ 1 }>
-                            <Checkbox label="I agree to the processing of personal data" { ...lens.prop('processingPersonalDataAgreed').toProps() } />
-                        </FlexCell>
+                        <Checkbox label="I agree to the processing of personal data" { ...lens.prop('processingPersonalDataAgreed').toProps() } />
                     </FlexRow>
                     <FlexRow vPadding="12" borderBottom>
-                        <FlexCell grow={ 1 }>
-                            <Switch label="I agree to display ads" { ...lens.prop('displayAdsAgreed').toProps() } />
-                        </FlexCell>
+                        <Switch label="I agree to display ads" { ...lens.prop('displayAdsAgreed').toProps() } />
                     </FlexRow>
                     <FlexRow vPadding="24" spacing="12">
                         <FlexSpacer />
@@ -255,7 +233,15 @@ export function ThemeDemo() {
     };
 
     return (
-        <div style={ { height: 'calc(100vh - 60px)', margin: '0 auto', display: 'flex' } }>
+        <div className="uui-theme-electric" style={ { height: 'calc(100vh - 60px)', margin: '0 auto', display: 'flex', flexDirection: 'column' } }>
+            <div style={ { background: 'var(--uui-neutral-80)', marginTop: '12px' } }>
+                <FlexRow spacing="12" vPadding="24" padding="12">
+                    <PromoButton caption="BUTTON" size="36" onClick={ () => {} } />
+                    <PromoButton caption="BUTTON" size="36" isDisabled onClick={ () => {} } />
+                    <PromoButton caption="BUTTON" size="42" onClick={ () => {} } />
+                    <PromoButton caption="BUTTON" size="42" isDisabled onClick={ () => {} } />
+                </FlexRow>
+            </div>
             <Panel background="surface" shadow rawProps={ { style: { margin: '24px auto' } } }>
                 <ScrollBars>{renderDemoForm()}</ScrollBars>
             </Panel>

diff --git a/app/src/sandbox/theme/ThemeDemo.tsx b/app/src/sandbox/theme/ThemeDemo.tsx
@@ -213,14 +213,10 @@ export function ThemeDemo() {
                         </Text>
                     </FlexRow>
                     <FlexRow vPadding="12">
-                        <FlexCell grow={ 1 }>
-                            <Checkbox label="I agree to the processing of personal data" { ...lens.prop('processingPersonalDataAgreed').toProps() } />
-                        </FlexCell>
+                        <Checkbox label="I agree to the processing of personal data" { ...lens.prop('processingPersonalDataAgreed').toProps() } />
                     </FlexRow>
                     <FlexRow vPadding="12" borderBottom>
-                        <FlexCell grow={ 1 }>
-                            <Switch label="I agree to display ads" { ...lens.prop('displayAdsAgreed').toProps() } />
-                        </FlexCell>
+                        <Switch label="I agree to display ads" { ...lens.prop('displayAdsAgreed').toProps() } />
                     </FlexRow>
                     <FlexRow vPadding="24" spacing="12">
                         <FlexSpacer />

diff --git a/epam-electric/components/buttons/PromoButton.module.scss b/epam-electric/components/buttons/PromoButton.module.scss
@@ -0,0 +1,97 @@
+.root {
+    --uui-btn-bg: var(--uui-neutral-80);
+    --uui-btn-bg-hover: var(--uui-neutral-70);
+    --uui-btn-bg-active: var(--uui-neutral-80);
+    --uui-btn-bg-disabled: var(--uui-neutral-80);
+    --uui-btn-border: transparent;
+    --uui-btn-border-disabled: var(--uui-neutral-60);
+    --uui-btn-caption: var(--white);
+    --uui-btn-caption-disabled: var(--uui-neutral-60);
+
+    --uui-btn-font: var(--font-primary);
+    --uui-btn-font-weight: var(--uui-font-weight, 700);
+    //
+    background: linear-gradient(var(--uui-btn-bg), var(--uui-btn-bg)) padding-box,
+        var(--gradient-1) border-box;
+    color: var(--uui-btn-caption);
+    fill: var(--uui-btn-caption);
+    border-color: var(--uui-btn-border);
+
+    &:global(.-clickable) {
+        &:hover {
+            background: linear-gradient(var(--uui-btn-bg-hover), var(--uui-btn-bg-hover)) padding-box,
+                var(--gradient-1) border-box;
+        }
+
+        &:active {
+            background: linear-gradient(var(--uui-btn-bg-active), var(--uui-btn-bg-active)) padding-box,
+                var(--gradient-1) border-box;
+            box-shadow: 0 0 12px 0 #00F6FF;
+        }
+    }
+
+    &:global(.uui-button-box) {
+        border-style: solid;
+        justify-content: center;
+        padding-left: 11px;
+        padding-right: 11px;
+        border-width: 2px;
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--uui-outline-focus);
+        outline-offset: 2px;
+        border-radius: 2px;
+    }
+
+    :global(.uui-caption) {
+        overflow: hidden;
+        text-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) {
+        background: var(--uui-btn-bg-disabled);
+        color: var(--uui-btn-caption-disabled);
+        fill: var(--uui-btn-caption-disabled);
+        border-color: var(--uui-btn-border-disabled);
+        box-shadow: none;
+    }
+}
+
+.size-36 {
+    min-width: 36px;
+
+    &:global(.uui-button-box) {
+        min-height: 36px;
+        border-radius: 18px;
+    }
+
+    :global(.uui-caption) {
+        line-height: 18px;
+        font-size: 12px;
+        padding: 7px 6px;
+    }
+}
+
+.size-42 {
+    min-width: 42px;
+
+    &:global(.uui-button-box) {
+        min-height: 42px;
+        border-radius: 21px;
+    }
+
+    :global(.uui-caption) {
+        line-height: 24px;
+        font-size: 14px;
+        padding: 7px 6px;
+    }
+}
+
diff --git a/epam-electric/components/buttons/PromoButton.ts b/epam-electric/components/buttons/PromoButton.ts
@@ -0,0 +1,28 @@
+import { withMods } from '@epam/uui-core';
+import { ButtonProps, Button } from '@epam/uui-components';
+import css from './PromoButton.module.scss';
+
+const defaultSize = '36';
+
+export type PromoButtonSize = '36' | '42';
+
+export interface PromoButtonMods {
+    size?: PromoButtonSize;
+}
+
+type ButtonPropsWithOmit = Omit<ButtonProps, 'count' | 'indicator' | 'dropdownIcon' | 'dropdownIconPosition' | 'isDropdown' | 'isOpen' | 'clearIcon' | 'countIndicator' | 'onClear' | 'toggleDropdownOpening'>;
+
+export type PromoButtonProps = ButtonPropsWithOmit & PromoButtonMods;
+
+export function applyButtonMods(mods: PromoButtonProps) {
+    return [
+        'uui-promo-button',
+        css.root,
+        css[`size-${mods.size || defaultSize}`],
+    ];
+}
+
+export const PromoButton = withMods<ButtonPropsWithOmit, PromoButtonMods>(
+    Button,
+    applyButtonMods,
+);
diff --git a/epam-electric/components/buttons/index.ts b/epam-electric/components/buttons/index.ts
@@ -0,0 +1 @@
+export * from './PromoButton';
diff --git a/epam-electric/components/index.ts b/epam-electric/components/index.ts
@@ -1,3 +1,4 @@
+export * from './buttons';
 export {
     Button, IconButton, LinkButton, TabButton, VerticalTabButton, Calendar, DatePicker, DataPickerBody, RangeDatePicker, RangeDatePickerBody, TextInput, Text,
     LabeledInput, Panel, FlexRow, ScrollBars, ModalWindow, Badge, InputAddon, MultiSwitch, VirtualList, Alert, DropdownContainer, NotificationCard, Tooltip,

diff --git a/epam-electric/package.json b/epam-electric/package.json
@@ -13,7 +13,9 @@
   },
   "dependencies": {
     "@epam/assets": "5.3.0-rc.1",
-    "@epam/uui": "5.3.0-rc.1"
+    "@epam/uui": "5.3.0-rc.1",
+    "@epam/uui-components": "5.3.0-rc.1",
+    "@epam/uui-core": "5.3.0-rc.1"
   },
   "devDependencies": {
     "mockdate": "^3.0.5"