From c791c31e264e6b0c312b573ddb93e5926c988505 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 20 Mar 2025 16:10:06 +0600 Subject: [PATCH 01/11] Remove group selector - Colors will inherit from it's parent. So not required here. - Override styles easily. --- src/components/tabs/tabs.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx index 2d0e43a6..05fbd8f4 100644 --- a/src/components/tabs/tabs.tsx +++ b/src/components/tabs/tabs.tsx @@ -257,7 +257,7 @@ export const Tab = forwardRef( } // 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( ); 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. From ff944622794aea587abb3e0990c6d9c1b0887066 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Fri, 21 Mar 2025 18:55:29 +0600 Subject: [PATCH 02/11] Enhance AreaChart component with additional wrapper props - Added `areaChartWrapperProps` to allow customization of the AreaChart wrapper component, enabling users to pass additional props such as `margin` and `onClick`. --- src/components/area-chart/area-chart.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/area-chart/area-chart.tsx b/src/components/area-chart/area-chart.tsx index d31d4828..f1d484c8 100644 --- a/src/components/area-chart/area-chart.tsx +++ b/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 ( - + { showCartesianGrid && } { showXAxis && ( Date: Fri, 21 Mar 2025 18:59:20 +0600 Subject: [PATCH 03/11] Update changelog --- changelog.txt | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/changelog.txt b/changelog.txt index 51acbb05..901ea475 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,3 +1,7 @@ +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. + 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. From 0a88b795111eafa2aa6256227f41f45585b3f780 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Tue, 25 Mar 2025 21:03:12 +0600 Subject: [PATCH 04/11] Created notRTL plugin for the TailwindCSS --- src/theme/default-config.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/theme/default-config.js b/src/theme/default-config.js index 1b7454dc..77003f82 100644 --- a/src/theme/default-config.js +++ b/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, }, From 7bd1419cc0c0f5905f4968ac3a2c2a1ed1980e7d Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Tue, 25 Mar 2025 21:07:11 +0600 Subject: [PATCH 05/11] fix: Switch component RTL issue --- src/components/switch/switch.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index f83031e8..168b7633 100644 --- a/src/components/switch/switch.tsx +++ b/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 = (