wip

elastic · May 13, 2024 · d6f73ea · d6f73ea
1 parent c367da3
commit d6f73ea
Show file tree

Hide file tree

Showing 10 changed files with 302 additions and 45 deletions.
diff --git a/packages/charts/src/components/legend/_legend.scss b/packages/charts/src/components/legend/_legend.scss
@@ -2,24 +2,24 @@
   z-index: 1;
 
   max-width: 50%;
-  .echLegend__table {
+  .echLegendTable {
     overflow: auto;
     display: grid;
     width: 100%;
     padding: 8px;
     position: relative;
 
-    .echLegend__tableRowgroup {
+    .echLegendTable__rowgroup {
       display: contents;
     }
-    .echLegend__tableRow {
+    .echLegendTable__row {
       display: contents;
     }
   }
   &--horizontal {
     max-width: 100%;
     max-height: 100px;
-    .echLegend__table {
+    .echLegendTable {
       padding-bottom: 4px;
       margin-top: $echLegendRowGap;
       margin-bottom: $echLegendRowGap;
@@ -45,7 +45,7 @@
     pointer-events: none;
   }
 
-  .echLegend__tableContainer {
+  .echLegendTable__container {
     @include euiYScrollWithShadows;
     width: 100%;
     overflow-y: auto;

diff --git a/packages/charts/src/components/legend/_legend_item.scss b/packages/charts/src/components/legend/_legend_item.scss
@@ -11,32 +11,32 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};
   gap: 4px;
 }
 
-.echLegend__tableCell {
+.echLegendTable__cell {
   @include euiFontSizeXS;
   align-content: center;
   border-bottom: $euiColorLightestShade solid 1px;
   padding-bottom: 4px;
   padding: $euiSizeXS ($euiSizeXS * 2);
 }
 
-.echLegendItem .echLegend__tableCell:last-child {
+.echLegendItem .echLegendTable__cell:last-child {
   padding-right: 0;
 }
 
-.echLegendItem:last-child .echLegend__tableCell {
+.echLegendItem:last-child .echLegendTable__cell {
   border-bottom: #D3DAE6 solid 1px;
 }
 
 .echLegendItem--highlightable {
-  .echLegend__tableCell:hover {
+  .echLegendTable__cell:hover {
     background-color: $euiColorLightestShade;
   }
 
-  .echLegend__tableCell:hover ~ .echLegend__tableCell {
+  .echLegendTable__cell:hover ~ .echLegendTable__cell {
     background-color: $euiColorLightestShade;
   }
 
-  .echLegend__tableCell:has(~ .echLegend__tableCell:hover) {
+  .echLegendTable__cell:has(~ .echLegendTable__cell:hover) {
     background-color: $euiColorLightestShade;
   }
 }

diff --git a/packages/charts/src/components/legend/components/_legend.scss b/packages/charts/src/components/legend/components/_legend.scss
@@ -18,7 +18,7 @@ $tableRowHoverSelectedColor: tintOrShade($euiFocusBackgroundColor, 0, 10%);
 
 $transitionTime: 200ms;
 
-// .echLegend {
+// .echLegendTable {
 //   @include euiToolTipStyle;
 //   @include euiFontSizeXS;
 //   padding: 0;
@@ -43,16 +43,16 @@ $transitionTime: 200ms;
 //     pointer-events: auto;
 //     user-select: auto;
 
-//     .echLegend__tableRow--selectable {
+//     .echLegendTable__row--selectable {
 //       cursor: pointer;
 //     }
 
-//     .echLegend__tableWrapper {
+//     .echLegendTable__Wrapper {
 //       pointer-events: auto;
 //     }
 //   }
 
-//   .echLegend__tableCell--truncate {
+//   .echLegendTable__cell--truncate {
 //     @include lineClamp(2);
 //   }
 
@@ -80,9 +80,9 @@ $transitionTime: 200ms;
 //     }
 //   }
 
-//   &__tableHeader,
-//   &__tableFooter {
-//     .echLegend__tableCell {
+//   &__header,
+//   &__footer {
+//     .echLegendTable__cell {
 //       cursor: default;
 //       font-weight: $euiFontWeightSemiBold;
 //       background-color: $euiColorEmptyShade;
@@ -91,30 +91,30 @@ $transitionTime: 200ms;
 //     }
 //   }
 
-//   &__tableHeader,
-//   &__tableBody,
-//   &__tableFooter,
-//   &__tableRow {
+//   &__header,
+//   &__body,
+//   &__footer,
+//   &__row {
 //     // This ignores all above elements for positioning
 //     // effectively spreading all children in its place
 //     display: contents;
 //   }
 
-//   &__tableHeader {
+//   &__thader {
 //     margin-bottom: 0;
 //     top: 0;
 
-//     .echLegend__tableCell {
+//     .echLegendTable__cell {
 //       border-bottom: $tableBorder;
 //       top: 0;
 //     }
 //   }
 
-//   &__tableFooter {
+//   &__footer {
 //     margin-top: 0;
 //     bottom: 0;
 
-//     .echLegend__tableCell {
+//     .echLegendTable__cell {
 //       border-top: $tableBorder;
 //       bottom: 0;
 //     }
@@ -124,45 +124,45 @@ $transitionTime: 200ms;
 //     padding: 4px;
 //   }
 
-//   &__tableBody {
-//     .echLegend__tableCell:not(.echLegend__colorCell) {
+//   &__body {
+//     .echLegendTable__cell:not(.echLegend__colorCell) {
 //       padding: 2px 4px;
 //       transition:
 //         margin $transitionTime,
 //         padding $transitionTime;
 //     }
 
-//     .echLegend__tableRow--selected {
-//       .echLegend__tableCell:not(.echLegend__colorCell),
+//     .echLegendTable__row--selected {
+//       .echLegendTable__cell:not(.echLegend__colorCell),
 //       .echLegend__colorCell .echLegend__colorStrip--spacer {
 //         background-color: $tableRowSelectedColor;
 //       }
 
-//       .echLegend__colorCell + .echLegend__tableCell {
+//       .echLegend__colorCell + .echLegendTable__cell {
 //         margin-left: $colorStripPadding * 2;
 //         padding-left: 10px;
 //       }
 //     }
 
-//     .echLegend__tableRow--selected:hover {
-//       .echLegend__tableCell:not(.echLegend__colorCell),
+//     .echLegendTable__row--selected:hover {
+//       .echLegendTable__cell:not(.echLegend__colorCell),
 //       .echLegend__colorCell .echLegend__colorStrip--spacer {
 //         background-color: $tableRowHoverSelectedColor;
 //       }
 //     }
-//     .echLegend__tableRow--selectable:hover {
-//       .echLegend__tableCell:not(.echLegend__colorCell),
+//     .echLegendTable__row--selectable:hover {
+//       .echLegendTable__cell:not(.echLegend__colorCell),
 //       .echLegend__colorCell .echLegend__colorStrip--spacer {
 //         background-color: $tableRowHoverColor;
 //       }
 //     }
 //   }
 
-//   &__tableRow {
+//   &__row {
 //     position: relative;
 
 //     &--highlighted {
-//       .echLegend__tableCell:not(.echLegend__colorCell),
+//       .echLegendTable__cell:not(.echLegend__colorCell),
 //       .echLegend__colorCell .echLegend__colorStrip--spacer {
 //         background-color: transparentize($euiColorLightShade, 0.5);
 //       }