@citizenplane/pimp 10.6.1 → 10.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.6.1",
+  "version": "10.6.2",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpMenuItem.vue

@@ -92,6 +92,7 @@ const handleItemClick = async (event: Event) => {
     }
 
     position: relative;
+    color: var(--cp-text-primary);
     display: flex;
     width: 100%;
     align-items: center;

package/src/components/CpTable.vue

@@ -695,75 +695,15 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   }
 
   &__row {
-    &--body:not(:last-of-type):not(#{&}--isFullWidth) {
-      box-shadow: inset 0 calc(var(--cp-dimensions-0_25) * -1) 0 var(--cp-border-soft);
-    }
-
-    &--body:has(+ #{&}--isFullWidth),
-    &--isFullWidth:has(+ .cpTable__row:hover) {
-      box-shadow: none !important;
-    }
-
-    &--isFullWidth:has(+ .cpTable__row:is(:hover, :focus, :focus-within), + .cpTable__row--isSelected)
-      + .cpTable__row::after {
-      box-shadow: none !important;
-    }
-
-    &--isFullWidth {
-      border-top: none;
-    }
-
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) {
-      position: relative;
-      transition: background-color 100ms ease-in-out;
+    &--body:not(:last-of-type) {
+      border-bottom: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     }
 
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) td {
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
       background-color: var(--cp-background-primary-hover);
-    }
-
-    &--body:not(#{&}--isFullWidth):not(
-        :has(+ #{&}--isSelected),
-        :has(+ .cpTable__row:is(:hover, :focus, :focus-within))
-      ):is(:hover, :focus, :focus-within)::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-      pointer-events: none;
-    }
-
-    &--body:not(#{&}--isFullWidth):hover td:first-child,
-    &--body:not(#{&}--isFullWidth):focus td:first-child,
-    &--body:not(#{&}--isFullWidth):focus-within td:first-child {
-      border-top-left-radius: var(--cp-radius-md);
-      border-bottom-left-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):hover td:last-child,
-    &--body:not(#{&}--isFullWidth):focus td:last-child,
-    &--body:not(#{&}--isFullWidth):focus-within td:last-child {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):hover
-      td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):focus
-      td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):focus-within
-      td:nth-last-child(2) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):hover td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):focus td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):focus-within
-      td:nth-last-child(2) {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
+      transition: background-color 100ms ease-in-out;
     }
 
     &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
@@ -774,8 +714,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     &--isFullWidth td {
       padding: var(--cp-spacing-md);
       background-color: var(--cp-background-secondary);
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     }
 
     &--isClickable {
@@ -787,49 +725,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       color: var(--cp-text-accent-primary);
     }
 
-    &--isSelected {
-      position: relative;
-    }
-
-    &--isSelected:not(:has(+ #{&}--isFullWidth))::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-utility-accent-100);
-      pointer-events: none;
-    }
-
-    &--isSelected td:first-child {
-      border-top-left-radius: var(--cp-radius-md);
-      border-bottom-left-radius: var(--cp-radius-md);
-    }
-
-    &--isSelected td:last-child {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--isSelected:has(.cpTable__cell--isOptions:not([style*='display: none'])) td:nth-last-child(2) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--isSelected:has(.cpTable__cell--isOptions[style*='display: none']) td:nth-last-child(2) {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within),
-    &--body:not(#{&}--isFullWidth).cpTable__row--isSelected {
-      box-shadow: none !important;
-    }
-
-    &--body:not(#{&}--isFullWidth):has(+ #{&}--isSelected),
-    &--body:not(#{&}--isFullWidth):has(+ #{&}:is(:hover, :focus, :focus-within)) {
-      box-shadow: none !important;
-    }
-
     &--body td {
       font-size: var(--cp-text-size-sm);
     }
@@ -873,28 +768,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
   }
 
-  &:has(
-    .cpTable__row--body:first-of-type:is(:hover, :focus, :focus-within),
-    .cpTable__row--body:first-of-type.cpTable__row--isSelected
-  ) {
-    .cpTable__column:after {
-      background-color: transparent;
-    }
-  }
-
-  &:has(
-    .cpTable__row--body:last-of-type:is(:hover, :focus, :focus-within),
-    .cpTable__row--body:last-of-type.cpTable__row--isSelected
-  ) {
-    .cpTable__container--hasPagination {
-      border-bottom-color: transparent;
-    }
-  }
-
-  &__table:has(.cpTable__row--body:first-of-type.cpTable__row--isFullWidth) &__column:after {
-    background-color: transparent;
-  }
-
   &__columnEditor {
     padding-right: calc(var(--cp-spacing-lg) + var(--cp-dimensions-0_5));