@instructure/ui-table 8.19.1-snapshot.1 → 8.19.1-snapshot.25

package/es/Table/ColHeader/index.js

@@ -27,7 +27,7 @@ var _dec, _class, _class2, _temp, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
 /** @jsx jsx */
 import React, { Component } from 'react';
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
-import { IconMiniArrowUpLine, IconMiniArrowDownLine } from '@instructure/ui-icons';
+import { IconMiniArrowUpLine, IconMiniArrowDownLine, IconMiniArrowDoubleLine } from '@instructure/ui-icons';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -80,10 +80,9 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     }
 
     if (onRequestSort) {
-      // Reserve a space for arrow to keep column width consistent
-      return jsx(IconMiniArrowUpLine, {
-        style: {
-          color: 'transparent'
+      return jsx(IconMiniArrowDoubleLine, {
+        css: {
+          opacity: '30%'
         }
       });
     }
@@ -109,7 +108,9 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     }), onRequestSort && jsx("button", {
       onClick: this.handleClick,
       css: styles === null || styles === void 0 ? void 0 : styles.button
-    }, jsx("div", null, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
+    }, jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.buttonContent
+    }, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
   }
 
 }, _class2.displayName = "ColHeader", _class2.componentId = 'Table.ColHeader', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {

package/es/Table/ColHeader/styles.js

@@ -82,6 +82,11 @@ const generateStyle = (componentTheme, props) => {
         outline: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`
       },
       ...buttonTextAlignVariants[textAlign]
+    },
+    buttonContent: {
+      label: 'colHeader__buttonContent',
+      display: 'flex',
+      alignItems: 'center'
     }
   };
 };

package/lib/Table/ColHeader/index.js

@@ -19,6 +19,8 @@ var _IconMiniArrowUpLine2 = require("@instructure/ui-icons/lib/IconMiniArrowUpLi
 
 var _IconMiniArrowDownLine = require("@instructure/ui-icons/lib/IconMiniArrowDownLine.js");
 
+var _IconMiniArrowDoubleLine = require("@instructure/ui-icons/lib/IconMiniArrowDoubleLine.js");
+
 var _emotion = require("@instructure/emotion");
 
 var _styles = _interopRequireDefault(require("./styles"));
@@ -76,10 +78,9 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
     }
 
     if (onRequestSort) {
-      // Reserve a space for arrow to keep column width consistent
-      return (0, _emotion.jsx)(_IconMiniArrowUpLine2.IconMiniArrowUpLine, {
-        style: {
-          color: 'transparent'
+      return (0, _emotion.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
+        css: {
+          opacity: '30%'
         }
       });
     }
@@ -105,7 +106,9 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
     }), onRequestSort && (0, _emotion.jsx)("button", {
       onClick: this.handleClick,
       css: styles === null || styles === void 0 ? void 0 : styles.button
-    }, (0, _emotion.jsx)("div", null, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
+    }, (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.buttonContent
+    }, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
   }
 
 }, _class2.displayName = "ColHeader", _class2.componentId = 'Table.ColHeader', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {

package/lib/Table/ColHeader/styles.js

@@ -89,6 +89,11 @@ const generateStyle = (componentTheme, props) => {
         outline: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`
       },
       ...buttonTextAlignVariants[textAlign]
+    },
+    buttonContent: {
+      label: 'colHeader__buttonContent',
+      display: 'flex',
+      alignItems: 'center'
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "8.19.1-snapshot.1+243eb1698",
+  "version": "8.19.1-snapshot.25+7eb3f6423",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,24 +23,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-color-utils": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-test-utils": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-themes": "8.19.1-snapshot.1+243eb1698"
+    "@instructure/ui-babel-preset": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-color-utils": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-test-utils": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-themes": "8.19.1-snapshot.25+7eb3f6423"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/emotion": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/shared-types": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-a11y-content": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-icons": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-prop-types": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-react-utils": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-simple-select": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-testable": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-utils": "8.19.1-snapshot.1+243eb1698",
-    "@instructure/ui-view": "8.19.1-snapshot.1+243eb1698",
+    "@instructure/console": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/emotion": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/shared-types": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-a11y-content": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-icons": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-prop-types": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-react-utils": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-simple-select": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-testable": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-utils": "8.19.1-snapshot.25+7eb3f6423",
+    "@instructure/ui-view": "8.19.1-snapshot.25+7eb3f6423",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "243eb169866e654e9aaaaaba4a96a6778c06ccdf"
+  "gitHead": "7eb3f6423c86f496d9b66596fb8a3d2e43af4c99"
 }

package/src/Table/ColHeader/index.tsx

@@ -28,7 +28,8 @@ import React, { Component } from 'react'
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import {
   IconMiniArrowUpLine,
-  IconMiniArrowDownLine
+  IconMiniArrowDownLine,
+  IconMiniArrowDoubleLine
 } from '@instructure/ui-icons'
 
 import { withStyle, jsx } from '@instructure/emotion'
@@ -83,8 +84,7 @@ class ColHeader extends Component<TableColHeaderProps> {
       return <IconMiniArrowDownLine />
     }
     if (onRequestSort) {
-      // Reserve a space for arrow to keep column width consistent
-      return <IconMiniArrowUpLine style={{ color: 'transparent' }} />
+      return <IconMiniArrowDoubleLine css={{ opacity: '30%' }} />
     }
     return null
   }
@@ -105,7 +105,7 @@ class ColHeader extends Component<TableColHeaderProps> {
       >
         {onRequestSort && (
           <button onClick={this.handleClick} css={styles?.button}>
-            <div>
+            <div css={styles?.buttonContent}>
               {callRenderProp(children)}
               {this.renderSortArrow()}
             </div>

package/src/Table/ColHeader/props.ts

@@ -80,7 +80,9 @@ type TableColHeaderProps = TableColHeaderOwnProps &
     ThHTMLAttributes<TableColHeaderOwnProps>
   >
 
-type TableColHeaderStyle = ComponentStyle<'colHeader' | 'button'>
+type TableColHeaderStyle = ComponentStyle<
+  'colHeader' | 'button' | 'buttonContent'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   id: PropTypes.string.isRequired,

package/src/Table/ColHeader/styles.ts

@@ -82,6 +82,11 @@ const generateStyle = (
         outline: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`
       },
       ...buttonTextAlignVariants[textAlign!]
+    },
+    buttonContent: {
+      label: 'colHeader__buttonContent',
+      display: 'flex',
+      alignItems: 'center'
     }
   }
 }

package/src/Table/README.md

@@ -254,9 +254,15 @@ class SortableTable extends React.Component {
     super(props)
     const { headers } = props
 
+    const initialColWidth = {}
+    headers.forEach((header) => {
+      initialColWidth[header.id] = 'start'
+    })
+
     this.state = {
       sortBy: headers && headers[0] && headers[0].id,
       ascending: true,
+      colTextAligns: initialColWidth
     }
   }
 
@@ -275,9 +281,128 @@ class SortableTable extends React.Component {
     }
   }
 
+  handleColTextAlignChange(id, value) {
+    this.setState(state => ({
+      colTextAligns: {
+        ...state.colTextAligns,
+        [id]: value
+      }
+    }))
+  }
+
+  renderHeaderRow(direction) {
+    const { headers } = this.props
+    const { colTextAligns , sortBy } = this.state
+
+    return (
+      <Table.Row>
+        {(headers || []).map(({ id, text, width }) => (
+          <Table.ColHeader
+            key={id}
+            id={id}
+            width={width}
+            {...(direction && {
+              textAlign: colTextAligns[id],
+              stackedSortByLabel: text,
+              onRequestSort: this.handleSort,
+              sortDirection: id === sortBy ? direction : 'none'
+            })}
+          >
+            {text}
+          </Table.ColHeader>
+        ))}
+      </Table.Row>
+    )
+  }
+
+  renderOptions () {
+    const { headers } = this.props
+    const { colTextAligns } = this.state
+
+    return (
+      <ToggleGroup
+        size="small"
+        toggleLabel="Set text-align for columns"
+        summary="Set text-align for columns"
+        background="default"
+      >
+        <Table caption='Set text-align for columns'>
+          <Table.Head>
+            {this.renderHeaderRow()}
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              {Object.entries(colTextAligns).map(([headerId, textAlign]) => {
+                return (
+                  <Table.Cell
+                    key={headerId}
+                    width={headers.find(header => header.id === headerId).width}
+                  >
+                    <RadioInputGroup
+                      description={
+                        <ScreenReaderContent>
+                          Set text-align for column: {headerId}
+                        </ScreenReaderContent>
+                      }
+                      name={`columnTextAlign_${headerId}`}
+                      value={textAlign}
+                      margin="0 0 small"
+                      size="small"
+                      onChange={
+                        (e, value) => this.handleColTextAlignChange(headerId, value)
+                      }
+                    >
+                      <RadioInput label="start" value="start" />
+                      <RadioInput label="center" value="center" />
+                      <RadioInput label="end" value="end" />
+                    </RadioInputGroup>
+                  </Table.Cell>
+                )
+              })}
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ToggleGroup>
+    )
+
+    return (
+      <FormField id="columnTextAlign" label="Set column text-align">
+        <Flex margin="0 0 medium">
+          {Object.entries(colTextAligns).map(([headerId, textAlign]) => {
+            return (
+              <Flex.Item
+                key={headerId}
+                width={headers.find(header => header.id === headerId).width}
+              >
+                <RadioInputGroup
+                  description={
+                    <ScreenReaderContent>
+                      Column {headerId}textAlign
+                    </ScreenReaderContent>
+                  }
+                  name={`Column "${headerId}" textAlign`}
+                  value={textAlign}
+                  margin="0 0 small"
+                  size="small"
+                  onChange={
+                    (e, value) => this.handleColTextAlignChange(headerId, value)
+                  }
+                >
+                  <RadioInput label="start" value="start" />
+                  <RadioInput label="center" value="center" />
+                  <RadioInput label="end" value="end" />
+                </RadioInputGroup>
+              </Flex.Item>
+            )
+          })}
+        </Flex>
+      </FormField>
+    )
+  }
+
   render() {
     const { caption, headers, rows } = this.props
-    const { sortBy, ascending } = this.state
+    const { sortBy, ascending, colTextAligns } = this.state
     const direction = ascending ? 'ascending' : 'descending'
     const sortedRows = [...(rows || [])].sort((a, b) => {
       if (a[sortBy] < b[sortBy]) {
@@ -305,30 +430,24 @@ class SortableTable extends React.Component {
       >
         {(props) => (
           <div>
+            {props.layout !== 'stacked' && (
+              <View display="block" margin="0 0 medium">
+                {this.renderOptions()}
+              </View>
+            )}
+
             <Table
               caption={`${caption}: sorted by ${sortBy} in ${direction} order`}
               {...props}
             >
               <Table.Head renderSortLabel="Sort by">
-                <Table.Row>
-                  {(headers || []).map(({ id, text }) => (
-                    <Table.ColHeader
-                      key={id}
-                      id={id}
-                      stackedSortByLabel={text}
-                      onRequestSort={this.handleSort}
-                      sortDirection={id === sortBy ? direction : 'none'}
-                    >
-                      {text}
-                    </Table.ColHeader>
-                   ))}
-                </Table.Row>
+                {this.renderHeaderRow(direction)}
               </Table.Head>
               <Table.Body>
                 {sortedRows.map((row) => (
                   <Table.Row key={row.id}>
                     {headers.map(({ id, renderCell }) => (
-                      <Table.Cell key={id}>
+                      <Table.Cell key={id} textAlign={colTextAligns[id]}>
                         {renderCell ? renderCell(row[id]) : row[id]}
                       </Table.Cell>
                     ))}
@@ -357,18 +476,22 @@ render(
       {
         id: 'rank',
         text: 'Rank',
+        width: '15%',
       },
       {
         id: 'title',
         text: 'Title',
+        width: '55%',
       },
       {
         id: 'year',
         text: 'Year',
+        width: '15%',
       },
       {
         id: 'rating',
         text: 'Rating',
+        width: '15%',
         renderCell: (rating) => rating.toFixed(1),
       },
     ]}