Merge pull request #2036 from owncloud/small-fixes

Small fixes
owncloud · Mar 21, 2022 · e7e7114 · e7e7114
2 parents c8c0988 + e94ca38
commit e7e7114
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 61 deletions.
diff --git a/changelog/unreleased/bugfix-transparent-ocselect-background b/changelog/unreleased/bugfix-transparent-ocselect-background
@@ -0,0 +1,6 @@
+Bugfix: OcSelect transparent background
+
+We fixed a non-transparent background in the OcSelect button, leading to visual glitches.
+
+https://github.com/owncloud/owncloud-design-system/issues/2030
+https://github.com/owncloud/owncloud-design-system/pull/2036
diff --git a/changelog/unreleased/enhancement-primary-button-gradient b/changelog/unreleased/enhancement-primary-button-gradient
@@ -0,0 +1,6 @@
+Enhancement: Make filled primary OcButton use gradient background
+
+We've updated the OcButton to use the gradient background color when used in its `filled` appearance.
+
+https://github.com/owncloud/owncloud-design-system/issues/1952
+https://github.com/owncloud/owncloud-design-system/pull/2036
diff --git a/src/components/atoms/OcButton/OcButton.vue b/src/components/atoms/OcButton/OcButton.vue
@@ -130,26 +130,15 @@ export default {
   },
   computed: {
     $_ocButton_buttonClass() {
-      const classes = [
+      return [
         "oc-button",
         "oc-rounded",
         `oc-button-${getSizeClass(this.size)}`,
         `oc-button-justify-content-${this.justifyContent}`,
         `oc-button-gap-${getSizeClass(this.gapSize)}`,
+        `oc-button-${this.variation}`,
+        `oc-button-${this.variation}-${this.appearance}`,
       ]
-
-      classes.push(`oc-button-${this.variation}`)
-
-      switch (this.appearance) {
-        case "raw":
-          classes.push(`oc-button-${this.variation}-raw`)
-          break
-        case "outline":
-          classes.push(`oc-button-${this.variation}-outline`)
-          break
-      }
-
-      return classes
     },
 
     additionalAttributes() {
@@ -358,6 +347,9 @@ export default {
       var(--oc-color-swatch-primary-hover),
       var(--oc-color-swatch-primary-muted)
     );
+    &-filled {
+      @extend .oc-background-primary-gradient;
+    }
   }
 
   &-success {

diff --git a/src/components/atoms/OcSelect/OcSelect.vue b/src/components/atoms/OcSelect/OcSelect.vue
@@ -6,6 +6,7 @@
       :disabled="disabled"
       :filter="filter"
       class="oc-select"
+      style="background: transparent"
       v-bind="additionalAttributes"
       v-on="$listeners"
     >

diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
@@ -90,8 +90,8 @@
 import Vue from "vue"
 import OcThead from "../../atoms/_OcTableHeader/_OcTableHeader.vue"
 import OcTbody from "../../atoms/_OcTableBody/_OcTableBody.vue"
-import OcTr from "../../atoms/_OcTableRow/_OcTableRow"
-import OcTh from "../../atoms/_OcTableCellHead/_OcTableCellHead"
+import OcTr from "../../atoms/_OcTableRow/_OcTableRow.vue"
+import OcTh from "../../atoms/_OcTableCellHead/_OcTableCellHead.vue"
 import OcTd from "../../atoms/_OcTableCellData/_OcTableCellData.vue"
 import OcGhostElement from "../../atoms/_OcGhostElement/_OcGhostElement.vue"
 import OcButton from "../../atoms/OcButton/OcButton.vue"

diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
@@ -15,7 +15,7 @@
   border-color:
     linear-gradient(90deg,
     var(--oc-color-swatch-primary-muted) 0%,
-    var(--oc-color-swatch-primary-gradient) 100%);
+    var(--oc-color-swatch-primary-gradient) 100%) !important;
 }
 /* stylelint-enable */