@orangesk/orange-design-system 1.4.0 → 1.5.1

package/src/components/Forms/Select/styles/config.scss

@@ -12,6 +12,7 @@ $base: (
   appearance: none,
   -webkit-appearance: none,
   color: color.$black,
+  overflow: hidden,
 );
 
 $states: (

package/src/components/Table/Table.js

@@ -14,6 +14,14 @@ import TableStatic from './Table.static';
 const propTypes = {
   /** Caption helps users with screen readers to find a table and understand what it’s about and decide if they want to read it. */
   caption: node,
+  expandableRowsCaptions: shape({
+    /** Text for screenreader in header of column with expandable button */
+    header: string,
+    /** Text for screenreader when row is not expandable*/
+    emptyRow: string,
+  }),
+  /** Foot element for table */
+  footers: arrayOf(object),
   /** Labels for headers in the table. Value of the key in headers match with the key name in rows */
   headers: arrayOf(
     shape({
@@ -23,22 +31,14 @@ const propTypes = {
       headCellProps: object,
     })
   ).isRequired,
-  /** rows to print out in the table. */
-  rows: arrayOf(object).isRequired,
-  /** Foot element for table */
-  footers: arrayOf(object),
   /** Compact table only takes spaced needed to display its content */
   isCompact: bool,
-  /** Different colors for even and odd rows. */
-  isStriped: bool,
   /** If table has horizontal scrollbar */
   isScrollable: bool,
-  expandableRowsCaptions: shape({
-    /** Text for screenreader in header of column with expandable button */
-    header: string,
-    /** Text for screenreader when row is not expandable*/
-    emptyRow: string,
-  }),
+  /** Different colors for even and odd rows. */
+  isStriped: bool,
+  /** rows to print out in the table. */
+  rows: arrayOf(object).isRequired,
 };
 
 const defaultProps = {
@@ -119,7 +119,7 @@ const Table = ({
           <div
             className={`${CLASS_ROOT}-scrollable`}
             role="group"
-            aria-labelledby={captionId}
+            {...(caption && { 'aria-labelledby': captionId })}
           />
         }
       >
@@ -131,7 +131,11 @@ const Table = ({
           className={classes}
           {...other}
         >
-          <caption id={captionId}>{caption}</caption>
+          {caption && (
+            <caption {...(isScrollable && { id: captionId })}>
+              {caption}
+            </caption>
+          )}
           <Header />
           <Rows />
           <Footer />
@@ -143,8 +147,8 @@ const Table = ({
   return table;
 };
 
-Table.displayName = 'Table';
 Table.propTypes = propTypes;
 Table.defaultProps = defaultProps;
+Table.displayName = 'Table';
 
 export default Table;

package/src/components/Table/tests/Table.unit.test.js

@@ -227,7 +227,7 @@ describe('rendering Table', () => {
     });
     it('div wrapper with class table-scrollable has generated aria-labelledby', () => {
       const { container } = render(
-        <Table headers={[]} rows={[]} isScrollable />
+        <Table headers={[]} rows={[]} isScrollable caption="text-caption" />
       );
       const pattern = /id-caption-\d+/;
       expect(container.getElementsByClassName('table-scrollable').length).toBe(