@atlaskit/editor-plugin-table 4.0.1 → 4.0.3

package/src/plugins/table/ui/ui-styles.ts

@@ -313,19 +313,36 @@ export const OverflowShadow = (props: ThemeProps) => css`
   }
 `;
 
-const columnHeaderButton = (props: ThemeProps, cssString?: string) => css`
-  background: ${tableHeaderCellBackgroundColor(props)};
-  border: 1px solid ${tableBorderColor(props)};
-  display: block;
-  box-sizing: border-box;
-  padding: 0;
-
-  :focus {
-    outline: none;
-  }
+const columnHeaderButton = (props: ThemeProps, cssString?: string) => {
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return css`
+      background: ${tableHeaderCellBackgroundColor(props)};
+      display: block;
+      box-sizing: border-box;
+      padding: 0;
+
+      :focus {
+        outline: none;
+      }
 
-  ${cssString}
-`;
+      ${cssString}
+    `;
+  } else {
+    return css`
+      background: ${tableHeaderCellBackgroundColor(props)};
+      border: 1px solid ${tableBorderColor(props)};
+      display: block;
+      box-sizing: border-box;
+      padding: 0;
+
+      :focus {
+        outline: none;
+      }
+
+      ${cssString}
+    `;
+  }
+};
 
 const columnHeaderButtonSelected = (props: ThemeProps) => css`
   color: ${token('color.text.inverse', N0)};
@@ -357,104 +374,232 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
     : '';
 };
 
-export const columnControlsDecoration = (props: ThemeProps) => css`
-  .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-    display: none;
-    cursor: pointer;
-    position: absolute;
-    width: calc(100% + ${tableCellBorderWidth * 2}px);
-    left: -1px;
-    top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
-    height: ${columnControlsDecorationHeight}px;
-    // floating dot for adding column button
-    &::before {
-      content: ' ';
-      background-color: ${tableBorderColor(props)};
-      position: absolute;
-      height: ${lineMarkerSize}px;
-      width: ${lineMarkerSize}px;
-      border-radius: 50%;
-      pointer-events: none;
-      top: 2px;
-      right: -1px;
-    }
+export const columnControlsDecoration = (props: ThemeProps) => {
+  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
+    return css`
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        display: none;
+        cursor: pointer;
+        position: absolute;
+        width: 100%;
+        left: 0;
+        top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
+        height: ${columnControlsDecorationHeight}px;
+        // floating dot for adding column button
+        &::before {
+          content: ' ';
+          background-color: ${tableBorderColor(props)};
+          position: absolute;
+          height: ${lineMarkerSize}px;
+          width: ${lineMarkerSize}px;
+          border-radius: 50%;
+          pointer-events: none;
+          top: 2px;
+          right: -1px;
+        }
 
-    &::after {
-      content: ' ';
+        &::after {
+          content: ' ';
 
-      ${columnHeaderButton(
-        props,
-        `
+          ${columnHeaderButton(
+            props,
+            `
         border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(
-          props,
-        )};
-        border-bottom: none;
-        height: ${tableToolbarSize}px;
+              props,
+            )};
+        border-top: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
+        border-bottom: ${tableCellBorderWidth}px solid ${tableBorderColor(
+              props,
+            )};
+        box-sizing: content-box;
+        height: ${tableToolbarSize - 1}px;
         width: 100%;
         position: absolute;
         top: ${columnControlsDecorationHeight - tableToolbarSize}px;
         left: 0px;
         z-index: ${columnControlsZIndex};
       `,
-      )}
-    }
-  }
+          )}
+        }
+      }
 
-  // floating dot for adding column button - overriding style on last column to avoid scroll
-  ${getFloatingDotOverrides(props)}
+      // floating dot for adding column button - overriding style on last column to avoid scroll
+      ${getFloatingDotOverrides(props)}
 
-  div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-    content: ' ';
-    background-color: ${tableBorderColor(props)};
-    position: absolute;
-    height: ${lineMarkerSize}px;
-    width: ${lineMarkerSize}px;
-    border-radius: 50%;
-    pointer-events: none;
-    top: -${tableToolbarSize + tableCellBorderWidth}px;
-    right: -1px;
-  }
+      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+        content: ' ';
+        background-color: ${tableBorderColor(props)};
+        position: absolute;
+        height: ${lineMarkerSize}px;
+        width: ${lineMarkerSize}px;
+        border-radius: 50%;
+        pointer-events: none;
+        top: -${tableToolbarSize + tableCellBorderWidth}px;
+        right: -1px;
+      }
 
-  .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-    display: block;
-  }
+      .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        display: block;
+      }
 
-  table
-    tr:first-of-type
-    td.${ClassName.TABLE_CELL},
-    table
-    tr:first-of-type
-    th.${ClassName.TABLE_HEADER_CELL} {
-    &.${ClassName.COLUMN_SELECTED},
-      &.${ClassName.HOVERED_COLUMN},
-      &.${ClassName.HOVERED_TABLE} {
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        ${columnHeaderButtonSelected(props)};
+      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            ${columnHeaderButtonSelected(props)};
+          }
+
+          &.${ClassName.HOVERED_CELL_IN_DANGER}
+            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            background-color: ${tableToolbarDeleteColor(props)};
+            border-color: ${tableBorderDeleteColor(props)};
+            z-index: ${akEditorUnitZIndex * 100};
+          }
+        }
+      }
+
+      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            ${columnHeaderButtonSelected(props)};
+            border-left: ${tableCellBorderWidth}px solid
+              ${tableBorderSelectedColor(props)};
+            left: -${tableCellBorderWidth}px;
+          }
+        }
       }
 
-      &.${ClassName.HOVERED_CELL_IN_DANGER}
+      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.HOVERED_COLUMN} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            ${columnHeaderButtonSelected(props)};
+          }
+
+          &.${ClassName.HOVERED_CELL_IN_DANGER}
+            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            background-color: ${tableToolbarDeleteColor(props)};
+            border-color: ${tableBorderDeleteColor(props)};
+            border-left: ${tableCellBorderWidth}px solid
+              ${tableBorderDeleteColor(props)};
+            left: -${tableCellBorderWidth}px;
+            z-index: ${akEditorUnitZIndex * 100};
+          }
+        }
+      }
+
+      .${ClassName.TABLE_SELECTED}
+        table
+        tr:first-of-type
+        td.${ClassName.TABLE_CELL},
+        .${ClassName.TABLE_SELECTED}
+        table
+        tr:first-of-type
+        th.${ClassName.TABLE_HEADER_CELL} {
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        background-color: ${tableToolbarDeleteColor(props)};
-        border: 1px solid ${tableBorderDeleteColor(props)};
+          ${columnHeaderButtonSelected(props)};
+        }
+      }
+    `;
+  } else {
+    return css`
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        display: none;
+        cursor: pointer;
+        position: absolute;
+        width: calc(100% + ${tableCellBorderWidth * 2}px);
+        left: -1px;
+        top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
+        height: ${columnControlsDecorationHeight}px;
+        // floating dot for adding column button
+        &::before {
+          content: ' ';
+          background-color: ${tableBorderColor(props)};
+          position: absolute;
+          height: ${lineMarkerSize}px;
+          width: ${lineMarkerSize}px;
+          border-radius: 50%;
+          pointer-events: none;
+          top: 2px;
+          right: -1px;
+        }
+
+        &::after {
+          content: ' ';
+
+          ${columnHeaderButton(
+            props,
+            `
+        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(
+              props,
+            )};
         border-bottom: none;
-        z-index: ${akEditorUnitZIndex * 100};
+        height: ${tableToolbarSize}px;
+        width: 100%;
+        position: absolute;
+        top: ${columnControlsDecorationHeight - tableToolbarSize}px;
+        left: 0px;
+        z-index: ${columnControlsZIndex};
+      `,
+          )}
+        }
       }
-    }
-  }
 
-  .${ClassName.TABLE_SELECTED}
-    table
-    tr:first-of-type
-    td.${ClassName.TABLE_CELL},
-    .${ClassName.TABLE_SELECTED}
-    table
-    tr:first-of-type
-    th.${ClassName.TABLE_HEADER_CELL} {
-    .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-      ${columnHeaderButtonSelected(props)};
-    }
+      // floating dot for adding column button - overriding style on last column to avoid scroll
+      ${getFloatingDotOverrides(props)}
+
+      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+        content: ' ';
+        background-color: ${tableBorderColor(props)};
+        position: absolute;
+        height: ${lineMarkerSize}px;
+        width: ${lineMarkerSize}px;
+        border-radius: 50%;
+        pointer-events: none;
+        top: -${tableToolbarSize + tableCellBorderWidth}px;
+        right: -1px;
+      }
+
+      .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+        display: block;
+      }
+
+      table
+        tr:first-of-type
+        td.${ClassName.TABLE_CELL},
+        table
+        tr:first-of-type
+        th.${ClassName.TABLE_HEADER_CELL} {
+        &.${ClassName.COLUMN_SELECTED},
+          &.${ClassName.HOVERED_COLUMN},
+          &.${ClassName.HOVERED_TABLE} {
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            ${columnHeaderButtonSelected(props)};
+          }
+
+          &.${ClassName.HOVERED_CELL_IN_DANGER}
+            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+            background-color: ${tableToolbarDeleteColor(props)};
+            border: 1px solid ${tableBorderDeleteColor(props)};
+            border-bottom: none;
+            z-index: ${akEditorUnitZIndex * 100};
+          }
+        }
+      }
+
+      .${ClassName.TABLE_SELECTED}
+        table
+        tr:first-of-type
+        td.${ClassName.TABLE_CELL},
+        .${ClassName.TABLE_SELECTED}
+        table
+        tr:first-of-type
+        th.${ClassName.TABLE_HEADER_CELL} {
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+          ${columnHeaderButtonSelected(props)};
+        }
+      }
+    `;
   }
-`;
+};
 
 export const hoveredDeleteButton = (props: ThemeProps) => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {

package/tsconfig.app.json

@@ -33,6 +33,9 @@
     "outDir": "../../../tsDist/@atlaskit__editor-plugin-table/app"
   },
   "references": [
+    {
+      "path": "../custom-steps/tsconfig.app.json"
+    },
     {
       "path": "../editor-common/tsconfig.app.json"
     },

package/tsconfig.dev.json

@@ -42,6 +42,9 @@
     {
       "path": "../../design-system/button/tsconfig.app.json"
     },
+    {
+      "path": "../custom-steps/tsconfig.app.json"
+    },
     {
       "path": "../../../build/website/docs/tsconfig.app.json"
     },