feat: add animations for hover and active states (#3219)

skbkontur · Aug 2, 2023 · 51a6165 · 51a6165
1 parent 39c07d4
commit 51a6165
Show file tree

Hide file tree

Showing 50 changed files with 119 additions and 79 deletions.
diff --git a/...l tests/Calendar with min max date/DateSelect months/ie11/DateSelect months.png b/...l tests/Calendar with min max date/DateSelect months/ie11/DateSelect months.png
diff --git a/...nal tests/Calendar with min max date/DateSelect years/ie11/DateSelect years.png b/...nal tests/Calendar with min max date/DateSelect years/ie11/DateSelect years.png
diff --git a/...iew/input like text/focused first element/firefox2022/focused first element.png b/...iew/input like text/focused first element/firefox2022/focused first element.png
diff --git a/...input like text/focused first element/firefox2022Dark/focused first element.png b/...input like text/focused first element/firefox2022Dark/focused first element.png
diff --git a/...ePicker/DatePicker with min max date/DateSelect years/ie11/DateSelect years.png b/...ePicker/DatePicker with min max date/DateSelect years/ie11/DateSelect years.png
diff --git a/...atePicker/with mouseevent handlers/DateSelect year/ie112022/DateSelect year.png b/...atePicker/with mouseevent handlers/DateSelect year/ie112022/DateSelect year.png
diff --git a/...icker/with mouseevent handlers/DateSelect year/ie112022Dark/DateSelect year.png b/...icker/with mouseevent handlers/DateSelect year/ie112022Dark/DateSelect year.png
diff --git a/...eevey/images/ScrollContainer/Hide Scroll Bar/hideScroll/chrome/duringScroll.png b/...eevey/images/ScrollContainer/Hide Scroll Bar/hideScroll/chrome/duringScroll.png
diff --git a/...act-ui/.creevey/images/Select/Simple/MenuItem hover/ie112022/MenuItem hover.png b/...act-ui/.creevey/images/Select/Simple/MenuItem hover/ie112022/MenuItem hover.png
diff --git a/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png b/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png
diff --git a/packages/react-ui/.creevey/images/Select/Simple/clicked/ie112022/clicked.png b/packages/react-ui/.creevey/images/Select/Simple/clicked/ie112022/clicked.png
diff --git a/.../react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png b/.../react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png
diff --git a/.../react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png b/.../react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png
diff --git a/...react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png b/...react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png
diff --git a/...ges/react-ui/.creevey/images/Select/with search/search/ie112022/emptySearch.png b/...ges/react-ui/.creevey/images/Select/with search/search/ie112022/emptySearch.png
diff --git a/...ges/react-ui/.creevey/images/Select/with search/search/ie112022/plainSearch.png b/...ges/react-ui/.creevey/images/Select/with search/search/ie112022/plainSearch.png
diff --git a/...es/react-ui/.creevey/images/Select/with search/search/ie112022/pressKeyDown.png b/...es/react-ui/.creevey/images/Select/with search/search/ie112022/pressKeyDown.png
diff --git a/...vey/images/Select/with text overflow/MenuItem hover/ie112022/MenuItem hover.png b/...vey/images/Select/with text overflow/MenuItem hover/ie112022/MenuItem hover.png
diff --git a/...ct-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png b/...ct-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png
diff --git a/...react-ui/.creevey/images/Select/with text overflow/clicked/ie112022/clicked.png b/...react-ui/.creevey/images/Select/with text overflow/clicked/ie112022/clicked.png
diff --git a/... while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png b/... while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png
diff --git a/...while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png b/...while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png
diff --git a/...wn while Loader is inactive/ie112022/Open Dropdown while Loader is inactive.png b/...wn while Loader is inactive/ie112022/Open Dropdown while Loader is inactive.png
diff --git a/...ge covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png b/...ge covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png
diff --git a/...ePage covers Select and Tooltip/ie112022/SidePage covers Select and Tooltip.png b/...ePage covers Select and Tooltip/ie112022/SidePage covers Select and Tooltip.png
diff --git a/...pdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png b/...pdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png
diff --git a/...downContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png b/...downContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png
diff --git a/...ropdownContainer/ie112022/Sticky covers outside Popup and DropdownContainer.png b/...ropdownContainer/ie112022/Sticky covers outside Popup and DropdownContainer.png
diff --git a/...ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png b/...ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png
diff --git a/...es/ZIndex/Tooltip and Select/Menu covers tooltip/ie112022/Modal covers hint.png b/...es/ZIndex/Tooltip and Select/Menu covers tooltip/ie112022/Modal covers hint.png
diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts
@@ -29,6 +29,9 @@ export const styles = memoizeStyle({
       ${resetButton()};
       ${resetText()};
 
+      transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction}
+        ${t.btnBorderColorTransition ? `, ${t.btnBorderColorTransition}` : ''};
+
       background-clip: ${t.btnBackgroundClip};
       background-position: center;
       background-repeat: no-repeat;

diff --git a/packages/react-ui/components/Calendar/Calendar.styles.ts b/packages/react-ui/components/Calendar/Calendar.styles.ts
@@ -5,7 +5,6 @@ export const styles = memoizeStyle({
   root(t: Theme) {
     const width = parseInt(t.calendarCellSize) * 7;
     return css`
-      display: inline-block;
       background: ${t.calendarBg};
       box-sizing: content-box;
       border-radius: ${t.pickerBorderRadius};

diff --git a/packages/react-ui/components/Checkbox/Checkbox.styles.ts b/packages/react-ui/components/Checkbox/Checkbox.styles.ts
@@ -18,6 +18,11 @@ export const styles = memoizeStyle({
       font-size: ${t.checkboxFontSize};
       padding: ${t.checkboxPaddingY} 0;
 
+      .${globalClasses.box} {
+        transition: background ${t.transitionDuration} ${t.transitionTimingFunction},
+          box-shadow ${t.transitionDuration} ${t.transitionTimingFunction};
+      }
+
       &:hover .${globalClasses.box} {
         background: ${t.checkboxHoverBg};
         box-shadow: ${t.checkboxShadowHover};

diff --git a/packages/react-ui/components/Dropdown/getDropdownTheme.ts b/packages/react-ui/components/Dropdown/getDropdownTheme.ts
@@ -6,6 +6,8 @@ export const getDropdownTheme = (theme: Theme): Theme => {
     {
       selectDefaultBg: theme.btnDefaultBg,
       selectMenuOffsetY: theme.dropdownMenuOffsetY,
+      selectBorderColorHover: theme.dropdownMenuHoverBorderColor,
+      selectBorderColorTransition: theme.dropdownMenuBorderColorTransition,
     },
     theme,
   );

diff --git a/packages/react-ui/components/FileUploader/FileUploader.styles.ts b/packages/react-ui/components/FileUploader/FileUploader.styles.ts
@@ -65,7 +65,8 @@ const styles = {
       outline: none;
       cursor: pointer;
       padding: ${t.fileUploaderPaddingY} ${t.fileUploaderPaddingX};
-      transition: box-shadow 0.3s ease;
+      transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction},
+        border-color ${t.transitionDuration} ${t.transitionTimingFunction};
       background-color: ${t.fileUploaderUploadButtonBg};
     `;
   },

diff --git a/packages/react-ui/components/Input/Input.styles.ts b/packages/react-ui/components/Input/Input.styles.ts
@@ -36,6 +36,7 @@ export const styles = memoizeStyle({
       background-color: ${t.inputBg};
       border: ${t.inputBorderWidth} solid ${t.inputBorderColor};
       border-top-color: ${t.inputBorderTopColor};
+      transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction};
       box-shadow: ${t.inputShadow};
       box-sizing: border-box;
       color: ${t.inputColor};

diff --git a/packages/react-ui/components/Radio/Radio.styles.ts b/packages/react-ui/components/Radio/Radio.styles.ts
@@ -37,6 +37,10 @@ export const styles = memoizeStyle({
       line-height: ${t.radioLineHeight};
       font-size: ${t.radioFontSize};
 
+      .${globalClasses.circle} {
+        transition: background ${t.transitionDuration} ${t.transitionTimingFunction};
+      }
+
       &:hover .${globalClasses.circle} {
         background: ${t.radioHoverBg};
         box-shadow: ${t.radioHoverShadow};

diff --git a/packages/react-ui/components/Select/selectTheme.ts b/packages/react-ui/components/Select/selectTheme.ts
@@ -37,6 +37,9 @@ export const getSelectTheme = (theme: Theme, props: SelectProps<any, any>): Them
       btnDisabledBg: theme.selectBgDisabled,
       btnDisabledBorderColor: theme.selectBorderColorDisabled,
       btnDisabledTextColor: theme.selectTextColorDisabled,
+
+      btnDefaultHoverBorderColor: theme.selectBorderColorHover,
+      btnBorderColorTransition: theme.selectBorderColorTransition,
     },
     theme,
   );

diff --git a/packages/react-ui/components/Tabs/Tab.styles.ts b/packages/react-ui/components/Tabs/Tab.styles.ts
@@ -181,7 +181,7 @@ function tabRoot(t: Theme, size: TabSize) {
     padding-top: ${paddingY(t, size)};
     position: relative;
     text-decoration: inherit;
-    transition: border-bottom 0.2s ease-out;
+    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};
 
     &:hover {
       outline: inherit;

diff --git a/packages/react-ui/components/Textarea/Textarea.styles.ts b/packages/react-ui/components/Textarea/Textarea.styles.ts
@@ -29,7 +29,7 @@ export const styles = memoizeStyle({
       min-height: ${t.textareaMinHeight};
       outline: none;
       padding: ${t.textareaPaddingY} ${t.textareaPaddingX};
-      transition: height 0.2s ease-out;
+      transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction}, height 0.2s ease-out;
       vertical-align: middle;
       width: 100%;
       border-radius: ${t.textareaBorderRadius};

diff --git a/packages/react-ui/components/Toast/ToastView.styles.ts b/packages/react-ui/components/Toast/ToastView.styles.ts
@@ -61,7 +61,7 @@ export const styles = memoizeStyle({
       margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};
 
       padding: ${padding};
-
+      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};
       &:hover {
         background: ${t.toastLinkBgHover};
         text-decoration: ${t.toastLinkTextDecorationHover};

diff --git a/packages/react-ui/components/TokenInput/TokenInput.styles.ts b/packages/react-ui/components/TokenInput/TokenInput.styles.ts
@@ -25,6 +25,7 @@ export const styles = memoizeStyle({
       box-shadow: ${t.tokenInputShadow};
       border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColor};
       border-top-color: ${t.tokenInputBorderTopColor};
+      transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction};
       box-sizing: border-box;
       cursor: text;
       padding: ${t.tokenInputPaddingY} ${t.tokenInputPaddingX};

diff --git a/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.styles.tsx b/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.styles.tsx
@@ -11,6 +11,7 @@ export const styles = memoizeStyle({
       border-radius: ${t.closeBtnIconBorderRadius};
       color: ${t.closeBtnIconColor};
       cursor: pointer;
+      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};
 
       &:enabled:focus,
       &:enabled:hover {

diff --git a/packages/react-ui/internal/CustomComboBox/__stories__/ComboBoxView.stories.tsx b/packages/react-ui/internal/CustomComboBox/__stories__/ComboBoxView.stories.tsx
@@ -51,12 +51,14 @@ export const InputLikeText: Story = () => (
 );
 InputLikeText.storyName = 'input like text';
 
+const FIREFOX_REGEXP = /.*firefox.*/i;
+
 InputLikeText.parameters = {
   creevey: {
     skip: {
       // TODO @Khlutkova fix after update browsers
       'story-skip-0': {
-        in: ['firefox8px', 'firefoxFlat8px', 'firefox', 'firefoxDark'],
+        in: FIREFOX_REGEXP,
         tests: ['focused first element'],
       },
     },

diff --git a/packages/react-ui/internal/DateSelect/DateSelect.styles.ts b/packages/react-ui/internal/DateSelect/DateSelect.styles.ts
@@ -1,6 +1,10 @@
-import { css, memoizeStyle } from '../../lib/theming/Emotion';
+import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';
 import { Theme } from '../../lib/theming/Theme';
 
+export const globalClasses = prefix('select')({
+  arrow: 'arrow',
+});
+
 export const styles = memoizeStyle({
   root(t: Theme) {
     return css`
@@ -18,6 +22,14 @@ export const styles = memoizeStyle({
       &:hover {
         color: ${t.dateSelectLinkColor};
       }
+
+      & .${globalClasses.arrow} {
+        transition: fill ${t.transitionDuration} ${t.transitionTimingFunction};
+      }
+
+      &:hover .${globalClasses.arrow} {
+        fill: ${t.dateSelectTextColorDefault} !important;
+      }
     `;
   },
 

diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx
@@ -21,7 +21,7 @@ import { ArrowCollapseCVOpenIcon16Regular } from '../icons2022/ArrowCollapseCVOp
 import { ArrowCUpIcon16Regular } from '../icons2022/ArrowCUpIcon/ArrowCUpIcon16Regular';
 import { ArrowCDownIcon16Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular';
 
-import { styles } from './DateSelect.styles';
+import { globalClasses, styles } from './DateSelect.styles';
 
 const itemHeight = 24;
 const visibleYearsCount = 11;
@@ -234,7 +234,7 @@ export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectS
         <div data-tid={DateSelectDataTids.caption} className={styles.caption()}>
           {this.getItem(0)}
         </div>
-        {!disabled && <ArrowCollapseCVOpenIcon16Regular color="#ADADAD" />}
+        {!disabled && <ArrowCollapseCVOpenIcon16Regular className={cx(globalClasses.arrow)} color="#ADADAD" />}
         {this.state.opened && this.renderMenu()}
       </span>
     );

diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
@@ -198,6 +198,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
       [jsInputStyles.disabled(this.theme)]: !!disabled,
       [jsInputStyles.borderless()]: !!borderless,
       [jsInputStyles.focus(this.theme)]: focused,
+      [jsInputStyles.hovering(this.theme)]: !focused && !disabled && !warning && !error && !borderless,
       [jsInputStyles.blink(this.theme)]: blinking,
       [jsInputStyles.warning(this.theme)]: !!warning,
       [jsInputStyles.error(this.theme)]: !!error,