fix: remove warn from console (#2013)

Author: romainseb

packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js

@@ -25,7 +25,7 @@ function ActionIconToggle(props) {
 				className={cn}
 				aria-label={label}
 				aria-pressed={active}
-				bsStyle=""
+				bsStyle="link"
 			>
 				<Icon name={icon} transform={iconTransform} />
 			</Button>

packages/components/src/Actions/ActionIconToggle/__snapshots__/ActionIconToggle.component.test.js.snap

@@ -11,7 +11,7 @@ exports[`ActionIconToggle should render a button 1`] = `
     aria-pressed={false}
     block={false}
     bsClass="btn"
-    bsStyle=""
+    bsStyle="link"
     className="my-icon-toggle tc-icon-toggle theme-tc-icon-toggle"
     data-feature="action.feature"
     disabled={false}
@@ -37,7 +37,7 @@ exports[`ActionIconToggle should render an active button 1`] = `
     aria-pressed={true}
     block={false}
     bsClass="btn"
-    bsStyle=""
+    bsStyle="link"
     className="my-icon-toggle tc-icon-toggle theme-tc-icon-toggle theme-active active"
     data-feature="action.feature"
     disabled={false}

packages/components/src/Drawer/Drawer.component.js

@@ -12,6 +12,7 @@ import Inject from '../Inject';
 import theme from './Drawer.scss';
 
 const DEFAULT_TRANSITION_DURATION = 350;
+CSSTransition.childContextTypes = {};
 
 class DrawerAnimation extends React.Component {
 	constructor(props) {

packages/components/src/List/ListComposition/DisplayMode/__snapshots__/ListDisplayMode.component.test.js.snap

@@ -42,7 +42,7 @@ exports[`List DisplayMode should render 1`] = `
             aria-pressed={true}
             block={false}
             bsClass="btn"
-            bsStyle=""
+            bsStyle="link"
             className="tc-icon-toggle theme-tc-icon-toggle theme-active active"
             disabled={true}
             id="myDisplayMode-table"
@@ -53,7 +53,7 @@ exports[`List DisplayMode should render 1`] = `
             <button
               aria-label="Set Table as current display mode."
               aria-pressed={true}
-              className="tc-icon-toggle theme-tc-icon-toggle theme-active active btn"
+              className="tc-icon-toggle theme-tc-icon-toggle theme-active active btn btn-link"
               disabled={true}
               id="myDisplayMode-table"
               onClick={[Function]}
@@ -109,7 +109,7 @@ exports[`List DisplayMode should render 1`] = `
             aria-pressed={false}
             block={false}
             bsClass="btn"
-            bsStyle=""
+            bsStyle="link"
             className="tc-icon-toggle theme-tc-icon-toggle"
             disabled={false}
             id="myDisplayMode-large"
@@ -120,7 +120,7 @@ exports[`List DisplayMode should render 1`] = `
             <button
               aria-label="Set Expanded as current display mode."
               aria-pressed={false}
-              className="tc-icon-toggle theme-tc-icon-toggle btn"
+              className="tc-icon-toggle theme-tc-icon-toggle btn btn-link"
               disabled={false}
               id="myDisplayMode-large"
               onClick={[Function]}

packages/forms/src/FormSkeleton.js

@@ -7,15 +7,13 @@ export default function FormSkeleton() {
 		<div className={`${theme.container} tc-skeleton-heartbeat`} aria-busy>
 			<div className={theme['form-content']}>
 				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
-				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={400} />
+				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} className="skeleton-fit-content" />
 				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
-				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={400} />
+				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} className="skeleton-fit-content" />
 				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
-				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={400} />
+				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} className="skeleton-fit-content" />
 				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
-				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={400} />
-				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
-				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} size={400} />
+				<Skeleton heartbeat={false} type={Skeleton.TYPES.text} className="skeleton-fit-content" />
 			</div>
 			<div className={theme.submit}>
 				<div className={theme['submit-wrapper']}>

packages/forms/src/FormSkeleton.scss

@@ -9,8 +9,13 @@ $tc-drawer-content-max-width: 650px !default;
 .form-content {
 	display: flex;
 	flex-direction: column;
-	:global(.tc-skeleton) {
-		margin: $padding-normal 0;
+	:global {
+		.tc-skeleton {
+			margin: $padding-normal 0;
+			&.skeleton-fit-content {
+				width: auto;
+			}
+		}
 	}
 }