feat(StructuredList): Accessibility refactor

packages/components/src/components/structured-list/_structured-list.scss

@@ -17,9 +17,14 @@
   .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-th {
     @include padding--data-structured-list;
   }
-
-  .#{$prefix}--structured-list-input {
-    display: none;
+  @if feature-flag-enabled('enable-2021-release') {
+    .#{$prefix}--structured-list-row--focused-within {
+      @include focus-outline('outline');
+    }
+  } @else {
+    .#{$prefix}--structured-list-input {
+      display: none;
+    }
   }
 
   .#{$prefix}--structured-list {
@@ -62,10 +67,11 @@
     cursor: inherit;
   }
 
-  .#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
-    @include focus-outline('outline');
+  @if not feature-flag-enabled('enable-2021-release') {
+    .#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
+      @include focus-outline('outline');
+    }
   }
-
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td,
@@ -77,7 +83,11 @@
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td {
-    border-top: 1px solid $ui-01;
+    @if feature-flag-enable('enabled-2021-release') {
+      border-top: 1px solid $ui-03;
+    } @else {
+      border-top: 1px solid $ui-01;
+    }
   }
 
   .#{$prefix}--structured-list-thead {
@@ -113,6 +123,10 @@
     display: table-cell;
     max-width: 36rem;
     color: $text-02;
+    @if feature-flag-enabled('enable-2021-release') {
+      border-top: 1px solid $ui-03;
+    }
+
     transition: color $duration--fast-02 motion(standard, productive);
   }
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -5056,145 +5056,12 @@ Map {
       },
     },
   },
-  "StructuredListWrapper" => Object {
-    "defaultProps": Object {
-      "ariaLabel": "Structured list section",
-      "selection": false,
-    },
-    "propTypes": Object {
-      "ariaLabel": Object {
-        "type": "string",
-      },
-      "border": [Function],
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "selection": Object {
-        "type": "bool",
-      },
-    },
-  },
-  "StructuredListHead" => Object {
-    "propTypes": Object {
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-    },
-  },
-  "StructuredListBody" => Object {
-    "defaultProps": Object {
-      "onKeyDown": [Function],
-    },
-    "propTypes": Object {
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "head": Object {
-        "type": "bool",
-      },
-      "onKeyDown": Object {
-        "type": "func",
-      },
-    },
-  },
-  "StructuredListRow" => Object {
-    "defaultProps": Object {
-      "head": false,
-      "label": false,
-      "onKeyDown": [Function],
-      "tabIndex": 0,
-    },
-    "propTypes": Object {
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "head": Object {
-        "type": "bool",
-      },
-      "label": Object {
-        "type": "bool",
-      },
-      "onKeyDown": Object {
-        "type": "func",
-      },
-      "tabIndex": Object {
-        "type": "number",
-      },
-    },
-  },
-  "StructuredListInput" => Object {
-    "defaultProps": Object {
-      "onChange": [Function],
-      "title": "title",
-      "value": "value",
-    },
-    "propTypes": Object {
-      "className": Object {
-        "type": "string",
-      },
-      "defaultChecked": Object {
-        "type": "bool",
-      },
-      "id": Object {
-        "type": "string",
-      },
-      "name": Object {
-        "type": "string",
-      },
-      "onChange": Object {
-        "type": "func",
-      },
-      "title": Object {
-        "type": "string",
-      },
-      "value": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "string",
-            },
-            Object {
-              "type": "number",
-            },
-          ],
-        ],
-        "isRequired": true,
-        "type": "oneOfType",
-      },
-    },
-  },
-  "StructuredListCell" => Object {
-    "defaultProps": Object {
-      "head": false,
-      "noWrap": false,
-    },
-    "propTypes": Object {
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "head": Object {
-        "type": "bool",
-      },
-      "noWrap": Object {
-        "type": "bool",
-      },
-    },
-  },
+  "StructuredListWrapper" => Object {},
+  "StructuredListHead" => Object {},
+  "StructuredListBody" => Object {},
+  "StructuredListRow" => Object {},
+  "StructuredListInput" => Object {},
+  "StructuredListCell" => Object {},
   "Tab" => Object {
     "defaultProps": Object {
       "label": "provide a label",

packages/react/src/components/StructuredList/StructuredList-test.js

@@ -13,7 +13,7 @@ import {
   StructuredListBody,
   StructuredListRow,
   StructuredListCell,
-} from '../StructuredList';
+} from './StructuredList';
 import { mount, shallow } from 'enzyme';
 import { settings } from 'carbon-components';
 

packages/react/src/components/StructuredList/StructuredList.js

@@ -300,12 +300,3 @@ StructuredListCell.defaultProps = {
   head: false,
   noWrap: false,
 };
-
-export default {
-  StructuredListWrapper,
-  StructuredListHead,
-  StructuredListBody,
-  StructuredListRow,
-  StructuredListInput,
-  StructuredListCell,
-};

packages/react/src/components/StructuredList/index.js

@@ -4,6 +4,70 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
+import {
+  StructuredListWrapper as StructuredListWrapperNext,
+  StructuredListHead as StructuredListHeadNext,
+  StructuredListInput as StructuredListInputNext,
+  StructuredListBody as StructuredListBodyNext,
+  StructuredListRow as StructuredListRowNext,
+  StructuredListCell as StructuredListCellNext,
+} from './next/StructuredList';
+import {
+  StructuredListWrapper as StructuredListWrapperClassic,
+  StructuredListHead as StructuredListHeadClassic,
+  StructuredListInput as StructuredListInputClassic,
+  StructuredListBody as StructuredListBodyClassic,
+  StructuredListRow as StructuredListRowClassic,
+  StructuredListCell as StructuredListCellClassic,
+} from './StructuredList';
+import { useFeatureFlag } from '../FeatureFlags';
+
+export function StructuredListWrapper(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListWrapperNext {...props} />;
+  }
+  return <StructuredListWrapperClassic {...props} />;
+}
+
+export function StructuredListHead(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListHeadNext {...props} />;
+  }
+  return <StructuredListHeadClassic {...props} />;
+}
+export function StructuredListInput(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListInputNext {...props} />;
+  }
+  return <StructuredListInputClassic {...props} />;
+}
+
+export function StructuredListBody(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListBodyNext {...props} />;
+  }
+  return <StructuredListBodyClassic {...props} />;
+}
+
+export function StructuredListRow(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListRowNext {...props} />;
+  }
+  return <StructuredListRowClassic {...props} />;
+}
+
+export function StructuredListCell(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListCellNext {...props} />;
+  }
+  return <StructuredListCellClassic {...props} />;
+}
 
 export * from './StructuredList.Skeleton';
-export * from './StructuredList';