Merge pull request #410 from qoretechnologies/bugfix/modal-blur-fix

Mostly UX and accesibility fixes.
qoretechnologies · Nov 27, 2024 · d90ded0 · d90ded0
2 parents 953a9be + b4c11bd
commit d90ded0
Show file tree

Hide file tree

Showing 15 changed files with 312 additions and 225 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.8",
+  "version": "0.48.9",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,5 +1,5 @@
 import { size } from 'lodash';
-import { rgba } from 'polished';
+import { rgba, tint } from 'polished';
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
@@ -64,6 +64,7 @@ export interface IReqoreButtonProps
   icon?: IReqoreIconName;
   size?: TSizes;
   minimal?: boolean;
+  transparent?: boolean;
   tooltip?: TReqoreTooltipProp;
   fluid?: boolean;
   fixed?: boolean;
@@ -129,17 +130,18 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   flex-flow: column;
   justify-content: center;
   margin: 0;
-  font-weight: 600;
+  font-weight: 500;
   position: relative;
   overflow: hidden;
   vertical-align: middle;
   border: ${({ theme, color, flat }) =>
-    !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.2)}` : 0};
+    !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.05)}` : 0};
   padding: ${({ size, compact, verticalPadding }) =>
     `${verticalPadding ? PADDING_FROM_SIZE[verticalPadding] : 0}px ${
       compact ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]
     }px`};
   font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
+  outline-offset: -2px;
 
   min-height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
@@ -165,24 +167,30 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       ? 9999
       : RADIUS_FROM_SIZE[size] * (pill ? PILL_RADIUS_MODIFIER : 1)}px;
 
-  background-color: ${({ minimal, color }) => {
-    if (minimal) {
+  background-color: ${({ minimal, color, theme, transparent }) => {
+    if (transparent) {
       return 'transparent';
     }
 
+    if (minimal) {
+      return css`
+        ${rgba(getButtonMainColor(theme, color), 0.2)}
+      `;
+    }
+
     return color;
   }};
 
-  color: ${({ theme, color, minimal }) =>
+  color: ${({ theme, color, minimal, transparent }) =>
     color
-      ? minimal
-        ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
+      ? minimal || transparent
+        ? tint(0.75, color)
         : getReadableColorFrom(color, true)
       : getReadableColor(theme, undefined, undefined, true)};
 
   ${InactiveIconScale}
 
-  ${({ readOnly, animate, active }) =>
+  ${({ readOnly, animate, active, theme, color }) =>
     !readOnly && !active
       ? css`
           &:not(:disabled) {
@@ -192,24 +200,35 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             transition: all 0.2s ease-out;
 
             &:active {
-              transform: scale(0.97);
+              outline: 3px solid ${changeLightness(getButtonMainColor(theme, color), 0.25)};
+              outline-offset: -3px;
+              transition: none;
+            }
+
+            &:hover:not(:active) {
+              outline: 2px solid ${changeLightness(getButtonMainColor(theme, color), 0.25)};
+              transition: none;
             }
 
             &:hover,
-            &:active,
-            &:focus {
-              background-color: ${({ theme, color, minimal }: IReqoreButtonStyle) =>
-                minimal
-                  ? rgba(changeLightness(getButtonMainColor(theme, color), 0.05), 0.2)
-                  : changeLightness(getButtonMainColor(theme, color), 0.05)};
-              color: ${({ theme, color, minimal }) =>
-                getReadableColor(
-                  { main: minimal ? theme.originalMain : getButtonMainColor(theme, color) },
-                  undefined,
-                  undefined
-                )};
+            &:active {
               border-color: ${({ flat, theme, color }) =>
-                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.35)};
+                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.25)};
+              background-color: ${({ theme, color, minimal, transparent }: IReqoreButtonStyle) =>
+                minimal || transparent
+                  ? rgba(
+                      changeLightness(getButtonMainColor(theme, color), 0.05),
+                      transparent ? 0.2 : 0.4
+                    )
+                  : changeLightness(getButtonMainColor(theme, color), 0.05)};
+              color: ${({ theme, color, minimal, transparent }) =>
+                minimal || transparent
+                  ? tint(0.85, color)
+                  : getReadableColor(
+                      { main: minimal ? theme.originalMain : getButtonMainColor(theme, color) },
+                      undefined,
+                      undefined
+                    )};
 
               ${animate &&
               css`
@@ -267,12 +286,10 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   &:focus,
   &:active {
-    outline: none;
-  }
-
-  &:focus {
+    outline: 2px solid
+      ${({ theme, color }) => changeLightness(getButtonMainColor(theme, color), 0.1)};
     border-color: ${({ minimal, theme, color }) =>
-      minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.4)};
+      minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
   }
 
   .reqore-button-description {
@@ -385,6 +402,7 @@ const ReqoreButton = memo(
         icon,
         size = 'normal',
         minimal,
+        transparent,
         children,
         tooltip,
         className,
@@ -431,7 +449,7 @@ const ReqoreButton = memo(
 
       // If color or intent was specified, set the color
       const customColor = intent ? theme.main : changeLightness(theme.main, 0.07);
-      const _flat = minimal ? flat : flat !== false;
+      const _flat = minimal ? flat : flat === true;
       const _compact = compact ?? theme.buttons?.compact;
       const color: TReqoreHexColor = customColor
         ? minimal
@@ -478,7 +496,9 @@ const ReqoreButton = memo(
           fixed={fixed}
           maxWidth={maxWidth}
           minimal={minimal}
+          transparent={transparent}
           size={size}
+          intent={intent}
           color={customColor}
           animate={animate}
           flat={_flat}
@@ -498,11 +518,13 @@ const ReqoreButton = memo(
                   compact={_compact}
                   {...leftIconProps}
                   style={
-                    textAlign !== 'left' || iconsAlign === 'center'
+                    textAlign !== 'left' || iconsAlign === 'center' || !_children
                       ? {
-                          marginRight: iconsAlign !== 'center' || !children ? 'auto' : undefined,
+                          marginRight: iconsAlign !== 'center' || !_children ? 'auto' : undefined,
                           marginLeft:
-                            iconsAlign === 'center' || (textAlign === 'center' && !_children)
+                            iconsAlign === 'center' ||
+                            !_children ||
+                            (textAlign === 'center' && !_children)
                               ? 'auto'
                               : undefined,
                         }

diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
@@ -110,6 +110,12 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   ${StyledIconWrapper} {
     z-index: 1;
   }
+
+  &:focus,
+  &:active {
+    outline: 2px solid ${({ theme }) => changeLightness(theme.main, 0.25)};
+    outline-offset: -2px;
+  }
 `;
 
 const StyledSwitchTextWrapper = styled(StyledTextEffect)`
@@ -257,6 +263,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
         {asSwitch ? (
           <StyledSwitch
             size={size}
+            tabIndex='0'
             labelPosition={labelPosition}
             checked={checked}
             theme={theme}
@@ -348,6 +355,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
         ) : (
           <ReqoreIcon
             size={size}
+            tabIndex={0}
             icon={
               !image
                 ? checked

diff --git a/src/components/ControlGroup/index.tsx b/src/components/ControlGroup/index.tsx
@@ -14,6 +14,7 @@ import {
   IWithReqoreMinimal,
   IWithReqoreSize,
 } from '../../types/global';
+import { IReqoreButtonProps } from '../Button';
 import { StyledEffect } from '../Effect';
 import { StyledHeader } from '../Header';
 import { StyledParagraph } from '../Paragraph';
@@ -52,6 +53,7 @@ export interface IReqoreControlGroupComponentProps
   isFirstGroup?: boolean;
   isLastGroup?: boolean;
   fill?: boolean;
+  overflowButtonProps?: IReqoreButtonProps;
 }
 
 export interface IReqoreControlGroupProps
@@ -167,6 +169,7 @@ const ReqoreControlGroup = memo(
     verticalAlign = 'center',
     horizontalAlign = 'flex-start',
     responsive,
+    overflowButtonProps,
     ...rest
   }: IReqoreControlGroupProps) => {
     const isStack = stack || isInsideStackGroup;
@@ -467,9 +470,9 @@ const ReqoreControlGroup = memo(
                   ),
                 }}
                 active={isOverflownDialogOpen}
-                flat
                 fixed
                 onClick={(e) => e.stopPropagation()}
+                {...overflowButtonProps}
               />,
             ]
           : children,