feat: focus-border (#184)

nshenderov · Dec 12, 2024 · c83d41e · c83d41e
1 parent e42f4f7
commit c83d41e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 23 deletions.
diff --git a/admin/src/components/Input/components/CKEReact.jsx b/admin/src/components/Input/components/CKEReact.jsx
@@ -11,15 +11,15 @@ export const CKEReact = ({
   disabled,
   maxLength,
   preset,
+  isMaxLength,
+  setIsMaxLength,
   setEditorInstance,
 }) => {
   const { onChange: fieldOnChange, value, error } = useField(name);
 
-  const [lengthMax, setLengthMax] = useState(false);
-
   const wordCounter = useRef(null);
 
-  const handleCounter = (number) => setLengthMax(number > maxLength);
+  const handleCounter = (number) => setIsMaxLength(number > maxLength);
 
   const hasWordCountPlugin = Boolean(preset.editorConfig.WordCountPlugin);
 
@@ -63,7 +63,7 @@ export const CKEReact = ({
       />
       {hasWordCountPlugin && (
         <WordCounterBox
-          color={lengthMax ? 'danger500' : 'neutral400'}
+          color={isMaxLength ? 'danger500' : 'neutral400'}
           ref={wordCounter}
         ></WordCounterBox>
       )}

diff --git a/admin/src/components/Input/components/Editor.jsx b/admin/src/components/Input/components/Editor.jsx
@@ -16,9 +16,10 @@ export const Editor = ({
   maxLength,
   placeholder,
 }) => {
-  const [mediaLibVisible, setMediaLibVisible] = useState(false);
-  const [editorInstance, setEditorInstance] = useState(false);
+  const [editorInstance, setEditorInstance] = useState(null);
   const [preset, setPreset] = useState(null);
+  const [isMaxLength, setIsMaxLength] = useState(false);
+  const [mediaLibVisible, setMediaLibVisible] = useState(false);
 
   const toggleMediaLib = () => setMediaLibVisible((prev) => !prev);
 
@@ -52,12 +53,18 @@ export const Editor = ({
   return (
     <>
       <GlobalStyling />
-      <EditorLayout presetStyles={preset.styles}>
+      <EditorLayout
+        presetStyles={preset.styles}
+        name={name}
+        isMaxLength={isMaxLength}
+      >
         <CKEReact
           name={name}
           preset={preset}
           disabled={disabled}
           maxLength={maxLength}
+          isMaxLength={isMaxLength}
+          setIsMaxLength={setIsMaxLength}
           setEditorInstance={setEditorInstance}
         />
         <MediaLib
@@ -76,4 +83,4 @@ const LoaderBox = styled(Box)`
   align-items: center;
   height: 200px;
   width: 100%;
-`;
+`;
diff --git a/admin/src/components/Input/components/EditorLayout.jsx b/admin/src/components/Input/components/EditorLayout.jsx
@@ -1,9 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Box, Flex, IconButton, FocusTrap, Portal } from '@strapi/design-system';
+import { useField } from '@strapi/strapi/admin';
+import {
+  Box,
+  Flex,
+  IconButton,
+  FocusTrap,
+  Portal,
+} from '@strapi/design-system';
 import { Expand, Collapse } from '@strapi/icons';
-import styled from 'styled-components';
+import { css, styled } from 'styled-components';
 
-export const EditorLayout = ({ children, presetStyles }) => {
+export const EditorLayout = ({ children, presetStyles, name, isMaxLength }) => {
+  const { error } = useField(name);
   const [isExpandedMode, setIsExpandedMode] = useState(false);
 
   const handleToggleExpand = () => setIsExpandedMode(true);
@@ -46,13 +54,12 @@ export const EditorLayout = ({ children, presetStyles }) => {
               <Flex height="100%" alignItems="flex-start" direction="column">
                 <EditorWrapper
                   $presetStyles={presetStyles}
+                  $isExpanded={isExpandedMode}
+                  $hasError={Boolean(error) || isMaxLength}
                   className={isExpandedMode ? 'ck-editor__expanded' : ''}
                 >
                   {children}
-                  <CollapseButton
-                    label="Collapse"
-                    onClick={handleOnCollapse}
-                  >
+                  <CollapseButton label="Collapse" onClick={handleOnCollapse}>
                     <Collapse />
                   </CollapseButton>
                 </EditorWrapper>
@@ -65,7 +72,11 @@ export const EditorLayout = ({ children, presetStyles }) => {
   }
 
   return (
-    <EditorWrapper $presetStyles={presetStyles}>
+    <EditorWrapper
+      $presetStyles={presetStyles}
+      $isExpanded={isExpandedMode}
+      $hasError={Boolean(error) || isMaxLength}
+    >
       {children}
       <ExpandButton label="Expand" onClick={handleToggleExpand}>
         <Expand />
@@ -77,7 +88,31 @@ export const EditorLayout = ({ children, presetStyles }) => {
 const EditorWrapper = styled('div')`
   position: relative;
   width: 100%;
-  height: 100%;
+  height: ${({ $isExpanded }) => ($isExpanded ? '100%' : 'auto')};
+  border-radius: ${({ theme }) => theme.borderRadius};
+
+  ${({ theme, $hasError = false, $isExpanded }) => css`
+    outline: none;
+    box-shadow: 0;
+    transition-property: border-color, box-shadow, fill;
+    transition-duration: 0.2s;
+    border: 1px solid
+      ${({ theme, $hasError }) =>
+        $hasError ? theme.colors.danger600 : theme.colors.neutral200};
+    border-radius: ${({ theme }) => theme.borderRadius};
+
+    &:focus-within {
+      border: 1px solid
+        ${$hasError ? theme.colors.danger600
+        : $isExpanded ? theme.colors.neutral200
+        : theme.colors.primary600};
+
+      box-shadow: ${$hasError ?
+          theme.colors.danger600
+        : theme.colors.primary600}
+        0px 0px 0px 2px;
+    }
+  `}
 
   ${({ $presetStyles }) => $presetStyles}
 `;
@@ -102,5 +137,5 @@ const CollapseButton = styled(IconButton)`
 `;
 
 const FullScreenBox = styled(Box)`
-    max-width: var(--ck-editor-full-screen-box-max-width);
-`
+  max-width: var(--ck-editor-full-screen-box-max-width);
+`;
diff --git a/admin/src/components/Input/theme/common.js b/admin/src/components/Input/theme/common.js
@@ -146,12 +146,16 @@ const plugin = css`
     }
   }
 
+  .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content{
+    border: none !important;
+  }
+
   .ck.ck-editor__main {
     min-height: var(--ck-editor-min-height) !important;
     max-height: var(--ck-editor-max-height) !important;
     overflow-y: auto;
     overflow-x: hidden;
-    border: 1px solid var(--ck-color-base-border);
+    border-top: 1px solid var(--ck-color-base-border);
     border-bottom-left-radius: var(--ck-border-radius);
     border-bottom-right-radius: var(--ck-border-radius);
   }
@@ -276,9 +280,6 @@ const expanded = css`
       min-height: none !important;
       max-height: none !important;
       overflow-y: scroll !important;
-      border: 1px solid var(--ck-color-base-border);
-      border-bottom-left-radius: var(--ck-border-radius);
-      border-bottom-right-radius: var(--ck-border-radius);
       padding: calc(2 * var(--ck-spacing-large));
     }