fix: callout line after title

RedTurtle · Feb 2, 2024 · de55654 · de55654
1 parent 3492d99
commit de55654
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 25 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx b/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx
@@ -30,14 +30,8 @@ const messages = defineMessages({
  * @extends Component
  */
 const Edit = (props) => {
-  const {
-    data,
-    onChangeBlock,
-    block,
-    onSelectBlock,
-    selected,
-    ...otherProps
-  } = props;
+  const { data, onChangeBlock, block, onSelectBlock, selected, ...otherProps } =
+    props;
   const intl = useIntl();
   const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
     props,
@@ -55,21 +49,23 @@ const Edit = (props) => {
         <CalloutTitle tag="h4">
           {data.icon && <Icon icon={data.icon} padding={false} aria-hidden />}
 
-          <TextEditorWidget
-            {...otherProps}
-            showToolbar={false}
-            data={data}
-            block={block}
-            fieldName="title"
-            onChangeBlock={onChangeBlock}
-            selected={selectedField === 'title'}
-            placeholder={intl.formatMessage(messages.title)}
-            setSelected={setSelectedField}
-            focusNextField={() => {
-              setSelectedField('text');
-            }}
-            onSelectBlock={onSelectBlock}
-          />
+          <div className="text">
+            <TextEditorWidget
+              {...otherProps}
+              showToolbar={false}
+              data={data}
+              block={block}
+              fieldName="title"
+              onChangeBlock={onChangeBlock}
+              selected={selectedField === 'title'}
+              placeholder={intl.formatMessage(messages.title)}
+              setSelected={setSelectedField}
+              focusNextField={() => {
+                setSelectedField('text');
+              }}
+              onSelectBlock={onSelectBlock}
+            />
+          </div>
         </CalloutTitle>
         <CalloutText>
           <TextEditorWidget

diff --git a/src/components/ItaliaTheme/Blocks/Callout/View.jsx b/src/components/ItaliaTheme/Blocks/Callout/View.jsx
@@ -24,7 +24,7 @@ const View = ({ data, id }) => {
       >
         <CalloutTitle>
           {data.icon && <Icon icon={data.icon} padding={false} aria-hidden />}
-          {data.title}
+          <span className="text">{data.title}</span>
         </CalloutTitle>
         <CalloutText>
           <TextBlockView id={id} data={{ value: data.text }} />

diff --git a/src/theme/ItaliaTheme/Blocks/_callout.scss b/src/theme/ItaliaTheme/Blocks/_callout.scss
@@ -4,9 +4,14 @@ body.cms-ui {
       .callout {
         .callout-title {
           display: flex;
+
           .icon {
-            flex: 1 0 100%;
             max-width: 32px;
+            flex: 1 0 100%;
+          }
+
+          .text:after {
+            z-index: -1;
           }
         }