feat(text-area): make monospace font optional

Closes #87
bpmn-io · Aug 3, 2021 · 7e6f1eb · 7e6f1eb
1 parent 77fff84
commit 7e6f1eb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/assets/properties-panel.css b/assets/properties-panel.css
@@ -278,6 +278,9 @@
   border-radius: 3px;
   background-color: var(--color-input-background);
   font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  font-family: inherit;
 }
 
 .bio-properties-panel-input[type=number],
@@ -294,6 +297,10 @@ textarea.bio-properties-panel-input,
   border: 1px solid var(--color-input-border-focus);
 }
 
+.bio-properties-panel-input-monospace {
+  font-family: monospace;
+}
+
 .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
   margin: 0;
 }

diff --git a/src/components/entries/TextArea.js b/src/components/entries/TextArea.js
@@ -2,6 +2,8 @@ import {
   useMemo
 } from 'preact/hooks';
 
+import classnames from 'classnames';
+
 function TextArea(props) {
 
   const {
@@ -10,7 +12,8 @@ function TextArea(props) {
     rows = 2,
     debounce,
     onInput,
-    value = ''
+    value = '',
+    monospace
   } = props;
 
   const handleInput = useMemo(() => {
@@ -24,7 +27,10 @@ function TextArea(props) {
         id={ prefixId(id) }
         name={ id }
         spellCheck="false"
-        class="bio-properties-panel-input"
+        class={ classnames(
+          'bio-properties-panel-input',
+          monospace ? 'bio-properties-panel-input-monospace' : '')
+        }
         onInput={ handleInput }
         onFocus={ props.onFocus }
         onBlur={ props.onBlur }
@@ -44,6 +50,7 @@ function TextArea(props) {
  * @param {Function} props.getValue
  * @param {Function} props.setValue
  * @param {Number} props.rows
+ * @param {Boolean} props.monospace
  */
 export default function TextAreaEntry(props) {
   const {
@@ -54,7 +61,8 @@ export default function TextAreaEntry(props) {
     label,
     getValue,
     setValue,
-    rows
+    rows,
+    monospace
   } = props;
 
   const value = getValue(element);
@@ -66,7 +74,8 @@ export default function TextAreaEntry(props) {
         value={ value }
         onInput={ setValue }
         rows={ rows }
-        debounce={ debounce } />
+        debounce={ debounce }
+        monospace={ monospace } />
       { description && <div class="bio-properties-panel-description">{ description }</div> }
     </div>
   );

diff --git a/test/spec/components/TextArea.spec.js b/test/spec/components/TextArea.spec.js
@@ -5,6 +5,7 @@ import {
 import TestContainer from 'mocha-test-container-support';
 
 import {
+  classes as domClasses,
   query as domQuery
 } from 'min-dom';
 
@@ -39,6 +40,18 @@ describe('<TextArea>', function() {
   });
 
 
+  it('should render - monospace', function() {
+
+    // given
+    const result = createTextArea({ container, monospace: true });
+
+    const input = domQuery('.bio-properties-panel-input', result.container);
+
+    // then
+    expect(domClasses(input).has('bio-properties-panel-input-monospace')).to.be.true;
+  });
+
+
   it('should update', function() {
 
     // given
@@ -122,6 +135,7 @@ function createTextArea(options = {}) {
     getValue = noop,
     setValue = noop,
     rows,
+    monospace,
     container
   } = options;
 
@@ -134,6 +148,7 @@ function createTextArea(options = {}) {
       getValue={ getValue }
       setValue={ setValue }
       debounce={ debounce }
-      rows={ rows } />,
+      rows={ rows }
+      monospace={ monospace } />,
     { container });
 }