@wordpress/dataviews 0.2.0 → 0.3.0

package/build-style/style.css

@@ -114,15 +114,43 @@
   min-height: 100%;
 }
 
-.dataviews__filters-view-actions {
+.dataviews-filters__view-actions {
   padding: 12px 32px;
 }
+.dataviews-filters__view-actions .components-search-control {
+  flex-grow: 1;
+  max-width: 240px;
+}
+
+.dataviews-filters-button {
+  position: relative;
+}
+
+.dataviews-filters-count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 16px;
+  color: var(--wp-components-color-accent-inverted, #fff);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-radius: 8px;
+  min-width: 16px;
+  padding: 0 4px;
+  transform: translateX(40%) translateY(-40%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 300;
+}
 
 .dataviews-pagination {
   margin-top: auto;
   position: sticky;
   bottom: 0;
-  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(6px);
+          backdrop-filter: blur(6px);
   padding: 12px 32px;
   border-top: 1px solid #f0f0f0;
   color: #757575;
@@ -132,7 +160,7 @@
   margin: 32px 0 16px;
 }
 
-.dataviews-table-view {
+.dataviews-view-table {
   width: 100%;
   text-indent: 0;
   border-color: inherit;
@@ -140,74 +168,117 @@
   position: relative;
   color: #757575;
 }
-.dataviews-table-view a {
+.dataviews-view-table a {
   text-decoration: none;
   color: #1e1e1e;
   font-weight: 500;
 }
-.dataviews-table-view th {
+.dataviews-view-table th {
   text-align: left;
   color: var(--wp-components-color-foreground, #1e1e1e);
   font-weight: normal;
   font-size: 13px;
 }
-.dataviews-table-view td,
-.dataviews-table-view th {
+.dataviews-view-table td,
+.dataviews-view-table th {
   padding: 12px;
   min-width: 160px;
 }
-.dataviews-table-view td[data-field-id=actions],
-.dataviews-table-view th[data-field-id=actions] {
+.dataviews-view-table td[data-field-id=actions],
+.dataviews-view-table th[data-field-id=actions] {
   text-align: right;
 }
-.dataviews-table-view tr {
+.dataviews-view-table tr {
   border-bottom: 1px solid #f0f0f0;
 }
-.dataviews-table-view tr td:first-child,
-.dataviews-table-view tr th:first-child {
+.dataviews-view-table tr .dataviews-view-table-header-button {
+  gap: 4px;
+}
+.dataviews-view-table tr td:first-child,
+.dataviews-view-table tr th:first-child {
   padding-left: 32px;
 }
-.dataviews-table-view tr td:last-child,
-.dataviews-table-view tr th:last-child {
+.dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
+.dataviews-view-table tr td:first-child .dataviews-view-table-header,
+.dataviews-view-table tr th:first-child .dataviews-view-table-header-button,
+.dataviews-view-table tr th:first-child .dataviews-view-table-header {
+  margin-left: -8px;
+}
+.dataviews-view-table tr td:last-child,
+.dataviews-view-table tr th:last-child {
   padding-right: 32px;
 }
-.dataviews-table-view tr:last-child {
+.dataviews-view-table tr:last-child {
   border-bottom: 0;
 }
-.dataviews-table-view thead tr {
+.dataviews-view-table tr:hover td {
+  background-color: #f8f8f8;
+}
+.dataviews-view-table thead tr {
   border: 0;
 }
-.dataviews-table-view thead th {
+.dataviews-view-table thead th {
   position: sticky;
   top: -1px;
-  background-color: #fafafa;
+  background-color: #fff;
   box-shadow: inset 0 -1px 0 #f0f0f0;
-  border-top: 1px solid #f0f0f0;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  z-index: 1;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  padding-left: 4px;
+}
+.dataviews-view-table .dataviews-view-table-header-button {
+  padding: 4px 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
+  color: #1e1e1e;
+}
+.dataviews-view-table .dataviews-view-table-header-button span {
+  speak: none;
+}
+.dataviews-view-table .dataviews-view-table-header-button span:empty {
+  display: none;
+}
+.dataviews-view-table .dataviews-view-table-header {
+  padding-left: 4px;
 }
 
-.dataviews-grid-view {
+.dataviews-view-grid {
   margin-bottom: 24px;
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   padding: 0 32px;
 }
 @media (min-width: 1080px) {
-  .dataviews-grid-view {
+  .dataviews-view-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }
 }
 @media (min-width: 1440px) {
-  .dataviews-grid-view {
+  .dataviews-view-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
 }
-.dataviews-grid-view .dataviews-view-grid__card h3 {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field .dataviews-view-grid__title-field {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: block;
+  font-size: 13px;
+  width: 100%;
+}
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field .dataviews-view-grid__title-field a,
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field button.dataviews-view-grid__title-field {
+  font-weight: 500;
+  color: #1e1e1e;
+  text-decoration: none;
 }
-.dataviews-grid-view .dataviews-view-grid__media {
+.dataviews-view-grid .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
@@ -215,76 +286,98 @@
   border-radius: 4px;
   overflow: hidden;
 }
-.dataviews-grid-view .dataviews-view-grid__media > * {
+.dataviews-view-grid .dataviews-view-grid__media > * {
   -o-object-fit: cover;
      object-fit: cover;
   width: 100%;
   height: 100%;
 }
-.dataviews-grid-view .dataviews-view-grid__primary-field {
+.dataviews-view-grid .dataviews-view-grid__primary-field {
   min-height: 24px;
 }
-.dataviews-grid-view .dataviews-view-grid__primary-field a {
-  color: #1e1e1e;
-  text-decoration: none;
-  font-weight: 500;
-}
-.dataviews-grid-view .dataviews-view-grid__fields {
+.dataviews-view-grid .dataviews-view-grid__fields {
   position: relative;
   font-size: 12px;
   line-height: 16px;
 }
-.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-header {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-header {
   color: #757575;
 }
-.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
 
-.dataviews-list-view {
+.dataviews-view-list {
   margin: 0;
+  padding: 8px;
 }
-.dataviews-list-view li {
-  border-bottom: 1px solid #f0f0f0;
+.dataviews-view-list li {
   margin: 0;
 }
-.dataviews-list-view li:first-child {
-  border-top: 1px solid #f0f0f0;
-}
-.dataviews-list-view li:last-child {
-  border-bottom: 0;
-}
-.dataviews-list-view .dataviews-list-view__item {
-  padding: 12px 32px;
-  cursor: default;
+.dataviews-view-list li .dataviews-view-list__item-wrapper {
+  position: relative;
+  padding-right: 24px;
+  border-radius: 4px;
 }
-.dataviews-list-view .dataviews-list-view__item:focus, .dataviews-list-view .dataviews-list-view__item:hover {
-  background-color: #f8f8f8;
+.dataviews-view-list li .dataviews-view-list__item-wrapper::after {
+  position: absolute;
+  content: "";
+  top: 100%;
+  left: 24px;
+  right: 24px;
+  background: #f0f0f0;
+  height: 1px;
+}
+.dataviews-view-list li:not(.is-selected):hover {
+  color: var(--wp-admin-theme-color);
+}
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields {
+  color: var(--wp-admin-theme-color);
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper {
+  background-color: var(--wp-admin-theme-color);
+  color: #fff;
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .components-button,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .components-button {
+  color: #fff;
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper::after,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper::after {
+  background: transparent;
+}
+.dataviews-view-list .dataviews-view-list__item {
+  padding: 12px 0 12px 24px;
+  width: 100%;
+  cursor: pointer;
 }
-.dataviews-list-view .dataviews-list-view__item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.dataviews-view-list .dataviews-view-list__item:focus::before {
+  position: absolute;
+  content: "";
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  z-index: -1;
+  border-radius: 4px;
 }
-.dataviews-list-view .dataviews-list-view__item h3 {
+.dataviews-view-list .dataviews-view-list__item h3 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dataviews-list-view .dataviews-list-view__item-selected,
-.dataviews-list-view .dataviews-list-view__item-selected:hover {
-  background-color: #f0f0f0;
-}
-.dataviews-list-view .dataviews-list-view__item-selected:focus,
-.dataviews-list-view .dataviews-list-view__item-selected:hover:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.dataviews-list-view .dataviews-list-view__media-wrapper {
+.dataviews-view-list .dataviews-view-list__media-wrapper {
   min-width: 32px;
   height: 32px;
   border-radius: 4px;
   overflow: hidden;
   position: relative;
 }
-.dataviews-list-view .dataviews-list-view__media-wrapper::after {
+.dataviews-view-list .dataviews-view-list__media-wrapper::after {
   content: "";
   position: absolute;
   top: 0;
@@ -294,26 +387,38 @@
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
 }
-.dataviews-list-view .edit-site-page-pages__featured-image,
-.dataviews-list-view .dataviews-list-view__media-placeholder {
+.dataviews-view-list .dataviews-view-list__media-placeholder {
   min-width: 32px;
   height: 32px;
-}
-.dataviews-list-view .dataviews-list-view__media-placeholder {
   background-color: #e0e0e0;
 }
-.dataviews-list-view .dataviews-list-view__fields {
+.dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dataviews-list-view .dataviews-list-view__fields .dataviews-list-view__field {
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field {
   margin-right: 12px;
 }
-.dataviews-list-view .dataviews-list-view__fields .dataviews-list-view__field:last-child {
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:last-child {
   margin-right: 0;
 }
+.dataviews-view-list + .dataviews-pagination {
+  justify-content: space-between;
+}
+.dataviews-view-list .dataviews-view-list__details-button {
+  align-self: center;
+  opacity: 0;
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__details-button,
+.dataviews-view-list li:hover .dataviews-view-list__details-button,
+.dataviews-view-list li:focus-within .dataviews-view-list__details-button {
+  opacity: 1;
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__details-button:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
+}
 
 .dataviews-action-modal {
   z-index: 1000001;
@@ -322,4 +427,9 @@
 .dataviews-no-results,
 .dataviews-loading {
   padding: 0 32px;
+}
+
+.dataviews-filters__custom-menu-radio-item-prefix {
+  display: block;
+  width: 24px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,14 +28,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.48.0",
-		"@wordpress/components": "^25.14.0",
-		"@wordpress/compose": "^6.25.0",
-		"@wordpress/element": "^5.25.0",
-		"@wordpress/i18n": "^4.48.0",
-		"@wordpress/icons": "^9.39.0",
-		"@wordpress/keycodes": "^3.48.0",
-		"@wordpress/private-apis": "^0.30.0",
+		"@wordpress/a11y": "^3.49.0",
+		"@wordpress/components": "^25.15.0",
+		"@wordpress/compose": "^6.26.0",
+		"@wordpress/element": "^5.26.0",
+		"@wordpress/i18n": "^4.49.0",
+		"@wordpress/icons": "^9.40.0",
+		"@wordpress/keycodes": "^3.49.0",
+		"@wordpress/primitives": "^3.47.0",
+		"@wordpress/private-apis": "^0.31.0",
 		"classnames": "^2.3.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -45,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
+	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
 }