[Docs] Separated out Borders to its own page & [EuiTableRowCell] fixes (

elastic#5283) * Moved Border tokens to its own page * Figured out a way to get subsections in the sidenav working * Added the new `_values` under `customizing/` * [EuiTableRowCell] Actually support `valign` property manually * [EuiTable*] Fixing some props and mobile options * Slightly better responsive table styles
chandlerprall · Oct 26, 2021 · 2553d89 · 2553d89
1 parent 86af5ba
commit 2553d89
Show file tree

Hide file tree

Showing 33 changed files with 1,116 additions and 683 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,24 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `40.0.0`.
+- Added styling support for `valign` prop on `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283))
+
+**Bug fixes**
+
+- Fixed default text alignment in `EuiTableRowCell` on Safari ([#5283](https://github.com/elastic/eui/pull/5283))
+- Fixed `mobileOptions.truncateText` from getting overridden by `truncateText` in `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283))
+
+**Theme: Amsterdam**
+
+- Fixed `mobileOptions.enlarge` styling in `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283))
 
 ## [`40.0.0`](https://github.com/elastic/eui/tree/v40.0.0)
 
 - Updated `tokenKeyword` to match the definition of keyword field type ([#5251](https://github.com/elastic/eui/pull/5251))
 - Added `remark-breaks` plugin to mimic GitHub-flavored markdown line breaks within `EuiMarkdownEditor` ([#5272](https://github.com/elastic/eui/pull/5272))
 - Added `element`, `buttonElement`, and `arrowProps` props to further customize `EuiAccordion` ([#5258](https://github.com/elastic/eui/pull/5258))
+
+**Bug fixes**
+
 - Fixed missing `id` for `EuiCombobox` by generating one if `prepend` or `append` exists ([#5229](https://github.com/elastic/eui/pull/5229))
 
 **Bug fixes**

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -74,18 +74,6 @@ export class GuidePageChrome extends Component {
     }, 250);
   };
 
-  onButtonClick() {
-    this.setState({
-      isPopoverOpen: !this.state.isPopoverOpen,
-    });
-  }
-
-  closePopover() {
-    this.setState({
-      isPopoverOpen: false,
-    });
-  }
-
   renderSubSections = (href, subSections = [], searchTerm = '') => {
     const subSectionsWithTitles = subSections.filter((item) => {
       if (!item.title) {

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -225,6 +225,7 @@ import { SuperSelectExample } from './views/super_select/super_select_example';
 import { ThemeExample } from './views/theme/theme_example';
 import ThemeValues from './views/theme/values';
 import Breakpoints from './views/theme/breakpoints/breakpoints';
+import Borders, { bordersSections } from './views/theme/borders/borders';
 
 /** Elastic Charts */
 
@@ -350,6 +351,11 @@ const navigation = [
         name: 'Breakpoints',
         component: Breakpoints,
       },
+      {
+        name: 'Borders',
+        component: Borders,
+        sections: bordersSections,
+      },
       createExample(SassGuidelines, 'Sass'),
     ],
   },

diff --git a/src-docs/src/views/guidelines/_index.scss b/src-docs/src/views/guidelines/_index.scss
@@ -193,20 +193,22 @@
   padding: $euiSize;
 }
 
-.guideSass__border--radius {
+.guideSass__border--euiBorderRadius {
   border: $euiBorderThin;
   border-radius: $euiBorderRadius;
 }
 
-.guideSass__border--radiusSmall {
+.guideSass__border--euiBorderRadiusSmall {
   border: $euiBorderThin;
   border-radius: $euiBorderRadiusSmall;
 }
 
+.guideSass__border--euiBorderWidthThin,
 .guideSass__border--euiBorderThin {
   border: $euiBorderThin;
 }
 
+.guideSass__border--euiBorderWidthThick,
 .guideSass__border--euiBorderThick {
   border: $euiBorderThick;
 }
@@ -215,6 +217,10 @@
   border: $euiBorderEditable;
 }
 
+.guideSass__border--thickDashed {
+  border: $euiBorderWidthThick dashed $euiBorderColor;
+}
+
 .guideSass__fontFamily {
   font-size: $euiSizeL;
   background: $euiColorDarkestShade;

diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
@@ -5,7 +5,6 @@ import { ThemeContext } from '../../components';
 import { Typography } from './sass/typography';
 import { Animation } from './sass/animation';
 import { Shadow } from './sass/shadow';
-import { Border } from './sass/border';
 import { Color } from './sass/color';
 import { Core } from './sass/core';
 
@@ -192,11 +191,6 @@ export const SassGuidelines = {
       wrapText: false,
       text: <Typography />,
     },
-    {
-      title: 'Borders',
-      wrapText: false,
-      text: <Border />,
-    },
     {
       title: 'Shadow and Depth',
       wrapText: false,

diff --git a/src-docs/src/views/guidelines/sass/border.tsx b/src-docs/src/views/guidelines/sass/border.tsx
diff --git a/src-docs/src/views/tables/auto/auto.js b/src-docs/src/views/tables/auto/auto.js
@@ -55,48 +55,7 @@ const columns = [
       header: false,
       truncateText: false,
       enlarge: true,
-      fullWidth: true,
-    },
-  },
-  {
-    field: 'lastName',
-    name: 'Last Name',
-    render: (name) => (
-      <EuiLink href="#" target="_blank">
-        {name}
-      </EuiLink>
-    ),
-    mobileOptions: {
-      show: false,
-    },
-  },
-  {
-    field: 'github',
-    name: 'Github',
-  },
-];
-
-const customColumns = [
-  {
-    field: 'firstName',
-    name: 'First Name',
-    sortable: true,
-    truncateText: true,
-    'data-test-subj': 'firstNameCell',
-    width: '20%',
-    mobileOptions: {
-      render: (item) => (
-        <span>
-          {item.firstName}{' '}
-          <EuiLink href="#" target="_blank">
-            {item.lastName}
-          </EuiLink>
-        </span>
-      ),
-      header: false,
-      truncateText: false,
-      enlarge: true,
-      fullWidth: true,
+      width: '100%',
     },
   },
   {
@@ -119,25 +78,6 @@ const customColumns = [
 
 const items = store.users.filter((user, index) => index < 10);
 
-const getRowProps = (item) => {
-  const { id } = item;
-  return {
-    'data-test-subj': `row-${id}`,
-    className: 'customRowClass',
-    onClick: () => {},
-  };
-};
-
-const getCellProps = (item, column) => {
-  const { id } = item;
-  const { field } = column;
-  return {
-    className: 'customCellClass',
-    'data-test-subj': `cell-${id}-${field}`,
-    textOnly: true,
-  };
-};
-
 const idPrefix = htmlIdGenerator()();
 
 const toggleButtons = [
@@ -158,13 +98,44 @@ const toggleButtons = [
   },
 ];
 
+const vAlignButtons = [
+  {
+    id: `${idPrefix}4`,
+    label: 'Top',
+    value: 'top',
+  },
+  {
+    id: `${idPrefix}3`,
+    label: 'Middle',
+    value: 'middle',
+  },
+  {
+    id: `${idPrefix}5`,
+    label: 'Bottom',
+    value: 'bottom',
+  },
+];
+
 export const Table = () => {
   const [layout, setLayout] = useState('fixed');
   const [toggleIdSelected, setToggleIdSelected] = useState(`${idPrefix}0`);
+  const [vAlignButtonsIdSelected, setVAlignButtonsIdSelected] = useState(
+    `${idPrefix}3`
+  );
 
   const onChange = (optionId) => {
+    const alignment = toggleButtons.find((x) => x.id === optionId).value;
+    columns[0].width = alignment === 'custom' ? '20%' : undefined;
+
     setToggleIdSelected(optionId);
-    setLayout(toggleButtons.find((x) => x.id === optionId).value);
+    setLayout(alignment);
+  };
+
+  const onVAlignChange = (optionId) => {
+    setVAlignButtonsIdSelected(optionId);
+    const alignment = vAlignButtons.find((x) => x.id === optionId).value;
+
+    columns.forEach((column) => (column.valign = alignment));
   };
 
   let callOutText;
@@ -186,11 +157,19 @@ export const Table = () => {
   return (
     <div>
       <EuiButtonGroup
-        legend="Table layout group"
+        legend="Table layout options"
         options={toggleButtons}
         idSelected={toggleIdSelected}
         onChange={onChange}
       />
+      &emsp;
+      <EuiButtonGroup
+        legend="Vertical align options"
+        options={vAlignButtons}
+        idSelected={vAlignButtonsIdSelected}
+        onChange={onVAlignChange}
+      />
+      &emsp;
       <EuiSpacer size="m" />
       <EuiCallOut
         size="s"
@@ -201,10 +180,8 @@ export const Table = () => {
       <EuiBasicTable
         tableCaption="Demo of EuiBasicTable's table layout options"
         items={items}
-        columns={layout === 'custom' ? customColumns : columns}
+        columns={columns}
         tableLayout={layout === 'auto' ? 'auto' : 'fixed'}
-        rowProps={getRowProps}
-        cellProps={getCellProps}
       />
     </div>
   );

diff --git a/src-docs/src/views/tables/auto/auto_section.js b/src-docs/src/views/tables/auto/auto_section.js
@@ -21,7 +21,12 @@ const layoutSnippet = [
       { field: 'column1', name: 'Column 1', truncateText: true, width: '20%' },
       { field: 'column2', name: 'Column 2' }
     ]}
-    tableLayout="fixed"
+/>`,
+  `<EuiBasicTable
+    columns={[
+      { field: 'column1', name: 'Column 1', valign: 'top' },
+      { field: 'column2', name: 'Column 2' }
+    ]}
 />`,
 ];
 
@@ -38,7 +43,7 @@ export const section = {
     },
   ],
   text: (
-    <div>
+    <>
       <p>
         <strong>EuiBasicTable</strong> has a fixed layout by default. You can
         change it to <EuiCode>auto</EuiCode> using the{' '}
@@ -49,7 +54,12 @@ export const section = {
         <EuiCode>truncateText</EuiCode>, set the width of each column using the{' '}
         <EuiCode>width</EuiCode> prop.
       </p>
-    </div>
+      <p>
+        You can also set the vertical alignment (<EuiCode>valign</EuiCode>) at
+        the column level which will affect the cell contents for that entire
+        column excluding the header and footer.
+      </p>
+    </>
   ),
   snippet: layoutSnippet,
   demo: <Table />,