feat: propose "incompatible" color coding

bpmn-io · Dec 9, 2024 · 229eee0 · 229eee0
1 parent c8eb94a
commit 229eee0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/assets/element-templates.css b/assets/element-templates.css
@@ -9,6 +9,9 @@
   --unknown-template-background-color: var(--color-red-360-100-45);
   --unknown-template-hover-background-color: var(--color-red-360-100-40);
 
+  --incompatible-template-background-color: hsl(22, 100%, 55%);
+  --incompatible-template-hover-background-color: hsl(22, 100%, 45%);
+
   --select-template-information-text-color: var(--color-grey-225-10-55);
 
   --deprecated-template-hover-background-color: var(--color-grey-225-10-50);
@@ -78,17 +81,24 @@
   background-color: var(--deprecated-template-hover-background-color);
 }
 
+.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button {
+  background-color: var(--unknown-template-background-color);
+  color: var(--select-template-label-color);
+  fill: var(--select-template-fill-color);
+}
+
+.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button:hover {
+  background-color: var(--unknown-template-hover-background-color);
+}
 
-.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button,
 .bio-properties-panel-template-incompatible .bio-properties-panel-group-header-button {
-  background-color: var(--unknown-template-background-color);
+  background-color: var(--incompatible-template-background-color);
   color: var(--select-template-label-color);
   fill: var(--select-template-fill-color);
 }
 
-.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button:hover,
 .bio-properties-panel-template-incompatible .bio-properties-panel-group-header-button:hover {
-  background-color: var(--unknown-template-hover-background-color);
+  background-color: var(--incompatible-template-hover-background-color);
 }
 
 .bio-properties-panel-template-not-found-text,

diff --git a/src/components/ElementTemplatesGroup.js b/src/components/ElementTemplatesGroup.js
@@ -258,23 +258,36 @@ function OutdatedTemplate({ element, templateState }) {
     { entry: <RemoveTemplate />, action: () => elementTemplates.removeTemplate(element) }
   ];
 
+  const cls = compatible
+    ? 'bio-properties-panel-template-update-available'
+    : 'bio-properties-panel-template-incompatible';
+
+  const text = compatible
+    ? translate('Update available')
+    : translate('Incompatible (update available)');
+
   return (
-    <DropdownButton menuItems={ menuItems } class="bio-properties-panel-template-update-available">
+    <DropdownButton menuItems={ menuItems } class={ cls }>
       <HeaderButton>
-        <span>{ translate('Update available') }</span>
+        <span>{ text }</span>
         <ArrowIcon class="bio-properties-panel-arrow-down" />
       </HeaderButton>
     </DropdownButton>
   );
 }
 
-function UpdateAvailableText({ newerTemplate }) {
+function UpdateAvailableText({ newerTemplate, compatible }) {
   const translate = useService('translate');
 
-  const text = translate(
-    'A new version of the template is available: {templateVersion}',
-    { templateVersion: getVersionOrDateFromTemplate(newerTemplate) }
-  );
+  const text = compatible
+    ? translate(
+      'A new version of the template is available: {templateVersion}',
+      { templateVersion: getVersionOrDateFromTemplate(newerTemplate) }
+    )
+    : translate(
+      'A version of this template is available that supports your environment: {templateVersion}',
+      { templateVersion: getVersionOrDateFromTemplate(newerTemplate) }
+    );
 
   return <div class="bio-properties-panel-template-update-available-text">{text}</div>;
 }
@@ -349,7 +362,7 @@ function IncompatibleText() {
   return (
     <div class="bio-properties-panel-template-incompatible-text">
       { translate(
-        'No version of this template compatible with your environment was found.'
+        'No version of this template that is compatible with your environment was found.'
       ) }
     </div>
   );