@atlaskit/editor-toolbar 0.0.4 → 0.0.6

package/src/ui/ToolbarButton.tsx

@@ -5,13 +5,7 @@ import { type TriggerProps } from '@atlaskit/popup';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
-import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
-
-const ICON_COLOR = {
-	default: token('color.icon.subtle'),
-	disabled: token('color.icon.disabled'),
-	selected: token('color.icon.selected'),
-};
+import { type ToolbarButtonGroupLocation } from '../types';
 
 const styles = cssMap({
 	button: {
@@ -22,7 +16,7 @@ const styles = cssMap({
 		alignItems: 'center',
 		justifyContent: 'center',
 		borderRadius: token('border.radius.100'),
-		minHeight: '32px',
+		minHeight: '28px',
 		color: token('color.text.subtle'),
 		fontWeight: token('font.weight.medium'),
 		paddingLeft: token('space.100'),
@@ -85,8 +79,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 	onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 	testId?: string;
-	label: string;
-	icon: IconComponent;
+	iconBefore: React.ReactNode;
 	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	ariaKeyshortcuts?: string;
@@ -95,8 +88,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 export const ToolbarButton = forwardRef(
 	(
 		{
-			icon: IconComponent,
-			label,
+			iconBefore,
 			children,
 			onClick,
 			isSelected,
@@ -113,11 +105,6 @@ export const ToolbarButton = forwardRef(
 		}: ToolbarButtonProps,
 		ref: Ref<HTMLButtonElement>,
 	) => {
-		const iconColor = isDisabled
-			? ICON_COLOR.disabled
-			: isSelected
-				? ICON_COLOR.selected
-				: ICON_COLOR.default;
 		return (
 			<Pressable
 				ref={ref}
@@ -140,7 +127,7 @@ export const ToolbarButton = forwardRef(
 				testId={testId}
 				isDisabled={isDisabled}
 			>
-				<IconComponent label={label} size="medium" color={iconColor} />
+				{iconBefore}
 				{children}
 			</Pressable>
 		);

package/src/ui/ToolbarColorSwatch.tsx

@@ -0,0 +1,40 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+type ToolbarColorSwatchProps = {
+	children?: ReactNode;
+	highlightColor?: string;
+};
+
+const styles = cssMap({
+	colorSwatch: {
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+		border: `${token('border.width')} solid ${token('color.border')}`,
+		borderRadius: token('border.radius.100'),
+		width: '20px',
+		height: '20px',
+		marginLeft: token('space.negative.050'),
+		marginRight: token('space.negative.050'),
+	},
+});
+
+export const ToolbarColorSwatch = ({
+	children,
+	highlightColor,
+}: ToolbarColorSwatchProps) => {
+	return (
+		<Box
+			xcss={styles.colorSwatch}
+			style={{
+				backgroundColor: highlightColor,
+			}}
+		>
+			{children}
+		</Box>
+	);
+};

package/src/ui/ToolbarDropdownMenu.tsx

@@ -2,21 +2,19 @@ import React, { type ReactNode } from 'react';
 
 import DropdownMenu from '@atlaskit/dropdown-menu';
 
-import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
+import { type ToolbarButtonGroupLocation } from '../types';
 
 import { ToolbarButton } from './ToolbarButton';
 
 type ToolbarDropdownMenuProps = {
-	icon: IconComponent;
-	label: string;
+	iconBefore: React.ReactNode;
 	children?: ReactNode;
 	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 };
 
 export const ToolbarDropdownMenu = ({
-	icon,
-	label,
+	iconBefore,
 	groupLocation,
 	children,
 	isDisabled,
@@ -34,8 +32,7 @@ export const ToolbarDropdownMenu = ({
 					onClick={triggerProps.onClick}
 					onFocus={triggerProps.onFocus}
 					testId={triggerProps.testId}
-					icon={icon}
-					label={label}
+					iconBefore={iconBefore}
 					groupLocation={groupLocation}
 					isDisabled={isDisabled}
 				/>

package/src/ui/icons/AIChatIcon.tsx

@@ -1,12 +1,26 @@
 import React from 'react';
 
+import { cssMap } from '@atlaskit/css';
 import { RovoIcon as RovoLogoIcon } from '@atlaskit/logo';
+import { Box } from '@atlaskit/primitives/compiled';
 
 type AIChatIconProps = {
 	label: string;
 	testId?: string;
 };
 
+const styles = cssMap({
+	small: {
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		height: '12px',
+		width: '12px',
+	},
+});
+
 export const AIChatIcon = ({ label, testId }: AIChatIconProps) => (
-	<RovoLogoIcon label={label} testId={testId} size="small" />
+	<Box xcss={styles.small}>
+		<RovoLogoIcon label={label} testId={testId} size="xxsmall" />
+	</Box>
 );

package/src/ui/icons/TextColorIcon.tsx

@@ -1,2 +1,43 @@
-/* eslint-disable @atlaskit/editor/no-re-export */
-export { default as TextColorIcon } from '@atlaskit/icon/core/text-style';
+import React from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import Icon from '@atlaskit/icon/core/text-style';
+import { type NewCoreIconProps } from '@atlaskit/icon/types';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+import { type IconColor } from '@atlaskit/tokens/css-type-schema';
+
+type TextColorIconProps = NewCoreIconProps & {
+	iconColor?: IconColor;
+	isDisabled?: boolean;
+};
+
+const styles = cssMap({
+	icon: {
+		marginTop: token('space.050'),
+	},
+});
+
+export const TextColorIcon = ({
+	label,
+	shouldRecommendSmallIcon,
+	size,
+	spacing,
+	testId,
+	iconColor,
+	isDisabled,
+}: TextColorIconProps) => {
+	return (
+		// for the moment the Icon is not truely centered - adding margin top as a workaround
+		<Box as="span" xcss={styles.icon}>
+			<Icon
+				label={label}
+				testId={testId}
+				color={isDisabled ? token('color.icon.disabled') : iconColor}
+				shouldRecommendSmallIcon={shouldRecommendSmallIcon}
+				spacing={spacing}
+				size={size}
+			/>
+		</Box>
+	);
+};

package/tsconfig.app.json

@@ -64,6 +64,5 @@
 		{
 			"path": "../../design-system/tooltip/tsconfig.app.json"
 		}
-	],
-	"files": []
+	]
 }

package/tsconfig.dev.json

@@ -23,7 +23,13 @@
 		"./__mocks__/**/*",
 		"**/mock.*",
 		"**/codemods/**/*.ts",
-		"**/codemods/**/*.tsx"
+		"**/codemods/**/*.tsx",
+		"**/stories.ts",
+		"**/stories.tsx",
+		"**/stories/*.ts",
+		"**/stories/*.tsx",
+		"**/stories/**/*.ts",
+		"**/stories/**/*.tsx"
 	],
 	"exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
 	"compilerOptions": {

package/tsconfig.json

@@ -6,7 +6,13 @@
     "examples/**/*.ts",
     "examples/**/*.tsx",
     "src/**/*.ts",
-    "src/**/*.tsx"
+    "src/**/*.tsx",
+    "**/stories.ts",
+    "**/stories.tsx",
+    "**/stories/*.ts",
+    "**/stories/*.tsx",
+    "**/stories/**/*.ts",
+    "**/stories/**/*.tsx"
   ],
   "compilerOptions": {}
 }

package/src/ui/ColorIndicatorWrapper.tsx

@@ -1,25 +0,0 @@
-import React, { type ReactNode } from 'react';
-
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-type ColorIndicatorWrapperProps = {
-	children?: ReactNode;
-	color?: string;
-};
-
-const styles = cssMap({
-	indicator: {
-		height: '16px',
-		borderBottomColor: token('color.border.bold'),
-		borderBottomStyle: 'solid',
-		borderBottomWidth: token('border.width.indicator'),
-	},
-});
-
-export const ColorIndicatorWrapper = ({ color, children }: ColorIndicatorWrapperProps) => (
-	<Box xcss={styles.indicator} style={{ borderBottomColor: color }} as="span">
-		{children}
-	</Box>
-);

package/src/ui/ToolbarDivider.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	divider: {
-		height: '16px',
-		borderLeftColor: token('color.border'),
-		borderLeftStyle: 'solid',
-		borderLeftWidth: token('border.width'),
-		marginLeft: token('space.050'),
-		marginRight: token('space.050'),
-	},
-});
-
-export const ToolbarDivider = () => {
-	return <Box xcss={styles.divider} />;
-};