fix: buttonPlugin margins (#559)

* fix: add margins to buttons
Frontify · Sep 12, 2023 · 0a75910 · 0a75910
1 parent d52a1fb
commit 0a75910
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/friendly-stingrays-jam.md b/.changeset/friendly-stingrays-jam.md
@@ -0,0 +1,5 @@
+---
+"@frontify/guideline-blocks-settings": patch
+---
+
+fix: button plugin add margins to button
diff --git a/...nents/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx b/...nents/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx
@@ -13,7 +13,7 @@ const useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: Ri
         elementToAttributes: (element) => ({
             url: element.href,
             buttonStyle: element.buttonStyle || 'primary',
-            target: element.target || '_self',
+            target: element.target || '_blank',
         }),
     });
 

diff --git a/...or/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx b/...or/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx
@@ -70,7 +70,7 @@ const HoverableButton = ({ id, styles, isActive, onClick, children }: Props): Re
             onMouseEnter={() => setHovered(true)}
             onMouseLeave={() => setHovered(false)}
             onClick={onClick}
-            style={getStyles()}
+            style={{ ...getStyles(), marginTop: 0, marginBottom: 0 }}
             className={
                 isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'
             }

diff --git a/...-blocks-settings/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts b/...-blocks-settings/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts
@@ -88,7 +88,7 @@ export const createButtonPlugin = (appBridge: AppBridgeBlock) =>
                 getNode: (el) => ({
                     type,
                     url: el.getAttribute('href'),
-                    target: el.getAttribute('target') || '_self',
+                    target: el.getAttribute('target') || '_blank',
                 }),
             },
         }),

diff --git a/...deline-blocks-settings/src/components/RichTextEditor/plugins/ButtonPlugin/utils/styles.ts b/...deline-blocks-settings/src/components/RichTextEditor/plugins/ButtonPlugin/utils/styles.ts
@@ -19,6 +19,8 @@ export const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProp
         borderRadius: 'var(--f-theme-settings-button-primary-border-radius)',
         borderWidth: 'var(--f-theme-settings-button-primary-border-width)',
         color: 'var(--f-theme-settings-button-primary-color)',
+        marginTop: '10px',
+        marginBottom: '10px',
         display: 'inline-block',
         hover: {
             backgroundColor: 'var(--f-theme-settings-button-primary-background-color-hover)',
@@ -44,6 +46,8 @@ export const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProp
         borderWidth: 'var(--f-theme-settings-button-secondary-border-width)',
         color: 'var(--f-theme-settings-button-secondary-color)',
         display: 'inline-block',
+        marginTop: '10px',
+        marginBottom: '10px',
         hover: {
             backgroundColor: 'var(--f-theme-settings-button-secondary-background-color-hover)',
             borderColor: 'var(--f-theme-settings-button-secondary-border-color-hover)',
@@ -68,6 +72,8 @@ export const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProp
         borderWidth: 'var(--f-theme-settings-button-tertiary-border-width)',
         color: 'var(--f-theme-settings-button-tertiary-color)',
         display: 'inline-block',
+        marginTop: '10px',
+        marginBottom: '10px',
         hover: {
             backgroundColor: 'var(--f-theme-settings-button-tertiary-background-color-hover)',
             borderColor: 'var(--f-theme-settings-button-tertiary-border-color-hover)',