Tip: Use CSS-in-JS

packages/components/src/style.scss

@@ -39,7 +39,6 @@
 @import "./spinner/style.scss";
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
-@import "./tip/style.scss";
 @import "./toggle-control/style.scss";
 @import "./toolbar/style.scss";
 @import "./toolbar-button/style.scss";

packages/components/src/tip/index.js

@@ -1,25 +1,36 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { SVG, Path } from '@wordpress/primitives';
+import { Path } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import { TipContent, TipIcon, TipWrapper } from './styles/tip-styles';
 
 /**
  * @typedef Props
+ * @property {string} [className] Optional classname to add to the tip.
  * @property {import('react').ReactNode} children Children to render in the tip.
  */
 
 /**
  * @param {Props} props
  * @return {JSX.Element} Element
  */
-function Tip( props ) {
+function Tip( { children, className } ) {
 	return (
-		<div className="components-tip">
-			<SVG width="24" height="24" viewBox="0 0 24 24">
+		<TipWrapper className={ classnames( 'components-tip', className ) }>
+			<TipIcon width="24" height="24" viewBox="0 0 24 24">
 				<Path d="M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z" />
-			</SVG>
-			<p>{ props.children }</p>
-		</div>
+			</TipIcon>
+			<TipContent>{ children }</TipContent>
+		</TipWrapper>
 	);
 }
 

packages/components/src/tip/stories/index.js

@@ -12,9 +12,5 @@ export default { title: 'Components/Tip', component: Tip };
 
 export const _default = () => {
 	const tipText = text( 'Text', 'An example tip' );
-	return (
-		<Tip>
-			<p>{ tipText }</p>
-		</Tip>
-	);
+	return <Tip>{ tipText }</Tip>;
 };

packages/components/src/tip/styles/tip-styles.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { SVG } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import { color, space, rtl } from '../../utils';
+
+export const TipWrapper = styled.div`
+	display: flex;
+	color: ${ color( 'mediumGray.text' ) };
+`;
+
+export const TipIcon = styled( SVG )`
+	align-self: center;
+	fill: ${ color( 'alert.yellow' ) };
+	flex-shrink: 0;
+	${ rtl( { marginRight: space( 2 ) } )() }
+`;
+
+export const TipContent = styled.p`
+	margin: 0;
+`;

packages/components/tsconfig.json

@@ -5,5 +5,5 @@
 		"declarationDir": "build-types"
 	},
 	"references": [ { "path": "../primitives" } ],
-	"include": [ "src/dashicon/*", "src/tip/*" ]
+	"include": [ "src/dashicon/*", "src/tip/index.js" ]
 }