playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -1,22 +0,0 @@
-export { default as TableSm } from './_table_sm.jsx'
-export { default as TableMd } from './_table_md.jsx'
-export { default as TableLg } from './_table_lg.jsx'
-export { default as TableSticky } from './_table_sticky.jsx'
-export { default as TableSideHighlight } from './_table_side_highlight.jsx'
-export { default as TableContainer } from './_table_container.jsx'
-export { default as TableDataTable } from './_table_data_table.jsx'
-export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
-export { default as TableDisableHover } from './_table_disable_hover.jsx'
-export { default as TableSingleLine } from './_table_single_line.jsx'
-export { default as TableMultiline } from './_table_multiline.jsx'
-export { default as TableOneAction } from './_table_one_action.jsx'
-export { default as TableTwoActions } from './_table_two_actions.jsx'
-export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
-export { default as TableActionMiddle } from './_table_action_middle.jsx'
-export { default as TableIconButtons } from './_table_icon_buttons.jsx'
-export { default as TableAlignmentColumn } from './_table_alignment_column.jsx'
-export { default as TableAlignmentRow } from './_table_alignment_row.jsx'
-export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.jsx'
-export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
-export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
-export { default as TableVerticalBorder } from './_table_vertical_border.jsx'

data/app/pb_kits/playbook/pb_table/styles/_alignment.scss

@@ -1,32 +0,0 @@
-[class^=pb_table] {
-    tr {
-        vertical-align: top;
-    }
-
-    // Text Align
-    tr[align=center] th,
-    tr th[align=center] {
-      text-align: center !important;
-    }
-    tr[align=right] th,
-    tr th[align=right] {
-      text-align: right !important;
-    }
-
-    // Column Align
-    tr[shift=up],
-    td[shift=up],
-    th[shift=up] {
-        vertical-align: top;
-      }
-    tr[shift=middle],
-    td[shift=middle],
-    th[shift=middle] {
-      vertical-align: middle;
-    }
-    tr[shift=down],
-    td[shift=down],
-    th[shift=down] {
-      vertical-align: bottom;
-    }
-}

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -1,19 +0,0 @@
-@import "../../tokens/colors";
-
-@import "variables";
-@import "reset";
-@import "structure";
-@import "table-card";
-@import "content";
-@import "headers";
-@import "side_highlight";
-@import "alignment";
-@import "hover";
-@import "single-line";
-@import "table-dark";
-@import "mobile";
-@import "mobile_collapse";
-@import "tablet_collapse";
-@import "desktop_collapse";
-@import "sticky_header";
-@import "vertical_border";

data/app/pb_kits/playbook/pb_table/styles/_content.scss

@@ -1,13 +0,0 @@
-[class^=pb_table] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    tbody {
-      tr {
-        td {
-          font-size: $default-font-size;
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -1,125 +0,0 @@
-@import "../../tokens/border_radius";
-@import "../../tokens/positioning";
-@import "../../pb_caption/caption_mixin";
-
-@media only screen and (max-width: $screen-xl-min) {
-  [class^=pb_table] {
-    &.table-sm.table-collapse-lg,
-    &.table-md.table-collapse-lg,
-    &.table-lg.table-collapse-lg {
-      width: 100%;
-      background: none !important;
-
-      thead {
-        tr {
-          left: $offscreen;
-          position: absolute;
-          top: $offscreen;
-
-          th {
-            display: block;
-            visibility: visible;
-          }
-        }
-      }
-      tbody {
-        tr {
-          td {
-            display: block;
-            visibility: visible;
-            border-left-width: 1px !important;
-            border-right-width: 1px !important;
-            border-bottom-width: 0 !important;
-            border-color: $border_light !important;
-            min-height: 2.2em;
-            position: relative;
-            text-align:left;
-            white-space: normal;
-            &:before {
-              content: attr(data-title);
-              @include caption;
-              width: 100% !important;
-              white-space: nowrap !important;
-              text-overflow: ellipsis !important;
-              position: relative !important;
-              top: 0 !important;
-              left: 0 !important;
-              height: 100% !important;
-              padding-left: 0 !important;
-              display: block !important;
-            }
-
-            &:first-child {
-              margin-top: $space_md !important;
-              border-top-width: 1px !important;
-              border-top-color: $border_light !important;
-              border-radius: $border_rad_light $border_rad_light 0 0;
-            }
-
-            &:last-child {
-              border-radius: 0 0 $border_rad_light $border_rad_light;
-              border-bottom-width: 1px !important;
-            }
-          }
-
-          &:first-child {
-            td {
-              &:first-child {
-                margin-top: $space-xs !important;
-              }
-            }
-          }
-        }
-      }
-      &.table-card {
-        background: none !important;
-
-        tbody {
-          tr {
-            td {
-              background: $white !important;
-              border-left-width: 1px !important;
-              border-right-width: 1px !important;
-              border-top-width: 1px !important;
-              &:after {
-                height: 0;
-                background-color: transparent;
-              }
-
-              &:first-child {
-                border-radius: $border_rad_light $border_rad_light 0 0 !important;
-              }
-              &:last-child {
-                border-radius: 0 0 $border_rad_light $border_rad_light !important;
-              }
-            }
-          }
-        }
-      }
-      @media (hover:hover) {
-        &:hover {
-          tbody {
-            tr {
-              box-shadow: 0 0 0 $white !important;
-            }
-          }
-        }
-      }
-      // reset the first and last to normalize
-      @each $name, $value in $cell-pad-list {
-        &.#{$name} {
-          tbody {
-            tr {
-              td {
-                &:first-child,
-                &:last-child {
-                  padding: $value $cell-gutter !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -1,16 +0,0 @@
-@import "../../pb_caption/caption_mixin";
-
-[class^=pb_table] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    thead {
-      tr {
-        th {
-          @include caption;
-          border-bottom: 1px solid $border_light;
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -1,74 +0,0 @@
-@import "../../tokens/opacity";
-
-$transition-speed: 0.2s;
-
-[class^=pb_table] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    &:not(.no-hover) {
-      border-collapse: collapse;
-      tbody {
-        tr {
-          box-shadow: 0 0 0 $white;
-          transition: box-shadow $transition-speed ease;
-          td {
-            border-top-color: transparent;
-            border-top-width: 0;
-            transition: all $transition-speed ease; 
-          }
-          @media (hover:hover) { 
-            td {
-              position: relative;
-              &:after {
-                transition: background-color $transition-speed ease, height $transition-speed ease;
-                content: "";
-                position: absolute;
-                display: block;
-                top: -1px;
-                left: 0;
-                right: 0;
-                height: 0;
-                background-color: transparent;
-              }
-              &:first-child:after {
-                left: -1px;
-              }
-              &:last-child:after {
-                right: -1px;
-              }
-            }
-            &:hover {
-              box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
-              td {
-                border-color: darken($border_light, 10%);
-                border-top-width: 0;
-                border-top-color: transparent;
-                &:after {
-                  transition: background-color $transition-speed ease, height $transition-speed ease;
-                  background-color: darken($border_light, 10%);
-                  height: 1px;
-                }
-              }
-            }
-          }
-        }
-      }
-      &.table-card {
-        border-collapse: separate;
-        tbody {
-          tr {
-            td {
-              &:first-child {
-                border-left-width: 1px;
-              }
-              &:last-child {
-                border-right-width: 1px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -1,125 +0,0 @@
-@import "../../tokens/border_radius";
-@import "../../tokens/positioning";
-@import "../../pb_caption/caption_mixin";
-
-@media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table] {
-    &.table-sm.table-responsive-collapse,
-    &.table-md.table-responsive-collapse,
-    &.table-lg.table-responsive-collapse {
-      width: 100%;
-      background: none !important;
-
-      thead {
-        tr {
-          left: $offscreen;
-          position: absolute;
-          top: $offscreen;
-
-          th {
-            display: block;
-            visibility: visible;
-          }
-        }
-      }
-      tbody {
-        tr {
-          td {
-            display: block;
-            visibility: visible;
-            border-left-width: 1px !important;
-            border-right-width: 1px !important;
-            border-bottom-width: 0 !important;
-            border-color: $border_light !important;
-            min-height: 2.2em;
-            position: relative;
-            text-align:left;
-            white-space: normal;
-            &:before {
-              content: attr(data-title);
-              @include caption;
-              width: 100% !important;
-              white-space: nowrap !important;
-              text-overflow: ellipsis !important;
-              position: relative !important;
-              top: 0 !important;
-              left: 0 !important;
-              height: 100% !important;
-              padding-left: 0 !important;
-              display: block !important;
-            }
-
-            &:first-child {
-              margin-top: $space_md !important;
-              border-top-width: 1px !important;
-              border-top-color: $border_light !important;
-              border-radius: $border_rad_light $border_rad_light 0 0;
-            }
-
-            &:last-child {
-              border-radius: 0 0 $border_rad_light $border_rad_light;
-              border-bottom-width: 1px !important;
-            }
-          }
-
-          &:first-child {
-            td {
-              &:first-child {
-                margin-top: $space-xs !important;
-              }
-            }
-          }
-        }
-      }
-      &.table-card {
-        background: none !important;
-
-        tbody {
-          tr {
-            td {
-              background: $white !important;
-              border-left-width: 1px !important;
-              border-right-width: 1px !important;
-              border-top-width: 1px !important;
-              &:after {
-                height: 0;
-                background-color: transparent;
-              }
-
-              &:first-child {
-                border-radius: $border_rad_light $border_rad_light 0 0 !important;
-              }
-              &:last-child {
-                border-radius: 0 0 $border_rad_light $border_rad_light !important;
-              }
-            }
-          }
-        }
-      }
-      @media (hover:hover) {
-        &:hover {
-          tbody {
-            tr {
-              box-shadow: 0 0 0 $white !important;
-            }
-          }
-        }
-      }
-      // reset the first and last to normalize
-      @each $name, $value in $cell-pad-list {
-        &.#{$name} {
-          tbody {
-            tr {
-              td {
-                &:first-child,
-                &:last-child {
-                  padding: $value $cell-gutter !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -1,125 +0,0 @@
-@import "../../tokens/border_radius";
-@import "../../tokens/positioning";
-@import "../../pb_caption/caption_mixin";
-
-@media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table] {
-    &.table-sm.table-collapse-sm,
-    &.table-md.table-collapse-sm,
-    &.table-lg.table-collapse-sm {
-      width: 100%;
-      background: none !important;
-
-      thead {
-        tr {
-          left: $offscreen;
-          position: absolute;
-          top: $offscreen;
-
-          th {
-            display: block;
-            visibility: visible;
-          }
-        }
-      }
-      tbody {
-        tr {
-          td {
-            display: block;
-            visibility: visible;
-            border-left-width: 1px !important;
-            border-right-width: 1px !important;
-            border-bottom-width: 0 !important;
-            border-color: $border_light !important;
-            min-height: 2.2em;
-            position: relative;
-            text-align:left;
-            white-space: normal;
-            &:before {
-              content: attr(data-title);
-              @include caption;
-              width: 100% !important;
-              white-space: nowrap !important;
-              text-overflow: ellipsis !important;
-              position: relative !important;
-              top: 0 !important;
-              left: 0 !important;
-              height: 100% !important;
-              padding-left: 0 !important;
-              display: block !important;
-            }
-
-            &:first-child {
-              margin-top: $space_md !important;
-              border-top-width: 1px !important;
-              border-top-color: $border_light !important;
-              border-radius: $border_rad_light $border_rad_light 0 0;
-            }
-
-            &:last-child {
-              border-radius: 0 0 $border_rad_light $border_rad_light;
-              border-bottom-width: 1px !important;
-            }
-          }
-
-          &:first-child {
-            td {
-              &:first-child {
-                margin-top: $space-xs !important;
-              }
-            }
-          }
-        }
-      }
-      &.table-card {
-        background: none !important;
-
-        tbody {
-          tr {
-            td {
-              background: $white !important;
-              border-left-width: 1px !important;
-              border-right-width: 1px !important;
-              border-top-width: 1px !important;
-              &:after {
-                height: 0;
-                background-color: transparent;
-              }
-
-              &:first-child {
-                border-radius: $border_rad_light $border_rad_light 0 0 !important;
-              }
-              &:last-child {
-                border-radius: 0 0 $border_rad_light $border_rad_light !important;
-              }
-            }
-          }
-        }
-      }
-      @media (hover:hover) {
-        &:hover {
-          tbody {
-            tr {
-              box-shadow: 0 0 0 $white !important;
-            }
-          }
-        }
-      }
-      // reset the first and last to normalize
-      @each $name, $value in $cell-pad-list {
-        &.#{$name} {
-          tbody {
-            tr {
-              td {
-                &:first-child,
-                &:last-child {
-                  padding: $value $cell-gutter !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_reset.scss

@@ -1,17 +0,0 @@
-[class^=pb_table] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    border-collapse: collapse;
-    background-color: unset;
-    background: unset;
-
-    thead {
-      tr {
-        th {
-          text-align: left;
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss

@@ -1,24 +0,0 @@
-@import "../../tokens/colors";
-
-$pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
-
-@mixin pb_table_row_kit_side_highlight($background) {
-  box-shadow: inset 4px 0 0 0 $background;
-  border-top: 0px;
-}
-
-[class^=pb_table] {
-  tbody {
-    [class^=pb_table_row_kit] {
-      @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
-        &[class*=_side_highlight_#{$color_name}] {
-          td {
-            &:first-child {
-              @include pb_table_row_kit_side_highlight($color_value);
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -1,34 +0,0 @@
-[class^=pb_table] {
-  &.single-line {
-    width: 100%;
-    max-width: 100vw;
-    table-layout: fixed;
-
-    tbody {
-      tr {
-        td {
-          white-space: nowrap;
-          text-overflow: ellipsis;
-
-          & > * {
-            &:not(.btn, br) {
-              display: inline-block !important;
-            }
-          }
-
-          .btn {
-            display: block !important;
-          }
-
-          br {
-            content:' ' !important;
-
-            &::after {
-              content:' ';
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss

@@ -1,23 +0,0 @@
-@import "../../tokens/colors";
-
-[class^="pb_table"] {
-  &.sticky-header {
-    thead {
-      background: $white;
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    }
-  }
-
-  &.dark {
-    &.sticky-header {
-      thead {
-        background: $bg_dark;
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
-    }
-  }
-}