Dev to Staging

changelog.txt

@@ -1,3 +1,9 @@
+Version 1.5.1 - xth x, 2025
+- Improvement - Introduced the `areaChartWrapper` prop in the AreaChart component to allow for better customization options.
+- Improvement - Removed the group selector from the Tabs component to simplify style overrides.
+- Improvement - Introduced a new prop to handle the Sidebar's default collapse state when collapsible is set to false.
+- Fix - Addressed UI inconsistencies in the Switch, Checkbox, and RadioButton components for improved support in RTL (Right-to-Left) layouts.
+
 Version 1.5.0 - 14th March, 2025
 - New - Added new Atom, File Preview - to show uploaded file preview.
 - New - Added new variants in Progress Steps component to show icon and number in the completed step.

src/components/area-chart/area-chart.tsx

@@ -12,6 +12,7 @@ import {
 import ChartLegendContent from './chart-legend-content';
 import ChartTooltipContent from './chart-tooltip-content';
 import Label from '../label';
+import type { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
 
 interface DataItem {
 	[key: string]: number | string; // Adjust based on your data structure
@@ -75,6 +76,15 @@ interface AreaChartProps {
 
 	/** Height of the chart container. */
 	chartHeight?: number;
+
+	/**
+	 * Area chart Wrapper props to apply additional props to the wrapper component. Ex. `margin`, or `onClick` etc.
+	 * @see https://recharts.org/en-US/api/AreaChart
+	 */
+	areaChartWrapperProps?: Omit<
+		CategoricalChartProps,
+		'width' | 'height' | 'data'
+	>;
 }
 
 const AreaChart = ( {
@@ -96,6 +106,14 @@ const AreaChart = ( {
 	xAxisFontColor = '#6B7280',
 	chartWidth = 350,
 	chartHeight = 200,
+	areaChartWrapperProps = {
+		margin: {
+			left: 14,
+			right: 14,
+			top: 6,
+			bottom: 6,
+		},
+	},
 }: AreaChartProps ) => {
 	const [ width, setWidth ] = useState( chartWidth );
 	const [ height, setHeight ] = useState( chartHeight );
@@ -157,7 +175,7 @@ const AreaChart = ( {
 
 	return (
 		<ResponsiveContainer width={ width } height={ height }>
-			<AreaChartWrapper data={ data } margin={ { left: 14, right: 14 } }>
+			<AreaChartWrapper { ...areaChartWrapperProps } data={ data }>
 				{ showCartesianGrid && <CartesianGrid vertical={ false } /> }
 				{ showXAxis && (
 					<XAxis

src/components/checkbox/checkbox.tsx

@@ -179,7 +179,7 @@ export const CheckboxComponent = (
 				/>
 				<span
 					className={ cn(
-						'pointer-events-none inline-flex items-center absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100',
+						'pointer-events-none inline-flex items-center absolute top-2/4 not-rtl:left-2/4 rtl:right-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100',
 						colorClassNames[ color ].icon,
 						disabled && disabledClassNames.icon
 					) }

src/components/radio-button/radio-button.tsx

@@ -507,7 +507,7 @@ export const RadioButtonComponent = (
 							/>
 							<span
 								className={ cn(
-									'inline-flex items-center absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100',
+									'inline-flex items-center absolute top-2/4 not-rtl:left-2/4 rtl:right-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100',
 									colorClassNames[ color ].icon,
 									isDisabled && disabledClassNames.icon
 								) }

src/components/sidebar/sidebar.stories.tsx

@@ -81,6 +81,7 @@ const Template: StoryFn<typeof Sidebar> = ( args ) => {
 	return (
 		<Sidebar
 			{ ...args }
+			key={ args.collapsed && ! args.collapsible ? 'collapsed' : 'expanded' }
 			onCollapseChange={ ( isCollapsed ) => {
 				setSidebarCollapsed( isCollapsed );
 			} }

src/components/sidebar/sidebar.tsx

@@ -38,6 +38,8 @@ export interface SidebarProps extends SidebarCommonProps {
 	collapsible?: boolean;
 	/** Controls whether a border should appear on the right of the Sidebar. */
 	borderOn?: boolean;
+	/** Set the sidebar collapse state. This is useful when collapsible is false and you want to use the sidebar as collapsed by default. */
+	collapsed?: boolean;
 }
 
 // Sidebar subcomponents props interfaces
@@ -54,25 +56,32 @@ export const Sidebar = ( {
 	onCollapseChange,
 	collapsible = true,
 	borderOn = true,
+	collapsed = false,
 	...props
 }: SidebarProps ) => {
 	const sideBarRef = useRef<HTMLDivElement>( null );
 	const [ isCollapsed, setIsCollapsed ] = useState( () => {
+		if ( ! collapsible && collapsed ) {
+			return collapsed;
+		}
 		const storedState = safeLocalStorage.get( 'sidebar-collapsed' );
-		const isSmallScreen = window.innerWidth < 1280;
 		if ( storedState ) {
 			return storedState;
 		}
+		const isSmallScreen = window.innerWidth < 1280;
 		return isSmallScreen;
 	} );
 
 	useEffect( () => {
-		if ( onCollapseChange ) {
+		if ( typeof onCollapseChange === 'function' ) {
 			onCollapseChange( isCollapsed );
 		}
 	}, [ isCollapsed, onCollapseChange ] );
 
 	useEffect( () => {
+		if ( ! collapsible && collapsed ) {
+			return;
+		}
 		const handleScreenResize = () => {
 			const isSmallScreen = window.innerWidth < 1280;
 			if ( ! collapsible ) {

src/components/switch/switch.tsx

@@ -204,9 +204,9 @@ export const SwitchComponent = (
 		},
 	};
 	const toggleDialHoverClassNames = {
-		md: 'group-hover/switch:size-5 group-focus-within/switch:size-5 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5',
-		sm: 'group-hover/switch:size-4 group-focus-within/switch:size-4 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5',
-		xs: 'group-hover/switch:size-3.25 group-focus-within/switch:size-3.25 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5',
+		md: 'group-hover/switch:size-5 group-focus-within/switch:size-5 not-rtl:group-focus-within/switch:left-0.5 rtl:group-focus-within/switch:right-0.5 not-rtl:group-hover/switch:left-0.5 rtl:group-hover/switch:right-0.5',
+		sm: 'group-hover/switch:size-4 group-focus-within/switch:size-4 not-rtl:group-focus-within/switch:left-0.5 rtl:group-focus-within/switch:right-0.5 not-rtl:group-hover/switch:left-0.5 rtl:group-hover/switch:right-0.5',
+		xs: 'group-hover/switch:size-3.25 group-focus-within/switch:size-3.25 not-rtl:group-focus-within/switch:left-0.5 rtl:group-focus-within/switch:right-0.5 not-rtl:group-hover/switch:left-0.5 rtl:group-hover/switch:right-0.5',
 	};
 
 	const disabledClassNames = {
@@ -247,7 +247,7 @@ export const SwitchComponent = (
 				<label
 					htmlFor={ switchId }
 					className={ cn(
-						"peer/toggle-dial bg-white border rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 hover:before:opacity-10 before:hidden border-none transition-all duration-300 top-2/4 left-1 -translate-y-2/4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4",
+						"peer/toggle-dial bg-white border rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 hover:before:opacity-10 before:hidden border-none transition-all duration-300 top-2/4 not-rtl:left-1 rtl:right-1 -translate-y-2/4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 not-rtl:before:left-2/4 rtl:before:right-2/4 before:-translate-y-2/4 before:-translate-x-2/4",
 						sizeClassNames[ normalSize ].toggleDial,
 						colorClassNames[ color ].toggleDial,
 						disabled && disabledClassNames.toggleDial,

src/components/tabs/tabs.tsx

@@ -257,7 +257,7 @@ export const Tab = forwardRef<Ref, TabProps>(
 		}
 
 		// Additional classes.
-		const hoverClasses = 'hover:text-text-primary group';
+		const hoverClasses = 'hover:text-text-primary';
 		const focusClasses = 'focus:outline-none';
 		const disabledClasses = disabled
 			? 'text-text-disabled cursor-not-allowed hover:text-text-disabled'
@@ -281,8 +281,7 @@ export const Tab = forwardRef<Ref, TabProps>(
 		);
 
 		const iconParentClasses = cn(
-			'flex items-center gap-1 group-hover:text-text-primary',
-			disabled && 'group-hover:text-text-disabled'
+			'flex items-center gap-1',
 		);
 
 		// Handle click event.

src/theme/default-config.js

@@ -1,3 +1,9 @@
+import plugin from 'tailwindcss/plugin';
+
+const notRTLPlugin = plugin( ( { addVariant } ) => {
+	addVariant( 'not-rtl', '&:not([dir="rtl"], [dir="rtl"] *)' );
+} );
+
 const defaultTheme = {
 	content: [ 'node_modules/@bsf/force-ui/dist/components/**/*.js' ],
 	theme: {
@@ -220,7 +226,7 @@ const defaultTheme = {
 			},
 		},
 	},
-	plugins: [],
+	plugins: [ notRTLPlugin ],
 	corePlugins: {
 		preflight: false,
 	},