fix(decision-table): use button instead of link in hints

Closes #431
bpmn-io · Nov 4, 2019 · 2e73132 · 2e73132
1 parent 7911b5c
commit 2e73132
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 12 deletions.
diff --git a/...ages/dmn-js-decision-table/src/features/allowed-values/components/AllowedValuesEditing.js b/...ages/dmn-js-decision-table/src/features/allowed-values/components/AllowedValuesEditing.js
@@ -179,10 +179,10 @@ export default class AllowedValuesEditing extends Component {
           {
             !isNull(values)
               && <p class="dms-hint">
-                <a href="#" className="del-values"
+                <button type="button" className="del-values"
                   onClick={ this.handleRemovePredifinedValuesClick }>
                   Clear predefined values.
-                </a>
+                </button>
               </p>
           }
 

diff --git a/...s/dmn-js-decision-table/src/features/decision-table-head/editor/components/InputEditor.js b/...s/dmn-js-decision-table/src/features/decision-table-head/editor/components/InputEditor.js
@@ -122,11 +122,11 @@ export default class InputEditor extends Component {
         {
           !editScript && (
             <p className="dms-hint">
-              Enter simple <code>FEEL</code> expression or <a href="#"
+              Enter simple <code>FEEL</code> expression or <button type="button"
                 className="ref-make-script"
                 onClick={ this.makeScript }>
                   change to script
-              </a>.
+              </button>.
             </p>
           )
         }

diff --git a/packages/dmn-js-decision-table/src/features/simple-date-edit/components/InputDateEdit.js b/packages/dmn-js-decision-table/src/features/simple-date-edit/components/InputDateEdit.js
@@ -195,9 +195,9 @@ export default class InputDateEdit extends Component {
             value={ dates[0] } />
 
           <p className="dms-hint">
-            <a href="#"
+            <button type="button"
               className="use-today"
-              onClick={ this.onSetStartDateTodayClick }>Use today</a>.
+              onClick={ this.onSetStartDateTodayClick }>Use today</button>.
           </p>
         </div>
 
@@ -220,9 +220,9 @@ export default class InputDateEdit extends Component {
               </ValidatedInput>
 
               <p className="dms-hint">
-                <a href="#"
+                <button type="button"
                   className="use-today"
-                  onClick={ this.onSetEndDateTodayClick }>Use today</a>.
+                  onClick={ this.onSetEndDateTodayClick }>Use today</button>.
               </p>
             </div>
         }

diff --git a/packages/dmn-js-decision-table/src/features/simple-date-edit/components/OutputDateEdit.js b/packages/dmn-js-decision-table/src/features/simple-date-edit/components/OutputDateEdit.js
@@ -82,9 +82,9 @@ export default class OutputDateEdit extends Component {
           </ValidatedInput>
 
           <p className="dms-hint">
-            Set date <a href="#"
+            Set date <button type="button"
               className="use-today"
-              onClick={ this.onClick }>to today</a>.
+              onClick={ this.onClick }>to today</button>.
           </p>
         </div>
 

diff --git a/packages/dmn-js-shared/assets/css/dmn-js-shared.css b/packages/dmn-js-shared/assets/css/dmn-js-shared.css
@@ -41,12 +41,18 @@
   font-weight: bold;
 }
 
-p.dms-hint a {
+p.dms-hint button {
   color: #3960a2;
   text-decoration: none;
+  display: inline;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  background: none;
 }
 
-p.dms-hint a:hover {
+p.dms-hint button:hover {
   color: #4285f4;
 }