Merge pull request #353 from qoretechnologies/foxhoundn/bug-collapsed…

…-panel-has-352

Fixed panel padding, changed font size, dropdown fix

migration-storybook.log

@@ -2,87 +2,55 @@
 
 ⚠️  failed to check fix new-frameworks
 
-Error: ❌ Your project should be upgraded to use the framework package @storybook/react-webpack5, but we detected that you are using Vite 2.9.15, which is unsupported in Storybook 7.0. Please upgrade Vite to 3.0.0 or higher and rerun this migration.
-    at Object.check (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:205:8731)
-    at async runFixes (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:388:1239)
-    at async automigrate (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:385:676)
-    at async doUpgrade (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:417:3419)
-    at async withTelemetry (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/core-server/dist/index.js:113:3725)
-    at async upgrade (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:417:3865)
-
-🔎 found a 'storybook-binary' migration:
-╭ Automigration detected ─────────────────────────────────────╮
-│                                                             │
-│   We've detected you are using Storybook 7.1.1 without      │
-│   Storybook's storybook binary. Starting in Storybook       │
-│   7.0, it has to be installed.                              │
-│                                                             │
-│                                                             │
-│   More info: https://github.com/storybookjs/storybook/blo   │
-│   b/next/MIGRATION.md#start-storybook--build-storybook-bi   │
-│   naries-removed                                            │
-│                                                             │
-╰─────────────────────────────────────────────────────────────╯
-? Do you want to run the 'storybook-binary' migration on your project? › (Y/n)✔ Do you want to run the 'storybook-binary' migration on your project? … yes
-
-✅ Adding 'storybook' as dev dependency
-
-✅ ran storybook-binary migration
-
-🔎 found a 'sb-scripts' migration:
-╭ Automigration detected ─────────────────────────────────────╮
-│                                                             │
-│   We've detected you are using Storybook 7.1.1 with         │
-│   scripts from previous versions of Storybook.              │
-│   Starting in Storybook 7, the start-storybook and          │
-│   build-storybook binaries have changed to storybook dev    │
-│   and storybook build respectively.                         │
-│   In order to work with Storybook 7.1.1, your storybook     │
-│   scripts have to be adjusted to use the binary. We can     │
-│   adjust them for you:                                      │
-│                                                             │
-│   storybook                                                 │
-│   from:                                                     │
-│   start-storybook -p 6007 --no-dll                          │
-│   to:                                                       │
-│   storybook dev -p 6007 --no-dll                            │
-│                                                             │
-│   build-storybook                                           │
-│   from:                                                     │
-│   build-storybook                                           │
-│   to:                                                       │
-│   storybook build                                           │
-│                                                             │
-│   In case this migration did not cover all of your          │
-│   scripts, or you'd like more info: https://github.com/st   │
-│   orybookjs/storybook/blob/next/MIGRATION.md#start-storyb   │
-│   ook--build-storybook-binaries-removed                     │
-│                                                             │
-╰─────────────────────────────────────────────────────────────╯
-? Do you want to run the 'sb-scripts' migration on your project? › (Y/n)✔ Do you want to run the 'sb-scripts' migration on your project? … yes
-✅ Updating scripts in package.json
-
-
-✅ ran sb-scripts migration
+Error: ❌ Your project should be upgraded to use the framework package @storybook/react-webpack5, but we detected that you are using Vite 2.9.16, which is unsupported in Storybook 7.0. Please upgrade Vite to 3.0.0 or higher and rerun this migration.
+    at Object.check (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:221:8731)
+    at async runFixes (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:404:1239)
+    at async automigrate (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:401:676)
+    at async doUpgrade (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:433:3535)
+    at async withTelemetry (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/core-server/dist/index.js:103:3903)
+    at async upgrade (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:433:3981)
+
+🔎 found a 'eslintPlugin' migration:
+╭ Automigration detected ────────────────────╮
+│                                            │
+│   We've detected you are not using our     │
+│   eslint-plugin.                           │
+│                                            │
+│   In order to have the best experience     │
+│   with Storybook and follow best           │
+│   practices, we advise you to install      │
+│   eslint-plugin-storybook.                 │
+│                                            │
+│   More info: https://github.com/storyboo   │
+│   kjs/eslint-plugin-storybook#readme       │
+│                                            │
+╰────────────────────────────────────────────╯
+? Do you want to run the 'eslintPlugin' migration on your project? › (Y/n)✔ Do you want to run the 'eslintPlugin' migration on your project? … no
 
 🔎 found a 'autodocsTrue' migration:
-╭ Automigration detected ─────────────────────────────────────╮
-│                                                             │
-│   We've changed the configuration of autodocs (previous     │
-│   docsPage), so now the value:                              │
-│   - docs.autodocs: true -- means automatically create       │
-│   docs for every CSF file                                   │
-│   - docs.autodocs: 'tag' -- means only create autodocs      │
-│   for CSF files with the 'autodocs' tag                     │
-│   - docs.autodocs: false -- means never create autodocs     │
-│                                                             │
-│   Based on your prior configuration,  we can set the        │
-│   `docs.autodocs` to keep your old behaviour:               │
-│                                                             │
-│   docs: { autodocs: true }                                  │
-│                                                             │
-│   More info: https://github.com/storybookjs/storybook/blo   │
-│   b/next/MIGRATION.md#autodocs-changes                      │
-│                                                             │
-╰─────────────────────────────────────────────────────────────╯
+╭ Automigration detected ────────────────────╮
+│                                            │
+│   We've changed the configuration of       │
+│   autodocs (previous docsPage), so now     │
+│   the value:                               │
+│   - docs.autodocs: true -- means           │
+│   automatically create docs for every      │
+│   CSF file                                 │
+│   - docs.autodocs: 'tag' -- means only     │
+│   create autodocs for CSF files with the   │
+│   'autodocs' tag                           │
+│   - docs.autodocs: false -- means never    │
+│   create autodocs                          │
+│                                            │
+│   Based on your prior configuration,  we   │
+│   can set the `docs.autodocs` to keep      │
+│   your old behaviour:                      │
+│                                            │
+│   docs: { autodocs: true }                 │
+│                                            │
+│   More info: https://github.com/storyboo   │
+│   kjs/storybook/blob/next/MIGRATION.md#a   │
+│   utodocs-changes                          │
+│                                            │
+╰────────────────────────────────────────────╯
 ? Do you want to run the 'autodocsTrue' migration on your project? › (Y/n)✔ Do you want to run the 'autodocsTrue' migration on your project? … no

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.38.1",
+  "version": "0.38.2",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,21 +43,21 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@chromaui/addon-visual-tests": "^0.0.98",
-    "@storybook/addon-actions": "^7.1.1",
-    "@storybook/addon-essentials": "^7.1.1",
-    "@storybook/addon-interactions": "^7.1.1",
-    "@storybook/addon-links": "^7.1.1",
-    "@storybook/builder-webpack5": "^7.1.1",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/manager-api": "^7.1.1",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/builder-webpack5": "^7.5.1",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^7.5.1",
     "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^7.1.1",
-    "@storybook/react-webpack5": "^7.1.1",
-    "@storybook/test-runner": "^0.9.4",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
-    "@storybook/theming": "^7.1.1",
-    "@storybook/types": "^7.1.1",
+    "@storybook/theming": "^7.5.1",
+    "@storybook/types": "^7.5.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^26.0.19",
@@ -82,7 +82,7 @@
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.2",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^7.1.1",
+    "storybook": "^7.5.1",
     "ts-jest": "^29.0.5",
     "ts-node": "^9.1.1",
     "typescript": "^4.7.3",

src/components/Button/index.tsx

@@ -2,11 +2,11 @@ import { rgba } from 'polished';
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
+  CONTROL_TEXT_FROM_SIZE,
   ICON_FROM_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
-  TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
@@ -64,6 +64,7 @@ export interface IReqoreButtonProps
   fixed?: boolean;
   active?: boolean;
   flat?: boolean;
+  compact?: boolean;
   rightIcon?: IReqoreIconName;
   customTheme?: IReqoreCustomTheme;
   wrap?: boolean;
@@ -121,8 +122,9 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   vertical-align: middle;
   border: ${({ theme, color, flat }) =>
     !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.2)}` : 0};
-  padding: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
-  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
+  padding: 0
+    ${({ size, compact }) => (compact ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size])}px;
+  font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
 
   min-height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;

src/components/Checkbox/index.tsx

@@ -2,7 +2,12 @@ import { rgba } from 'polished';
 import React, { forwardRef, useMemo, useState } from 'react';
 import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
-import { PADDING_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import {
+  CONTROL_TEXT_FROM_SIZE,
+  PADDING_FROM_SIZE,
+  SIZE_TO_PX,
+  TSizes,
+} from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import {
   changeLightness,
@@ -135,7 +140,7 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
   transition: all 0.2s ease-out;
 
   height: ${({ size }) => SIZE_TO_PX[size]}px;
-  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
+  font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
 
   max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};

src/components/Dropdown/item.tsx

@@ -18,7 +18,7 @@ export const ReqoreDropdownItem = memo(
     return (
       <ReqoreMenuItem
         {...rest}
-        _insidePopover={size(rest.items) ? false : undefined}
+        _insidePopover={size(rest.items) ? false : rest._insidePopover}
         label={rest.label || rest.value}
         onClick={handleItemClick}
         rightIcon={rest.selected ? 'CheckLine' : rest.rightIcon}

src/components/Input/index.tsx

@@ -3,10 +3,10 @@ import { rgba } from 'polished';
 import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
+  CONTROL_TEXT_FROM_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
-  TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
@@ -72,11 +72,17 @@ export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   min-width: 60px;
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 1 auto')};
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
-  font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
+  font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
   position: relative;
   overflow: hidden;
   border-radius: ${({ minimal, rounded, _size }) =>
     minimal || rounded === false ? 0 : RADIUS_FROM_SIZE[_size]}px;
+
+  &:focus-within {
+    .reqore-clear-input-button {
+      display: flex;
+    }
+  }
 `;
 
 const StyledIconWrapper = styled.div<IReqoreInputStyle>`
@@ -109,7 +115,7 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   }}px;
 
   padding-left: ${({ hasIcon, _size }) => (hasIcon ? SIZE_TO_PX[_size] : 7)}px;
-  font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
+  font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
   transition: all 0.2s ease-out;
   border-radius: ${({ minimal, rounded, _size }) =>
     minimal || rounded === false ? 0 : RADIUS_FROM_SIZE[_size]}px;

src/components/InputClearButton/index.tsx

@@ -19,6 +19,7 @@ export const StyledInputClearButton = styled(ReqoreIcon)<{ show?: boolean }>`
   align-items: center;
   transition: all 0.1s ease-out;
   cursor: pointer;
+  display: none;
 
   &:hover {
     opacity: 1 !important;

src/components/Menu/item.tsx

@@ -67,7 +67,7 @@ const ReqoreMenuItem = memo(
             removePopover!(_popoverId);
           }
         },
-        [itemId, _insidePopover, _popoverId, onClick]
+        [itemId, _insidePopover, _popoverId, onClick, removePopover]
       );
 
       const handleRightIconClick = useCallback(
@@ -83,7 +83,7 @@ const ReqoreMenuItem = memo(
             }
           }
         },
-        [itemId, _insidePopover, _popoverId, onRightIconClick]
+        [itemId, _insidePopover, _popoverId, onRightIconClick, removePopover]
       );
 
       useEffect(() => {

src/components/Panel/index.tsx

@@ -306,8 +306,12 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
 `;
 
 export const StyledPanelTopBar = styled(StyledPanelTitle)`
-  padding-bottom: ${({ minimal, padded, size, transparent }: IStyledPanel) =>
-    !padded ? `${PADDING_FROM_SIZE[size]}px` : minimal || transparent ? 0 : undefined};
+  padding-bottom: ${({ minimal, padded, size, transparent, isCollapsed }: IStyledPanel) =>
+    !padded || isCollapsed
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : minimal || transparent
+      ? 0
+      : undefined};
   padding-top: ${({ minimal, size }: IStyledPanel) =>
     minimal ? `${PADDING_FROM_SIZE[size]}px` : undefined};
 `;

src/components/Tabs/list.tsx

@@ -5,10 +5,10 @@ import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem, IReqoreTabsProps } from '.';
 import { ReqorePopover } from '../..';
 import {
+  CONTROL_TEXT_FROM_SIZE,
   GAP_FROM_SIZE,
   ICON_FROM_SIZE,
   PADDING_FROM_SIZE,
-  TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreBreadcrumbsTheme, IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
@@ -100,8 +100,10 @@ const getBadgeLength = (badge: IReqoreButtonProps['badge'], tabsSize: TSizes = '
   }
 
   return (
-    calculateStringSizeInPixels(badge.toString(), TEXT_FROM_SIZE[getOneLessSize(tabsSize)]) +
-    PADDING_FROM_SIZE[tabsSize]
+    calculateStringSizeInPixels(
+      badge.toString(),
+      CONTROL_TEXT_FROM_SIZE[getOneLessSize(tabsSize)]
+    ) + PADDING_FROM_SIZE[tabsSize]
   );
 };
 
@@ -133,11 +135,11 @@ export const getLabelLength = (
     ? 0
     : calculateStringSizeInPixels(
         (item as IReqoreBreadcrumbItem | IReqoreTabsListItem)?.description?.toString(),
-        TEXT_FROM_SIZE[getOneLessSize(tabsSize)]
+        CONTROL_TEXT_FROM_SIZE[getOneLessSize(tabsSize)]
       );
 
   const topLabelLength =
-    calculateStringSizeInPixels(label?.toString(), TEXT_FROM_SIZE[tabsSize]) +
+    calculateStringSizeInPixels(label?.toString(), CONTROL_TEXT_FROM_SIZE[tabsSize]) +
     icon +
     rightIcon +
     closeIconSize +