Merge branch 'master' into add-backgroundColor-and-color-on-the-event…

…s-prop-on-the-WeeklyCalendar-component
nexxtway · Oct 25, 2020 · 5d62458 · 5d62458
2 parents 300ff94 + 2a714e0
commit 5d62458
Show file tree

Hide file tree

Showing 7 changed files with 382 additions and 5,193 deletions.
diff --git a/src/components/ButtonIcon/styled/button.js b/src/components/ButtonIcon/styled/button.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
 import { COLOR_WHITE, COLOR_GRAY_3, COLOR_DARK_1 } from '../../../styles/colors';
-import { lighten } from '../../../styles/helpers/color';
+import { lighten, colorToRgba, replaceAlpha } from '../../../styles/helpers/color';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
 const StyledButton = attachThemeAttrs(styled.button).attrs(props => {
@@ -269,54 +269,61 @@ const StyledButton = attachThemeAttrs(styled.button).attrs(props => {
                 background-color: transparent;
             }
         `};
-    ${props =>
-        props.variant === 'inverse' &&
-        `
-            background-color: transparent;
-            border: 1px solid transparent;
-            color: ${props.inverse.text};
-        
-            &:hover,
-            &:focus,
-            &:active {
-                color: ${props.inverse.active};
-            }
-        
-            &:focus {
-                outline: none;
-                box-shadow: ${props.shadows.shadow_5};
-            }
-        
-            &[disabled] {
-                background-color: transparent;
-                color: ${props.inverse.disabled};
-            }
-        `};
-    ${props =>
-        props.variant === 'border-inverse' &&
-        `
-            background-color: transparent;
-            border: 1px solid ${props.inverse.border};
-            color: ${props.inverse.text};
-        
-            &:hover,
-            &:focus,
-            &:active {
-                border-color: ${props.inverse.active};
-                color: ${props.inverse.active};
-            }
-        
-            &:focus {
-                outline: none;
-                box-shadow: ${props.shadows.shadow_5};
-            }
-        
-            &[disabled] {
+    ${props => {
+        const inverseBackgroundColor = replaceAlpha(colorToRgba(props.inverse.active), 0.1);
+
+        if (props.variant === 'inverse') {
+            return `
+                    background-color: transparent;
+                    border: 1px solid transparent;
+                    color: ${props.inverse.text};
+                
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        color: ${props.inverse.active};
+                        background-color: ${inverseBackgroundColor}
+                    }
+                
+                    &:focus {
+                        outline: none;
+                        box-shadow: ${props.shadows.shadow_5};
+                    }
+                
+                    &[disabled] {
+                        background-color: transparent;
+                        color: ${props.inverse.disabled};
+                    }
+                `;
+        }
+        return (
+            props.variant === 'border-inverse' &&
+            `
                 background-color: transparent;
-                border-color: ${props.inverse.disabled};
-                color: ${props.inverse.disabled};
-            }
-        `};
+                border: 1px solid ${props.inverse.border};
+                color: ${props.inverse.text};
+            
+                &:hover,
+                &:focus,
+                &:active {
+                    border-color: ${props.inverse.active};
+                    color: ${props.inverse.active};
+                    background-color: ${inverseBackgroundColor}
+                }
+            
+                &:focus {
+                    outline: none;
+                    box-shadow: ${props.shadows.shadow_5};
+                }
+            
+                &[disabled] {
+                    background-color: transparent;
+                    border-color: ${props.inverse.disabled};
+                    color: ${props.inverse.disabled};
+                }
+            `
+        );
+    }};
     ${props =>
         props.shaded &&
         `

diff --git a/src/components/Calendar/doubleCalendar/yearSelect/index.js b/src/components/Calendar/doubleCalendar/yearSelect/index.js
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback, useState } from 'react';
+import React, { useRef, useEffect, useCallback, useState, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { HiddenElement } from '../../../Structural';
 import { useUniqueIdentifier } from '../../../../libs/hooks';
@@ -7,12 +7,13 @@ import { StyledContainer, StyledSelect } from './styled';
 
 const YearSelect = React.forwardRef((props, ref) => {
     const { currentYear, yearsRange, onYearChange, onClick, onFocus, onBlur, tabIndex } = props;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const selectRef = ref || useRef(); // TODO: fix useRef to not use it conditionally
+    const selectRef = useRef();
     const selectId = useUniqueIdentifier('select');
     const [isEditMode, setEditMode] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
 
+    useImperativeHandle(ref, () => selectRef.current, []);
+
     const handleYearChange = useCallback(
         value => {
             selectRef.current.blur();