@visual-framework/vf-table - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0-rc.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+### 1.2.0-rc.0
+
+* makes the `--striped` variant the default styling.
+* deprecates `--striped`, `--bordered`, `--tight`, `--loose` variants.
+* tidies up CSS ordering of rulesets to match more the component.
+* makes the `--sortable` icons on by default before a bigger refactor.
+
 ### 1.1.2
@@ -2,0 +9,0 @@

package.json

 {
-  "version": "1.1.3",
+  "version": "1.2.0-rc.0",
   "name": "@visual-framework/vf-table",
@@ -23,3 +23,3 @@ "description": "vf-table component",
   ],
-  "gitHead": "4d6028782396958d5d32273a41ee412f3d0241ad"
+  "gitHead": "9ae5261bdd7106160268a50fddbd575013c01d81"
 }

package.variables.scss

 $componentInfo: (
              name: "@visual-framework/vf-table",
-             version: "1.1.3",
+             version: "1.2.0-rc.0",
              location: "components/undefined",
-             vfCoreVersion: "2.2.18",
-             buildTimeStamp: "Thu, 25 Feb 2021 15:50:40 GMT"
+             vfCoreVersion: "2.2.23",
+             buildTimeStamp: "Tue, 20 Apr 2021 09:56:03 GMT"
           );

vf-table.config.yml

@@ -9,15 +9,3 @@ # The title shown on the component page
   - name: default
-    hidden: false
-  - name: striped
-    context:
-      striped: true
-  - name: bordered
-    context:
-      bordered: true
-  - name: compact
-    context:
-      table_variant: "vf-table--tight"
-  - name: loose
-    context:
-      table_variant: "vf-table--loose"
+
   - name: has footer
@@ -36,5 +24,2 @@ context:
       firstCellIsHeader: true
-  - name: fixed header
-    context:
-      tableLayoutFixed: true
   - name: actions
@@ -60,3 +45,33 @@ context:
         - cancel
+
+
+
+  - name: striped
+    hidden: true
+    status: deprecated
+    context:
+      striped: true
+  - name: bordered
+    hidden: true
+    status: deprecated
+    context:
+      bordered: true
+  - name: fixed header
+    hidden: true
+    status: deprecated
+    context:
+      tableLayoutFixed: true
+  - name: compact
+    hidden: true
+    status: deprecated
+    context:
+      table_variant: "vf-table--tight"
+  - name: loose
+    hidden: true
+    status: deprecated
+    context:
+      table_variant: "vf-table--loose"
   - name: kitchen sink
+    hidden: true
+    status: deprecated
     context:
@@ -63,0 +78,0 @@ table_caption: Hello Caption

vf-table.css

@@ -53,6 +53,19 @@ /* stylelint-disable */
 
+:root {
+  --vf-color--neutral--0: #ffffff;
+  --vf-color--neutral--100: #f3f3f3;
+  --vf-color--neutral--200: #e4e4e4;
+  --vf-color--neutral--300: #d0d0ce;
+  --vf-color--neutral--400: #a9abaa;
+  --vf-color--neutral--500: #8d8f8e;
+  --vf-color--neutral--600: #707372;
+  --vf-color--neutral--700: #54585a;
+  --vf-color--neutral--800: #373a36;
+  --vf-color--neutral--900: #000000;
+}
+
 /* stylelint-enable */
 /*!
 * Component: @visual-framework/vf-table
-* Version: 1.1.3
+* Version: 1.2.0-rc.0
 * Location: components/undefined
@@ -65,26 +78,2 @@ */
 
-.vf-table__heading .vf-button--icon {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  color: currentColor;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  font-weight: 700;
-}
-.vf-table__heading .vf-button--icon svg {
-  height: 20px;
-  margin-left: 4px;
-  opacity: 0;
-  padding: 2px;
-}
-.vf-table__heading .vf-button--icon:hover svg {
-  opacity: 1;
-}
-
-.vf-table--fixed {
-  table-layout: fixed;
-}
-
 .vf-table__caption {
@@ -103,5 +92,2 @@ font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
 }
-.vf-table__header .vf-table__heading {
-  padding: 8px 16px;
-}
 
@@ -114,4 +100,20 @@ .vf-table__heading {
   margin: 0 0 0 0;
+  padding: 8px 16px;
   text-align: left;
 }
+.vf-table__heading .vf-button--icon {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: currentColor;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-weight: 700;
+}
+.vf-table__heading .vf-button--icon svg {
+  height: 20px;
+  margin-left: 4px;
+  padding: 2px;
+}
 
@@ -128,16 +130,9 @@ .vf-table__cell {
 
-.vf-table--tight .vf-table__heading {
-  padding: 4px 4px;
+.vf-table__row:nth-of-type(even) {
+  background-color: #f3f3f3;
 }
-.vf-table--tight .vf-table__cell {
-  padding: 4px 4px;
+.vf-table--no-strpe .vf-table__row:nth-of-type(even) {
+  background-color: #ffffff;
 }
 
-.vf-table--loose .vf-table__heading {
-  padding: 16px 24px;
-}
-.vf-table--loose .vf-table__cell {
-  padding: 8px 24px;
-}
-
 .vf-table__row .vf-table__heading {
@@ -152,16 +147,2 @@ font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
 
-.vf-table--striped .vf-table__body .vf-table__row:nth-of-type(even) {
-  background-color: #f3f3f3;
-}
-
-.vf-table--bordered {
-  border: 1px solid #707372;
-}
-.vf-table--bordered .vf-table__heading {
-  border: 1px solid #707372;
-}
-.vf-table--bordered .vf-table__cell {
-  border: 1px solid #707372;
-}
-
 .vf-table__body .vf-table__row:not(.vf-table__row--selected):hover {
@@ -176,2 +157,6 @@ background-color: #fffadc;
 
+.vf-table__footer {
+  background-color: #d0d0ce;
+}
+
 .vf-table__cell--actions .vf-button--icon {
@@ -225,8 +210,28 @@ color: #3b6fb6;
 
-.vf-table__footer {
-  background-color: #d0d0ce;
-  border-top: 1px solid #000000;
+html:not(.vf-disable-deprecated) .vf-table--bordered {
+  border: 1px solid #707372;
 }
-.vf-table__footer .vf-table__cell {
-  padding: 8px 16px;
+html:not(.vf-disable-deprecated) .vf-table--bordered .vf-table__heading {
+  border: 1px solid #707372;
+}
+html:not(.vf-disable-deprecated) .vf-table--bordered .vf-table__cell {
+  border: 1px solid #707372;
+}
+html:not(.vf-disable-deprecated) .vf-table--striped .vf-table__body .vf-table__row:nth-of-type(even) {
+  background-color: #f3f3f3;
+}
+html:not(.vf-disable-deprecated) .vf-table--tight .vf-table__heading {
+  padding: 4px 4px;
+}
+html:not(.vf-disable-deprecated) .vf-table--tight .vf-table__cell {
+  padding: 4px 4px;
+}
+html:not(.vf-disable-deprecated) .vf-table--loose .vf-table__heading {
+  padding: 16px 24px;
+}
+html:not(.vf-disable-deprecated) .vf-table--loose .vf-table__cell {
+  padding: 8px 24px;
+}
+html:not(.vf-disable-deprecated) .vf-table--fixed {
+  table-layout: fixed;
 }

vf-table.scss

@@ -23,33 +23,8 @@ // vf-table
 .vf-table {
-  background-color: ui-color(white);
+  background-color: neutral(0);
   border-collapse: collapse;
 }
 
-.vf-table__heading {
-  .vf-button--icon {
-    align-items: center;
-    color: currentColor;
-    display: flex;
-    font-weight: 700;
 
-    svg {
-      height: 20px;
-      margin-left: 4px;
-      opacity: 0;
-      padding: 2px;
-    }
 
-    &:hover {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-
-.vf-table--fixed {
-  table-layout: fixed;
-}
-
 .vf-table__caption {
@@ -63,14 +38,26 @@ @include set-type(text-heading--4);
   background-color: color(grey--lightest);
-
-  .vf-table__heading {
-    padding: 8px 16px;
-  }
 }
 
 .vf-table__heading {
+
   @include set-type(text-heading--5, $custom-margin-bottom: 0);
 
+  padding: 8px 16px;
   text-align: left;
+
+  .vf-button--icon {
+    align-items: center;
+    color: currentColor;
+    display: flex;
+    font-weight: 700;
+
+    svg {
+      height: 20px;
+      margin-left: 4px;
+      padding: 2px;
+    }
+  }
 }
 
+
 .vf-table__cell {
@@ -83,20 +70,11 @@ @include set-type(text-body--2, $custom-margin-bottom: 0);
 
-.vf-table--tight {
-  .vf-table__heading {
-    padding: 4px 4px;
-  }
-  .vf-table__cell {
-    padding: 4px 4px;
-  }
-}
+.vf-table__row:nth-of-type(even) {
+  background-color: ui-color(grey--light);
 
-.vf-table--loose {
-  .vf-table__heading {
-    padding: 16px 24px;
+  .vf-table--no-strpe  & {
+    background-color: neutral(0);
   }
-  .vf-table__cell {
-    padding: 8px 24px;
-  }
 }
 
+
 .vf-table__row .vf-table__heading {
@@ -108,24 +86,4 @@ @include set-type(text-heading--5, $custom-margin-bottom: 0);
 
-.vf-table--striped {
-  .vf-table__body {
-    & .vf-table__row:nth-of-type(even) {
-      background-color: ui-color(grey--light);
-    }
-  }
-}
 
-.vf-table--bordered {
 
-  border: 1px solid color(grey);
-
-  .vf-table__heading {
-    border: 1px solid color(grey);
-  }
-
-  .vf-table__cell {
-    border: 1px solid color(grey);
-  }
-}
-
-
 .vf-table__body {
@@ -142,8 +100,8 @@ & .vf-table__row:not(.vf-table__row--selected):hover {
 
+.vf-table__footer {
+  background-color: color(grey--lightest);
+}
 
 // Selectable
 
-.vf-table__cell--selectable {
-  // vertical-align: middle;
-}
 .vf-table__cell--actions {
@@ -188,2 +146,3 @@ .vf-button--icon {
 
+// Table Actions
 
@@ -213,10 +172,49 @@ .vf-table__actions {
 
+// Deprecated Variants 04-13-21
+html:not(.vf-disable-deprecated) {
+  .vf-table--bordered {
+    @warn 'This variant has been deprecated';
+    border: 1px solid color(grey);
+    .vf-table__heading {
+      border: 1px solid color(grey);
+    }
+    .vf-table__cell {
+      border: 1px solid color(grey);
+    }
+  }
 
-.vf-table__footer {
-  background-color: color(grey--lightest);
-  border-top: 1px solid ui-color(black);
+  .vf-table--striped {
+    @warn 'This variant has been deprecated and is now the default styling';
+    .vf-table__body {
+      & .vf-table__row:nth-of-type(even) {
+        background-color: ui-color(grey--light);
+      }
+    }
+  }
 
-  .vf-table__cell {
-    padding: 8px 16px;
+  .vf-table--tight {
+    @warn 'This variant has been deprecated';
+    .vf-table__heading {
+      padding: 4px 4px;
+    }
+    .vf-table__cell {
+      padding: 4px 4px;
+    }
   }
+
+  .vf-table--loose {
+    @warn 'This variant has been deprecated';
+    .vf-table__heading {
+      padding: 16px 24px;
+    }
+    .vf-table__cell {
+      padding: 8px 24px;
+    }
+  }
+
+  .vf-table--fixed {
+    @warn 'This variant has been deprecated';
+    table-layout: fixed;
+  }
 }
+

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47344

3.07%

Lines of code

612

1.32%

Worsened metrics

Number of low quality alerts

1

Infinity%

No dependency changes