feat(refs T21517): Adapt DpButton usage to new dpui version (#1436)

demosplan-ui 0.1.3 introduces a new button variant, "subtle". As the styles for demosplan-ui are currently implememted in demosplan-core, also the new variant is implemented here. Since demosplan-ui 0.1.3 drops slots, these places have to be adapted to use icons instead of slots. All needed icons are already implemented in demosplan-ui. When icons come with a proportion signifier class, we can further tweak spacing of icons inside buttons. this will eventually be released later on.
demos-europe · Jun 1, 2023 · d427b94 · d427b94
1 parent 6c9f758
commit d427b94
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 90 deletions.
diff --git a/client/js/components/procedure/SegmentsBulkEdit/ActionStepper/ActionStepper.vue b/client/js/components/procedure/SegmentsBulkEdit/ActionStepper/ActionStepper.vue
@@ -24,10 +24,9 @@
         <dp-button
           class="float--right"
           :disabled="!valid"
-          @click="$emit('confirm')">
-          {{ Translator.trans('continue.confirm') }}
-          <i class="fa fa-angle-right u-pl-0_25" />
-        </dp-button>
+          icon-after="chevron-right"
+          :text="Translator.trans('continue.confirm')"
+          @click="$emit('confirm')" />
       </div>
     </template>
 
@@ -37,17 +36,15 @@
       <div class="u-mt cf">
         <dp-button
           color="secondary"
-          @click="$emit('edit')">
-          <i class="fa fa-angle-left u-pr-0_25" />
-          {{ Translator.trans('bulk.edit.actions.edit') }}
-        </dp-button>
+          icon="chevron-left"
+          :text="Translator.trans('bulk.edit.actions.edit')"
+          @click="$emit('edit')" />
         <dp-button
           class="float--right"
           :busy="busy"
-          @click="$emit('apply')">
-          {{ Translator.trans('bulk.edit.actions.apply') }}
-          <i class="fa fa-angle-right u-pl-0_25" />
-        </dp-button>
+          icon-after="chevron-right"
+          :text="Translator.trans('bulk.edit.actions.apply')"
+          @click="$emit('apply')" />
       </div>
     </template>
 

diff --git a/client/js/components/procedure/admin/AdministrationProceduresList.vue b/client/js/components/procedure/admin/AdministrationProceduresList.vue
@@ -46,31 +46,25 @@
       v-if="hasPermission('feature_admin_delete_procedure') || hasPermission('feature_admin_export_procedure')"
       name="procedureForm"
       ref="procedureForm">
-      <button
+      <dp-button
         v-if="hasPermission('feature_admin_delete_procedure')"
-        class="btn--blank o-link--default u-ml-0_25 u-mr-0_75"
         data-cy="deleteProcedure"
-        @click="deleteProcedures"
+        icon="delete"
         name="deleteProcedure"
-        type="submit">
-        <i
-          aria-hidden="true"
-          class="fa fa-times-circle u-mr-0_25" />
-        {{ Translator.trans('delete') }}
-      </button>
-
-      <button
+        :text="Translator.trans('delete')"
+        type="submit"
+        variant="subtle"
+        @click="deleteProcedures" />
+
+      <dp-button
         v-if="hasPermission('feature_admin_export_procedure')"
-        class="btn--blank o-link--default u-ml-0_25"
         data-cy="ExportProcedure"
-        @click="exportProcedures"
+        icon="download"
         name="exportProcedure"
-        type="submit">
-        <i
-          class="fa fa-download u-mr-0_25"
-          aria-hidden="true" />
-        {{ Translator.trans('print.and.export') }}
-      </button>
+        :text="Translator.trans('print.and.export')"
+        type="submit"
+        variant="subtle"
+        @click="exportProcedures" />
 
       <!-- Hidden inputs needed for export and delete functionalities -->
       <input

diff --git a/client/js/components/statement/DpStatementAnonymize.vue b/client/js/components/statement/DpStatementAnonymize.vue
@@ -91,10 +91,9 @@
         <dp-button
           class="float--right"
           :disabled="isInvalid()"
-          @click="next">
-          {{ Translator.trans('continue.confirm') }}
-          <i class="fa fa-angle-right u-pl-0_25" />
-        </dp-button>
+          icon-after="chevron-right"
+          :text="Translator.trans('continue.confirm')"
+          @click="next" />
       </div>
     </template>
 
@@ -137,17 +136,15 @@
       <div class="cf">
         <dp-button
           color="secondary"
-          @click="back">
-          <i class="fa fa-angle-left u-pr-0_25" />
-          {{ Translator.trans('bulk.edit.actions.edit') }}
-        </dp-button>
+          icon="chevron-left"
+          :text="Translator.trans('bulk.edit.actions.edit')"
+          @click="back" />
         <dp-button
           class="float--right"
           :busy="busy"
-          @click="submit">
-          {{ Translator.trans('bulk.edit.actions.apply') }}
-          <i class="fa fa-angle-right u-pl-0_25" />
-        </dp-button>
+          icon-after="chevron-right"
+          :text="Translator.trans('bulk.edit.actions.apply')"
+          @click="submit" />
       </div>
     </template>
 

diff --git a/client/js/components/statement/assessmentTable/DpBulkEditFragment.vue b/client/js/components/statement/assessmentTable/DpBulkEditFragment.vue
@@ -172,12 +172,9 @@
         <dp-button
           v-if="isError === false"
           :busy="isLoading"
-          @click.once="submitData">
-          {{ Translator.trans('actions.fragments.apply', { count: selectedFragmentsCount }) }}
-          <i
-            class="fa fa-angle-right u-pl-0_25"
-            aria-hidden="true" />
-        </dp-button>
+          icon-after="chevron-right"
+          :text="Translator.trans('actions.fragments.apply', { count: selectedFragmentsCount })"
+          @click.once="submitData" />
         <!-- if there's an error in response (so edit failed), show the 'back to ATabelle' button -->
         <a
           v-if="isError"

diff --git a/client/js/components/statement/assessmentTable/DpBulkEditStatement.vue b/client/js/components/statement/assessmentTable/DpBulkEditStatement.vue
@@ -170,10 +170,9 @@
       <div class="text--right">
         <dp-button
           :busy="isLoading"
-          @click.once="submitData">
-          {{ Translator.trans('actions.statements.apply', { count: selectedElementsCount }) }}
-          <i class="fa fa-angle-right u-pl-0_25" />
-        </dp-button>
+          icon-after="chevron-right"
+          :text="Translator.trans('actions.statements.apply', { count: selectedElementsCount })"
+          @click.once="submitData" />
 
         <a
           class="btn btn--secondary float--left"
@@ -200,11 +199,9 @@
         {{ Translator.trans(options[option].successMessage) }}
       </p>
       <dp-button
-        :text="Translator.trans('save')"
-        @click="handleReturn">
-        <i class="fa fa-angle-left u-pr-0_25" />
-        {{ Translator.trans('considerationtable.back') }}
-      </dp-button>
+        icon="chevron-left"
+        :text="Translator.trans('considerationtable.back')"
+        @click="handleReturn" />
     </div>
   </div>
 </template>

diff --git a/client/js/components/statement/assessmentTable/TocView/AssessmentTableToc.vue b/client/js/components/statement/assessmentTable/TocView/AssessmentTableToc.vue
@@ -18,13 +18,10 @@
       <dp-button
         v-show="isRefreshButtonVisible"
         class="u-ml-0_5 u-mb-0_5"
+        icon="refresh"
+        :text="Translator.trans('refresh')"
         variant="outline"
-        @click="triggerUpdate">
-        <i
-          class="fa fa-refresh"
-          aria-hidden="true" />
-        {{ Translator.trans("refresh") }}
-      </dp-button>
+        @click="triggerUpdate" />
     </transition>
   </div>
 </template>

diff --git a/demosplan/DemosPlanCoreBundle/Resources/client/scss/objects/_button.scss b/demosplan/DemosPlanCoreBundle/Resources/client/scss/objects/_button.scss
@@ -49,7 +49,7 @@ $dp-button-bg-color-warning:            $dp-color-red-base !default;
 $dp-button-bg-color-warning-hover:      $dp-color-red-dark-1 !default;
 $dp-button-bg-color-warning-active:     $dp-color-red-dark-2 !default;
 // Spacing
-$dp-button-spacing-horizontal:          $inuit-base-spacing-unit--small * 1.2;
+$dp-button-spacing-horizontal:          $inuit-base-spacing-unit--small;
 
 // These variable is shared between _button.scss and _form.scss.
 // It is defined here because currently the include order of settings and inuit core leads to not having
@@ -87,8 +87,10 @@ $dp-form-element-spacing-vertical: $inuit-base-spacing-unit--tiny + 1px;
     $bg-color-hover,
     $bg-color-active
 ) {
-    // Variant with colored background
-    &:not(.btn--outline) {
+    // Variant with colored background.
+    // The `:not()` expression targets all .btn instances that are not adapted to use the `btn--solid` specifier.
+    &.btn--solid,
+    &:not(.btn--outline, .btn--subtle) {
         &,
         &:link,
         &:visited {
@@ -164,6 +166,29 @@ $dp-form-element-spacing-vertical: $inuit-base-spacing-unit--tiny + 1px;
         }
     }
 
+    // Subtle button variant.
+    &.btn--subtle {
+        &,
+        &:link,
+        &:visited {
+            color: $bg-color;
+            background-color: transparent;
+            border-color: transparent;
+        }
+
+        &:not(:disabled, :active, .is-disabled):hover {
+            color: $bg-color-hover;
+            background-color: $dp-color-interactive-subtle-hover;
+            border-color: $dp-color-interactive-subtle-hover;
+        }
+
+        &:active {
+            color: $bg-color-active;
+            background-color: $dp-color-interactive-subtle-active;
+            border-color: $dp-color-interactive-subtle-active;
+        }
+    }
+
     // All disabled button variants have this same beautiful cursor & opacity appearance for the time being
     &:disabled,
     &.is-disabled {
@@ -218,17 +243,29 @@ $dp-form-element-spacing-vertical: $inuit-base-spacing-unit--tiny + 1px;
 
     outline: 0 transparent !important;
 
-    @if ($dp-use-system-ui == true) {
-        // To fix the visual effect of having button texts appear a little bit below visual center
-        // (which is caused by a flaw with half leading distribution in Segoe UI typeface) the upper padding
-        // is reduced a little bit. Also see https://yaits.demos-deutschland.de/T19691
-        padding:
-            $dp-form-element-spacing-vertical - 1px
-            $dp-button-spacing-horizontal
-            $dp-form-element-spacing-vertical + 1px;
-    } @else {
+    &:not(.icon-only) {
+        @if ($dp-use-system-ui == true) {
+            // To fix the visual effect of having button texts appear a little bit below visual center
+            // (which is caused by a flaw with half leading distribution in Segoe UI typeface) the upper padding
+            // is reduced a little bit. Also see https://yaits.demos-deutschland.de/T19691
+            padding: $dp-form-element-spacing-vertical - 1px $dp-button-spacing-horizontal $dp-form-element-spacing-vertical + 1px;
+        } @else {
+            // Assume that half leading is distributed well on non-system fonts...
+            padding: $dp-form-element-spacing-vertical $dp-button-spacing-horizontal;
+        }
+
+        // Visually compensate button padding for icons with portrait proportions
+        &:has(> span + svg.portrait) {
+            padding-right: $inuit-base-spacing-unit--tiny;
+        }
+        &:has(> svg.portrait + span) {
+            padding-left: $inuit-base-spacing-unit--tiny;
+        }
+    }
+
+    &.icon-only {
         // Assume that half leading is distributed well on non-system fonts...
-        padding: $dp-form-element-spacing-vertical $dp-button-spacing-horizontal;
+        padding: $dp-form-element-spacing-vertical $inuit-base-spacing-unit--tiny;
     }
 
     border: 1px solid transparent;

diff --git a/demosplan/DemosPlanCoreBundle/Resources/client/scss/objects/_objects-cardboxes.dplan.scss b/demosplan/DemosPlanCoreBundle/Resources/client/scss/objects/_objects-cardboxes.dplan.scss
@@ -38,12 +38,12 @@
 }
 
 .js .card__item:hover {
-    background-color: $dp-color-interactive-hover-subtle;
+    background-color: $dp-color-interactive-subtle-hover;
 
     animation: background-default-brand 1s;
 }
 
 @keyframes background-default-brand {
     0% { background-color: $dp-color-white; }
-    100% { background-color: $dp-color-interactive-hover-subtle; }
+    100% { background-color: $dp-color-interactive-subtle-hover; }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1013,7 +1013,14 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.13.10", "@babel/runtime@^7.21.5", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.13.10":
+  version "7.22.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb"
+  integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
+"@babel/runtime@^7.21.5", "@babel/runtime@^7.8.4":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
   integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==
@@ -1297,9 +1304,9 @@
   integrity sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==
 
 "@demos-europe/demosplan-ui@^0":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@demos-europe/demosplan-ui/-/demosplan-ui-0.1.2.tgz#c6165dade50efb4720b6af96e2376de1804c25ae"
-  integrity sha512-NMyBhT0cVN7fJXUCgvRp/M9g5k/vyy6Tp7xxE83SzaisGEiHFZjR7VcKuzqXjhCrRxsuuvyG2Y1M3InAt4ytuQ==
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@demos-europe/demosplan-ui/-/demosplan-ui-0.1.3.tgz#7a7a99c6b74a8d7aba8f1215ce09795bf4a39ac7"
+  integrity sha512-6jPXqb9Stg/CjiqTDIaCM0h2hb5Y/C7wJ0jpE86P8k7Uq5b3oIXGe18GBVO+dx6GL/9zy4ZMfQyD6fwnhpIpYg==
   dependencies:
     "@braintree/sanitize-url" "^6.0.1"
     "@uppy/core" "^3.0.1"
@@ -7360,9 +7367,9 @@ postcss@^8.4.14, postcss@^8.4.17, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4
     source-map-js "^1.0.2"
 
 preact@^10.5.13:
-  version "10.15.0"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.15.0.tgz#14bae0afe3547ca9d45d22fda2a4266462d31cf3"
-  integrity sha512-nZSa8M2R2m1n7nJSBlzDpxRJaIsejrTO1vlFbdpFvyC8qM1iU+On2y0otfoUm6SRB5o0lF0CKDFxg6grEFU0iQ==
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.15.1.tgz#a1de60c9fc0c79a522d969c65dcaddc5d994eede"
+  integrity sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g==
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -7559,10 +7566,19 @@ prosemirror-utils@^1.0.0-0:
   resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-1.0.0-0.tgz#7dfd112abf69001508a76200f9c8660fda7fa85f"
   integrity sha512-11hTMG4Qwqlux6Vwp/4m16mLDg6IwWb0/odsWXGtWvvRJo61SfG0RGYlA8H72vExmbnWpiXa7PNenZ6t12Rkqw==
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.16.5, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.31.1:
-  version "1.31.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.31.3.tgz#cfe171c4e50a577526d0235d9ec757cdddf6017d"
-  integrity sha512-UYDa8WxRFZm0xQLXiPJUVTl6H08Fn0IUVDootA7ZlQwzooqVWnBOXLovJyyTKgws1nprfsPhhlvWgt2jo4ZA6g==
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.16.5, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0:
+  version "1.31.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.31.4.tgz#d9a40363bf517605f77a5cfe6c0106958a7dbe5e"
+  integrity sha512-nJzH2LpYbonSTYFqQ1BUdEhbd1WPN/rp/K9T9qxBEYpgg3jK3BvEUCR45Ymc9IHpO0m3nBJwPm19RBxZdoBVuw==
+  dependencies:
+    prosemirror-model "^1.16.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
+prosemirror-view@^1.31.1:
+  version "1.31.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.31.2.tgz#dbc5f946a4cf29cbf788cca40f07125ce3dd0894"
+  integrity sha512-d/HKgUsaKzMQnr5tGRdZq+8GSixOTyYI69hoNV417VlciTvUDFSr4SWsRNUzhMRwvT6xVLI8yrVWERHjNWI6uw==
   dependencies:
     prosemirror-model "^1.16.0"
     prosemirror-state "^1.0.0"