Improve UX of table creator

app/assets/javascripts/content_editor/components/toolbar_table_button.vue

@@ -5,17 +5,17 @@ import { clamp } from '../services/utils';
 
 export const tableContentType = 'table';
 
-const MIN_ROWS = 3;
-const MIN_COLS = 3;
-const MAX_ROWS = 8;
-const MAX_COLS = 8;
+const MIN_ROWS = 5;
+const MIN_COLS = 5;
+const MAX_ROWS = 10;
+const MAX_COLS = 10;
 
 export default {
   components: {
+    GlButton,
     GlDropdown,
     GlDropdownDivider,
     GlDropdownForm,
-    GlButton,
   },
   inject: ['tiptapEditor'],
   data() {
@@ -62,22 +62,22 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown size="small" category="tertiary" icon="table">
-    <gl-dropdown-form class="gl-px-3! gl-w-auto!">
-      <div class="gl-w-auto!">
-        <div v-for="r of list(maxRows)" :key="r" class="gl-display-flex">
-          <gl-button
-            v-for="c of list(maxCols)"
-            :key="c"
-            :data-testid="`table-${r}-${c}`"
-            :class="{ 'gl-bg-blue-50!': r <= rows && c <= cols }"
-            :aria-label="getButtonLabel(r, c)"
-            class="gl-display-inline! gl-px-0! gl-w-5! gl-h-5! gl-rounded-0!"
-            @mouseover="setRowsAndCols(r, c)"
-            @click="insertTable()"
-          />
-        </div>
-        <gl-dropdown-divider />
+  <gl-dropdown size="small" category="tertiary" icon="table" class="table-dropdown">
+    <gl-dropdown-form class="gl-px-3!">
+      <div v-for="r of list(maxRows)" :key="r" class="gl-display-flex">
+        <gl-button
+          v-for="c of list(maxCols)"
+          :key="c"
+          :data-testid="`table-${r}-${c}`"
+          :class="{ 'active gl-bg-blue-50!': r <= rows && c <= cols }"
+          :aria-label="getButtonLabel(r, c)"
+          class="table-creator-grid-item gl-display-inline gl-rounded-0! gl-w-6! gl-h-6! gl-p-0!"
+          @mouseover="setRowsAndCols(r, c)"
+          @click="insertTable()"
+        />
+      </div>
+      <gl-dropdown-divider class="gl-my-3! gl-mx-n3!" />
+      <div class="gl-px-1">
         {{ getButtonLabel(rows, cols) }}
       </div>
     </gl-dropdown-form>

app/assets/stylesheets/components/content_editor.scss

@@ -35,3 +35,22 @@
     }
   }
 }
+
+.table-creator-grid-item {
+  box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
+    inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100,
+    inset #{-$gl-spacing-scale-1} #{-$gl-spacing-scale-1} 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100 !important;
+
+  &.active {
+    box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
+      inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 $gl-spacing-scale-2 $blue-500,
+      inset #{-$gl-spacing-scale-1} #{-$gl-spacing-scale-1} 0 $gl-spacing-scale-2 $blue-500 !important;
+  }
+}
+
+.table-dropdown .dropdown-menu {
+  @include gl-min-w-0;
+  @include gl-w-auto;
+
+  @include gl-white-space-nowrap;
+}

spec/frontend/content_editor/components/toolbar_table_button_spec.js

@@ -29,17 +29,17 @@ describe('content_editor/components/toolbar_table_button', () => {
     wrapper.destroy();
   });
 
-  it('renders a grid of 3x3 buttons to create a table', () => {
-    expect(getNumButtons()).toBe(9); // 3 x 3
+  it('renders a grid of 5x5 buttons to create a table', () => {
+    expect(getNumButtons()).toBe(25); // 5x5
   });
 
   describe.each`
     row  | col  | numButtons | tableSize
-    ${1} | ${2} | ${9}       | ${'1x2'}
-    ${2} | ${2} | ${9}       | ${'2x2'}
-    ${2} | ${3} | ${12}      | ${'2x3'}
-    ${3} | ${2} | ${12}      | ${'3x2'}
-    ${3} | ${3} | ${16}      | ${'3x3'}
+    ${3} | ${4} | ${25}      | ${'3x4'}
+    ${4} | ${4} | ${25}      | ${'4x4'}
+    ${4} | ${5} | ${30}      | ${'4x5'}
+    ${5} | ${4} | ${30}      | ${'5x4'}
+    ${5} | ${5} | ${36}      | ${'5x5'}
   `('button($row, $col) in the table creator grid', ({ row, col, numButtons, tableSize }) => {
     describe('on mouse over', () => {
       beforeEach(async () => {
@@ -50,9 +50,7 @@ describe('content_editor/components/toolbar_table_button', () => {
       it('marks all rows and cols before it as active', () => {
         const prevRow = Math.max(1, row - 1);
         const prevCol = Math.max(1, col - 1);
-        expect(wrapper.findByTestId(`table-${prevRow}-${prevCol}`).element).toHaveClass(
-          'gl-bg-blue-50!',
-        );
+        expect(wrapper.findByTestId(`table-${prevRow}-${prevCol}`).element).toHaveClass('active');
       });
 
       it('shows a help text indicating the size of the table being inserted', () => {
@@ -89,8 +87,8 @@ describe('content_editor/components/toolbar_table_button', () => {
     });
   });
 
-  it('does not create more buttons than a 8x8 grid', async () => {
-    for (let i = 3; i < 8; i += 1) {
+  it('does not create more buttons than a 10x10 grid', async () => {
+    for (let i = 5; i < 10; i += 1) {
       expect(getNumButtons()).toBe(i * i);
 
       // eslint-disable-next-line no-await-in-loop
@@ -98,6 +96,6 @@ describe('content_editor/components/toolbar_table_button', () => {
       expect(findDropdown().element).toHaveText(`Insert a ${i}x${i} table.`);
     }
 
-    expect(getNumButtons()).toBe(64); // 8x8 (and not 9x9)
+    expect(getNumButtons()).toBe(100); // 10x10 (and not 11x11)
   });
 });