Next into master

src/components/Banner/Banner.scss

@@ -10,18 +10,15 @@
 //@import '../../../themes/Delicious/Button.scss';
 
 
-$accent-height: 4px;
+$accent-height: 1px;
 $dismiss-size: rem(16px);
 $ribbon-flex-basis: rem(32px);
 $secondary-action-vertical-padding: 0.5 * (control-height() - line-height(body));
 $secondary-action-horizontal-padding: 1.5 * spacing(tightest);
 
 @mixin banner-colors($highlight, $background) {
   background-color: $background;
-  box-shadow:
-    inset $accent-height 0 0 0 $highlight,
-    inset shadow(transparent),
-    shadow();
+  border: 1px solid $highlight;
 
   &:focus {
     box-shadow:
@@ -36,7 +33,7 @@ $secondary-action-horizontal-padding: 1.5 * spacing(tightest);
   position: relative;
   display: flex;
   padding: spacing();
-  border-radius: 0 0 border-radius() border-radius();
+  border-radius: border-radius(larger);
   transition: box-shadow duration() easing();
 
   + .Banner {
@@ -70,7 +67,7 @@ $secondary-action-horizontal-padding: 1.5 * spacing(tightest);
 
 .ribbon {
   flex: 0 0 $ribbon-flex-basis;
-  margin-right: spacing();
+  margin-right: spacing(tightest);
 }
 
 .heading {
@@ -167,4 +164,3 @@ $secondary-action-horizontal-padding: 1.5 * spacing(tightest);
 .bannerBox {
   display: flex;
 }
-

src/components/Banner/Banner.tsx

@@ -17,6 +17,7 @@ import flagSvg from './icons/flag.svg';
 import circleAlertSvg from './icons/circle-alert.svg';
 import circleBarredSvg from './icons/circle-barred.svg';
 import confettiSvg from './icons/confetti.svg';
+import BodyText from '../BodyText';
 
 export type Status = 'success' | 'info' | 'warning' | 'critical';
 
@@ -104,9 +105,11 @@ const banner = ({
     headingMarkup = (
       <div className={theme.heading} id={headingID}>
         <Heading
-          element="h6"
+          element="h4"
           componentClass={baseTheme.bannerHading}
-          theme={theme}>
+          theme={theme}
+          headingSize="h4"
+          >
             {componentTitle}
         </Heading>
       </div>
@@ -118,9 +121,9 @@ const banner = ({
       return (
         <div key={`option_${index}`} className={baseTheme.bannerBox}>
           <Icon source = {item.icon as keyof typeof IconList} componentColor = {item.componentColor ? item.componentColor as IconColor : undefined} />
-          <p className={baseTheme.bannerContent}>
+          <BodyText element="p" componentClass={baseTheme.bannerContent}>
             {item.text}
-          </p>
+          </BodyText>
         </div>
       );
     });
@@ -157,7 +160,7 @@ const banner = ({
   const dismissButton = onDismiss
     ? (
       <div className={theme.dismiss}>
-        <Button plain icon="cancelSmall" accessibilityLabel="Dismiss notification" onClick={onDismiss} theme={theme} />
+        <Button plain icon="cancelSmall" accessibilityLabel="Dismiss notification" onClick={onDismiss} theme={theme} title="Dismiss notification"/>
       </div>
     )
     : null;

src/components/Table/RowAction.tsx

@@ -82,7 +82,7 @@ class RowAction extends React.PureComponent<Props, State> {
     return (
       validActionConfigs && validActionConfigs.length > 0 ?
       <React.Fragment>
-        <div style={{ float: 'right', position: 'relative' }}>
+        <div style={{ float: 'right' }}>
         <Button componentId={`${componentId}BtnMoreActions`} theme={theme} componentClass={theme.rowActionButton} disabled={actionInProgress} icon="horizontalDots" onClick={(e: React.FormEvent<HTMLElement>) => this.dropdownToggle(e)} title="More Actions">
         </Button>
           <Dropdown

src/components/Table/Table.tsx

@@ -319,9 +319,9 @@ class Table extends React.PureComponent<Props, State> {
         <NoData iconSource="search" label={noDataInSearchLabel}></NoData>
       );
     }
-      return (
+    return (
         <NoData iconSource="inbox" label={noDataLabel}></NoData>
-      );
+    );
 
   }
 

src/styles/foundation/border-radius.scss

@@ -3,7 +3,8 @@
 
 $border-radius-data: (
   base: 3px,
-  large: 6px
+  large: 6px,
+  larger: 8px
 );