Merge branch 'master' into 527-sass-linting

src/components/List/ListItem/ListItem.jsx

@@ -43,7 +43,7 @@ const ListItemWrapperProps = {
   isSelectable: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
   selected: PropTypes.bool.isRequired,
-  children: React.Children.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 const ListItemPropTypes = {

src/components/PageWizard/PageWizardStep/PageWizardStep.jsx

@@ -24,7 +24,7 @@ const PageWizardStepPropTypes = {
   /** Optional sticky footer */
   hasStickyFooter: PropTypes.bool,
   /** Callback function to close the wizard */
-  onClose: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
   /** Determines if Cancel or Previous button is rendered */
   hasPrev: PropTypes.bool,
   /** Determines if Next or Submit button is rendered */
@@ -38,7 +38,7 @@ const PageWizardStepPropTypes = {
   /** Renders a loading icon in the Next button */
   sendingData: PropTypes.bool,
   /** Callback function when Submit button is clicked */
-  onSubmit: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func,
   /** Content to render before footer buttons (on left side, in LTR) */
   beforeFooterContent: PropTypes.node,
 };
@@ -63,6 +63,8 @@ const PageWizardStepDefaultProps = {
   onNext: null,
   onBack: null,
   beforeFooterContent: null,
+  onSubmit: null,
+  onClose: null,
 };
 
 const PageWizardStep = ({

src/components/PageWizard/StatefulPageWizard.jsx

@@ -28,7 +28,7 @@ const StatefulPageWizardPropTypes = {
     close: PropTypes.string,
   }),
   /** function to go to step when click ProgressIndicator step. */
-  setStep: PropTypes.func.isRequired,
+  setStep: PropTypes.func,
   /** next button disabled */
   nextDisabled: PropTypes.bool,
   /** show progress indicator on finish button */
@@ -63,6 +63,7 @@ const defaultProps = {
   onNext: null,
   onBack: null,
   beforeFooterContent: null,
+  setStep: null,
 };
 
 const StatefulPageWizard = ({

src/components/Table/Table.story.jsx

@@ -1533,13 +1533,14 @@ storiesOf('Watson IoT/Table', module)
   .add('with zebra striping', () => (
     <Table useZebraStyles columns={tableColumns} data={tableData} actions={actions} />
   ))
-  .add('with resize and initial column widths on Simple Stateful and row selection', () => (
+  .add('with resize and initial column widths on Simple Stateful with row selection & sort', () => (
     <StatefulTable
       {...initialState}
       actions={actions}
       lightweight={boolean('lightweight', false)}
       columns={tableColumns.map((i, idx) => ({
         width: idx % 2 === 0 ? '100px' : '200px',
+        isSortable: true,
         ...i,
       }))}
       options={{

src/components/Table/Table.test.jsx

@@ -402,26 +402,17 @@ describe('Table', () => {
     expect(wrapper.find('.bx--search-input').prop('value')).toEqual('');
     expect(wrapper.find('.bx--search-input').html()).toContain(`aria-hidden="true"`);
 
-    const wrapper2 = mount(
-      <Table
-        columns={tableColumns}
-        data={tableData}
-        actions={mockActions}
-        options={{
-          hasSearch: true,
-        }}
-        view={{
-          toolbar: {
-            search: {
-              defaultValue: 'ferrari',
-            },
-          },
-        }}
-      />
-    );
+    wrapper.setProps({ view: { toolbar: { search: { defaultValue: 'ferrari' } } } });
+    wrapper.update();
+
+    expect(wrapper.find('.bx--search-input').prop('value')).toEqual('ferrari');
+    expect(wrapper.find('.bx--search-input').html()).toContain(`aria-hidden="false"`);
+
+    wrapper.setProps({ view: { toolbar: { search: { defaultValue: '' } } } });
+    wrapper.update();
 
-    expect(wrapper2.find('.bx--search-input').prop('value')).toEqual('ferrari');
-    expect(wrapper2.find('.bx--search-input').html()).toContain(`aria-hidden="false"`);
+    expect(wrapper.find('.bx--search-input').prop('value')).toEqual('');
+    expect(wrapper.find('.bx--search-input').html()).toContain(`aria-hidden="true"`);
   });
 
   it('cells should always wrap by default', () => {

src/components/Table/TableHead/TableHead.jsx

@@ -118,12 +118,12 @@ const defaultProps = {
 const StyledCustomTableHeader = styled(TableHeader)`
   &&& {
     ${props => {
-      const { width } = props;
-      return width !== undefined
+      const { initialWidth } = props;
+      return initialWidth !== undefined
         ? `
        .bx--table-header-label {
-          min-width: ${width};
-          max-width: ${width};
+          min-width: ${initialWidth};
+          max-width: ${initialWidth};
           white-space: nowrap;
           overflow-x: hidden;
           overflow-y: hidden;
@@ -246,7 +246,9 @@ const TableHead = ({
     () => {
       // An initial measuring is needed since there might not be an initial value from the columns prop
       // which means that the layout engine will have to set the widths dynamically
-      // before we know what they are.
+      // before we know what they are. More importantly, the sum of the inital widths may not match
+      // the available width of the table, e.g. if the user has resized the browser since the
+      // column widths was last saved.
       if (hasResize && columns.length && isEmpty(currentColumnWidths)) {
         const measuredWidths = measureColumnWidths();
         const adjustedWidths = adjustLastColumnWidth(ordering, columns, measuredWidths);
@@ -319,7 +321,7 @@ const TableHead = ({
             matchingColumnMeta && matchingColumnMeta.align ? matchingColumnMeta.align : 'start';
           return !item.isHidden && matchingColumnMeta ? (
             <StyledCustomTableHeader
-              width={initialColumnWidths[matchingColumnMeta.id]}
+              initialWidth={initialColumnWidths[matchingColumnMeta.id]}
               id={`column-${matchingColumnMeta.id}`}
               key={`column-${matchingColumnMeta.id}`}
               data-column={matchingColumnMeta.id}

src/components/Table/TableHead/TableHead.test.jsx

@@ -162,17 +162,28 @@ describe('TableHead', () => {
   it('fixed column widths for non-resizable columns', () => {
     const myProps = {
       ...commonTableHeadProps,
-      columns: [{ id: 'col1', name: 'Column 1', width: '101' }],
+      columns: [{ id: 'col1', name: 'Column 1', width: '101px', isSortable: false }],
       tableState: {
         ...commonTableHeadProps.tableState,
         ordering: [{ columnId: 'col1', isHidden: false }],
       },
       options: { hasResize: false },
     };
 
-    const wrapper = mount(<TableHead {...myProps} />);
-    const tableHeader = wrapper.find(TableHeader).first();
-    expect(tableHeader.prop('width')).toBe('101');
+    let wrapper = mount(<TableHead {...myProps} />);
+    const nonSortableTableHead = wrapper
+      .find(TableHeader)
+      .first()
+      .find('th');
+    expect(nonSortableTableHead.prop('width')).toBe('101px');
+
+    myProps.columns[0].isSortable = true;
+    wrapper = mount(<TableHead {...myProps} />);
+    const sortableTableHead = wrapper
+      .find(TableHeader)
+      .first()
+      .find('th');
+    expect(sortableTableHead.prop('width')).toBe('101px');
   });
 
   describe('Column resizing active', () => {

src/components/Table/TableHead/TableHeader.js

@@ -62,14 +62,22 @@ const TableHeader = React.forwardRef(function TableHeader(
     sortDirection,
     translateWithId: t,
     thStyle,
+    initialWidth,
     ...rest
   },
   ref
 ) {
   if (!isSortable) {
     return (
       // eslint-disable-next-line react/jsx-filename-extension
-      <th {...rest} className={headerClassName} scope={scope} ref={ref} style={thStyle}>
+      <th
+        {...rest}
+        width={initialWidth}
+        className={headerClassName}
+        scope={scope}
+        ref={ref}
+        style={thStyle}
+      >
         <span className={`${prefix}--table-header-label`}>{children}</span>
       </th>
     );
@@ -83,7 +91,14 @@ const TableHeader = React.forwardRef(function TableHeader(
   const ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
 
   return (
-    <th scope={scope} className={headerClassName} aria-sort={ariaSort} ref={ref} style={thStyle}>
+    <th
+      width={initialWidth}
+      scope={scope}
+      className={headerClassName}
+      aria-sort={ariaSort}
+      ref={ref}
+      style={thStyle}
+    >
       <button className={className} onClick={onClick} {...rest}>
         <span className={`${prefix}--table-header-label`}>{children}</span>
         <Arrow
@@ -120,6 +135,12 @@ TableHeader.propTypes = {
    */
   children: PropTypes.node,
 
+  /**
+   * The initial width of the column when resize is active and the fixed with
+   * if resize is inactive. E.g. '200px'
+   */
+  initialWidth: PropTypes.string,
+
   /**
    * Specify whether this header is one through which a user can sort the table
    */
@@ -170,6 +191,7 @@ TableHeader.defaultProps = {
   scope: 'col',
   translateWithId,
   thStyle: {},
+  initialWidth: undefined,
 };
 
 TableHeader.translationKeys = Object.values(translationKeys);

src/components/Table/TableToolbar/TableToolbar.jsx

@@ -187,6 +187,7 @@ const TableToolbar = ({
         {hasSearch ? (
           <TableToolbarSearch
             {...search}
+            key={search.defaultValue || search.value || 'table-toolbar-search'}
             defaultValue={search.defaultValue || search.value}
             className="table-toolbar-search"
             translateWithId={(...args) => tableTranslateWithId(i18n, ...args)}