fix(AlertCallContainer): change alertList to children prop

BREAKING CHANGE: alertList prop has been changed to children
momentum-design · Jun 25, 2019 · a8efeb4 · a8efeb4
1 parent 7296c05
commit a8efeb4
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 27 deletions.
diff --git a/react/src/lib/AlertCall/examples/Default.js b/react/src/lib/AlertCall/examples/Default.js
@@ -63,9 +63,9 @@ export default class AlertCallDefault extends React.PureComponent {
             color='primary'
           />
         </div>
-        <AlertCallContainer
-          alertList={this.state.alertList}
-        />
+        <AlertCallContainer>
+          {this.state.alertList}
+        </AlertCallContainer>
       </div>
     );
   }

diff --git a/react/src/lib/AlertCall/examples/Device.js b/react/src/lib/AlertCall/examples/Device.js
@@ -64,9 +64,9 @@ export default class AlertCallDevice extends React.PureComponent {
             color='primary'
           />
         </div>
-        <AlertCallContainer
-          alertList={this.state.alertList}
-        />
+        <AlertCallContainer>
+          {this.state.alertList}
+        </AlertCallContainer>
       </div>
     );
   }

diff --git a/react/src/lib/AlertCall/examples/DeviceList.js b/react/src/lib/AlertCall/examples/DeviceList.js
@@ -65,9 +65,9 @@ export default class AlertCallDeviceList extends React.PureComponent {
             color='primary'
           />
         </div>
-        <AlertCallContainer
-          alertList={this.state.alertList}
-        />
+        <AlertCallContainer>
+          {this.state.alertList}
+        </AlertCallContainer>
       </div>
     );
   }

diff --git a/react/src/lib/AlertCall/examples/Number.js b/react/src/lib/AlertCall/examples/Number.js
@@ -64,9 +64,9 @@ export default class AlertCallNumber extends React.PureComponent {
             color='primary'
           />
         </div>
-        <AlertCallContainer
-          alertList={this.state.alertList}
-        />
+        <AlertCallContainer>
+          {this.state.alertList}
+        </AlertCallContainer>
       </div>
     );
   }

diff --git a/react/src/lib/AlertCall/index.js b/react/src/lib/AlertCall/index.js
@@ -193,10 +193,10 @@ AlertCall.propTypes = {
   }).isRequired,
   /** @prop Optional default selected device by index value or eventKey | 0 */
   defaultSelectedDevice: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** @prop Optional header string for device selection list | "Device selection" */
-  deviceListHeader: PropTypes.string,
   /** @prop Props to be passed to device button | null */
   deviceBtnProps: PropTypes.object,
+  /** @prop Optional header string for device selection list | 'Device selection' */
+  deviceListHeader: PropTypes.string,
   /** @prop Optional list of devices to answer call with | [] */
   devices: PropTypes.array,
   /** @prop Callback function invoked when the share button is clicked | null */

diff --git a/react/src/lib/AlertCallContainer/index.js b/react/src/lib/AlertCallContainer/index.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 const AlertCallContainer = props => {
   const {
-    alertList,
+    children,
     ...otherProps
   } = props;
 
@@ -14,18 +14,18 @@ const AlertCallContainer = props => {
       className='md-alert__container md-alert__container--call'
       {...otherProps}
     >
-      {alertList}
+      {children}
     </div>
   );
 };
 
 AlertCallContainer.defaultProps = {
-  alertList: []
+  children: null
 };
 
 AlertCallContainer.propTypes = {
-  /** @prop Array of AlertCall components | [] */
-  alertList: PropTypes.arrayOf(PropTypes.node)
+  /** @prop Children Nodes to Render inside container | null */
+  children: PropTypes.node,
 };
 
 AlertCallContainer.displayName = 'AlertCallContainer';

diff --git a/react/src/lib/AlertCallContainer/tests/__snapshots__/index.spec.js.snap b/react/src/lib/AlertCallContainer/tests/__snapshots__/index.spec.js.snap
@@ -3,9 +3,7 @@
 exports[`tests for <AlertCallContainer /> should match SnapShot 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <AlertCallContainer
-    alertList={Array []}
-  />,
+  Symbol(enzyme.__unrendered__): <AlertCallContainer />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],
     "checkPropTypes": [Function],
@@ -20,11 +18,11 @@ ShallowWrapper {
     "key": undefined,
     "nodeType": "host",
     "props": Object {
-      "children": Array [],
+      "children": null,
       "className": "md-alert__container md-alert__container--call",
     },
     "ref": null,
-    "rendered": Array [],
+    "rendered": null,
     "type": "div",
   },
   Symbol(enzyme.__nodes__): Array [
@@ -33,11 +31,11 @@ ShallowWrapper {
       "key": undefined,
       "nodeType": "host",
       "props": Object {
-        "children": Array [],
+        "children": null,
         "className": "md-alert__container md-alert__container--call",
       },
       "ref": null,
-      "rendered": Array [],
+      "rendered": null,
       "type": "div",
     },
   ],

diff --git a/react/src/lib/AlertCallContainer/tests/index.spec.js b/react/src/lib/AlertCallContainer/tests/index.spec.js
@@ -70,7 +70,7 @@ describe('tests for <AlertCallContainer />', () => {
 
   it('should render no more than two call alerts at the same time', () => {
     const alertList = [renderCaller1(), renderCaller2()];
-    const container = mount(<AlertCallContainer alertList={alertList}/>);
+    const container = mount(<AlertCallContainer children={alertList}/>);
 
     expect(container.find(AlertCall).length).toEqual(2);
   });