Add a warning when targeting an acestor with a reference

Signed-off-by: Axel Boberg <[email protected]>

app/components/Grid/index.jsx

@@ -244,6 +244,7 @@ export function Grid ({ children, data = {}, onChange }) {
         userIsEditingLayout &&
         <Notification
           icon='edit'
+          type='inline'
           title='Editing layout'
           description='Right click to manage widgets'
           controls={<button className='Button Button--ghost' onClick={() => handleLeaveEditMode()}>Leave edit mode</button>}

app/components/Notification/index.jsx

@@ -22,7 +22,7 @@ export function Notification ({ type, size = 'normal', icon, title, description,
     <div className={`Notification Notification--${type} Notification-size--${size}`}>
       <div className='Notification-content'>
         {
-          icon && <span className='Notification-contentSection'><Icon name={icon} /></span>
+          icon && <span className='Notification-contentSection Notification-icon'><Icon name={icon} color='var(--color-text)' /></span>
         }
         {
           title && <span className='Notification-contentSection Notification-title'>{title}</span>

app/components/Notification/style.css

@@ -1,14 +1,23 @@
 .Notification {
   display: flex;
+
   width: 100%;
 
   box-sizing: border-box;
   justify-content: space-between;
 
-  color: var(--base-color--notificationColor);
   background-color: var(--base-color--notificationBackground);
 
+  border-radius: 6px;
+
   --color-warning: #FFDC8C;
+  --color-text: var(--base-color--notificationColor);
+
+  color: var(--color-text);
+}
+
+.Notification--inline {
+  border-radius: 0;
 }
 
 .Notification-size--normal {
@@ -22,6 +31,8 @@
 .Notification-content {
   display: flex;
   align-items: center;
+
+  color: var(--color-text);
 }
 
 .Notification-size--normal .Notification-content {
@@ -51,5 +62,15 @@
 
 .Notification--warning *,
 .Notification--warning .Notification-hideBtn {
-  color: black;
-}
+  --color-text: black;
+}
+
+.Notification-hideBtn {
+  color: var(--color-text);
+}
+
+.Notification-icon,
+.Notification-icon .Icon {
+  width: 1.5em;
+  height: 1.5em;
+}

app/components/Sharing/index.jsx

@@ -44,7 +44,11 @@ export function Sharing ({ open, onClose = () => {} }) {
       <div className='Sharing u-theme--light'>
         {
           HOST === 'localhost' &&
-          <Notification size='small' description='Bridge is only accessible on localhost, change this in settings' />
+          (
+            <div className='Sharing-notification'>
+              <Notification size='small' description='Bridge is only accessible on localhost, change this in settings' />
+            </div>
+          )
         }
         <div className='Sharing-content'>
           <div className='Sharing-icon' dangerouslySetInnerHTML={{ __html: CollaborationIcon }} />

app/components/Sharing/style.css

@@ -17,4 +17,8 @@
 
 .Sharing-icon {
   margin: 5px 0 10px;
+}
+
+.Sharing-notification {
+  padding: 5px;
 }

plugins/inspector/app/components/Form/index.jsx

@@ -30,14 +30,17 @@ import './style.css'
 import { StoreContext } from '../../storeContext'
 
 import { Accordion } from '../Accordion'
+
 import { Frame } from '../../../../../app/components/Frame'
+import { Notification } from '../../../../../app/components/Notification'
 
 import { TextInput } from '../TextInput'
 import { ColorInput } from '../ColorInput'
 import { StringInput } from '../StringInput'
 import { SelectInput } from '../SelectInput'
 import { BooleanInput } from '../BooleanInput'
 
+
 const INPUT_COMPONENTS = {
   boolean: BooleanInput,
   string: StringInput,
@@ -244,6 +247,14 @@ export function Form () {
   return (
     <div className='Form'>
       <div className='Form-section'>
+        <div className='Form-notifications'>
+          {
+            Object.values(store.items?.[0]?.issues ?? {})
+              .map((issue, i) => {
+                return <Notification key={i} description={issue?.description} type='warning' icon='warning' size='small' />
+              })
+          }
+        </div>
         <div className='Form-row'>
           <ColorInput value={getValue('color')} onChange={value => handleDataChange('color', value)} />
           <StringInput value={getValue('name')} onChange={value => handleDataChange('name', value)} large />

plugins/inspector/app/components/Form/style.css

@@ -84,4 +84,9 @@
   font-size: 0.9em;
 
   box-sizing: border-box;
+}
+
+.Form-notifications .Notification {
+  margin-top: -10px;
+  margin-bottom: 15px;
 }

plugins/types/index.js

@@ -101,7 +101,7 @@ const ITEM_CHANGE_HANDLERS = {
     }
 
     bridge.items.applyIssue(item?.id, 'types.rta', {
-      description: 'Be careful referencing ancestor as loops may occur'
+      description: 'Reference is targeting an ancestor, loops may occur'
     })
   }
 }