Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: themesberg/flowbite-react
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 8478f3eb379d362695cf7689545d027a8d9218b1
Choose a base ref
..
head repository: themesberg/flowbite-react
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 01065d4afddeff80ee776c8c37272013c1a75c1f
Choose a head ref
36 changes: 33 additions & 3 deletions examples/progress/progress.colors.tsx
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ function Component() {
<div className="flex flex-col gap-2">
<div className="text-base font-medium">Dark</div>
<Progress progress={45} color="dark" />
<div className="text-base font-medium text-cyan-700">Blue</div>
<div className="text-base font-medium text-blue-700">Blue</div>
<Progress progress={45} color="blue" />
<div className="text-base font-medium text-red-700">Red</div>
<Progress progress={45} color="red" />
@@ -23,6 +23,16 @@ function Component() {
<Progress progress={45} color="indigo" />
<div className="text-base font-medium text-purple-700">Purple</div>
<Progress progress={45} color="purple" />
<div className="text-base font-medium text-cyan-700">Cyan</div>
<Progress progress={45} color="cyan" />
<div className="text-base font-medium text-gray-700">Gray</div>
<Progress progress={45} color="gray" />
<div className="text-base font-medium text-lime-700">Lime</div>
<Progress progress={45} color="lime" />
<div className="text-base font-medium text-pink-700">Pink</div>
<Progress progress={45} color="pink" />
<div className="text-base font-medium text-teal-700">Teal</div>
<Progress progress={45} color="teal" />
</div>
);
}
@@ -36,7 +46,7 @@ function Component() {
<div className="flex flex-col gap-2">
<div className="text-base font-medium">Dark</div>
<Progress progress={45} color="dark" />
<div className="text-base font-medium text-cyan-700">Blue</div>
<div className="text-base font-medium text-blue-700">Blue</div>
<Progress progress={45} color="blue" />
<div className="text-base font-medium text-red-700">Red</div>
<Progress progress={45} color="red" />
@@ -48,6 +58,16 @@ function Component() {
<Progress progress={45} color="indigo" />
<div className="text-base font-medium text-purple-700">Purple</div>
<Progress progress={45} color="purple" />
<div className="text-base font-medium text-cyan-700">Cyan</div>
<Progress progress={45} color="cyan" />
<div className="text-base font-medium text-gray-700">Gray</div>
<Progress progress={45} color="gray" />
<div className="text-base font-medium text-lime-700">Lime</div>
<Progress progress={45} color="lime" />
<div className="text-base font-medium text-pink-700">Pink</div>
<Progress progress={45} color="pink" />
<div className="text-base font-medium text-teal-700">Teal</div>
<Progress progress={45} color="teal" />
</div>
);
}
@@ -58,7 +78,7 @@ function Component() {
<div className="flex flex-col gap-2">
<div className="text-base font-medium">Dark</div>
<Progress progress={45} color="dark" />
<div className="text-base font-medium text-cyan-700">Blue</div>
<div className="text-base font-medium text-blue-700">Blue</div>
<Progress progress={45} color="blue" />
<div className="text-base font-medium text-red-700">Red</div>
<Progress progress={45} color="red" />
@@ -70,6 +90,16 @@ function Component() {
<Progress progress={45} color="indigo" />
<div className="text-base font-medium text-purple-700">Purple</div>
<Progress progress={45} color="purple" />
<div className="text-base font-medium text-cyan-700">Cyan</div>
<Progress progress={45} color="cyan" />
<div className="text-base font-medium text-gray-700">Gray</div>
<Progress progress={45} color="gray" />
<div className="text-base font-medium text-lime-700">Lime</div>
<Progress progress={45} color="lime" />
<div className="text-base font-medium text-pink-700">Pink</div>
<Progress progress={45} color="pink" />
<div className="text-base font-medium text-teal-700">Teal</div>
<Progress progress={45} color="teal" />
</div>
);
}
4 changes: 2 additions & 2 deletions src/components/Flowbite/FlowbiteTheme.ts
Original file line number Diff line number Diff line change
@@ -30,8 +30,8 @@ import type { FlowbiteRatingAdvancedTheme, FlowbiteRatingTheme } from '../Rating
import type { FlowbiteSelectTheme } from '../Select';
import type { FlowbiteSidebarTheme } from '../Sidebar';
import type { FlowbiteSpinnerTheme } from '../Spinner';
import type { FlowbiteTabTheme } from '../Tab';
import type { FlowbiteTableTheme } from '../Table';
import type { FlowbiteTabsTheme } from '../Tabs';
import type { FlowbiteTextInputTheme } from '../TextInput';
import type { FlowbiteTextareaTheme } from '../Textarea';
import type { FlowbiteTimelineTheme } from '../Timeline';
@@ -66,7 +66,7 @@ export interface FlowbiteTheme {
sidebar: FlowbiteSidebarTheme;
progress: FlowbiteProgressTheme;
spinner: FlowbiteSpinnerTheme;
tab: FlowbiteTabTheme;
tabs: FlowbiteTabsTheme;
toast: FlowbiteToastTheme;
tooltip: FlowbiteTooltipTheme;
dropdown: FlowbiteDropdownTheme;
7 changes: 5 additions & 2 deletions src/components/Progress/Progress.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,10 @@ export interface FlowbiteProgressTheme {
}

export interface ProgressColor
extends Pick<FlowbiteColors, 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'> {
extends Pick<
FlowbiteColors,
'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'cyan' | 'gray' | 'lime' | 'pink' | 'teal'
> {
[key: string]: string;
}

@@ -36,7 +39,7 @@ export interface ProgressProps extends ComponentProps<'div'> {

export const Progress: FC<ProgressProps> = ({
className,
color = 'blue',
color = 'cyan',
labelProgress = false,
labelText = false,
progress,
7 changes: 6 additions & 1 deletion src/components/Progress/theme.ts
Original file line number Diff line number Diff line change
@@ -6,12 +6,17 @@ export const progressTheme: FlowbiteProgressTheme = {
bar: 'rounded-full text-center font-medium leading-none text-cyan-300 dark:text-cyan-100 space-x-2',
color: {
dark: 'bg-gray-600 dark:bg-gray-300',
blue: 'bg-cyan-600',
blue: 'bg-blue-600',
red: 'bg-red-600 dark:bg-red-500',
green: 'bg-green-600 dark:bg-green-500',
yellow: 'bg-yellow-400',
indigo: 'bg-indigo-600 dark:bg-indigo-500',
purple: 'bg-purple-600 dark:bg-purple-500',
cyan: 'bg-cyan-600',
gray: 'bg-gray-500',
lime: 'bg-lime-600',
pink: 'bg-pink-500',
teal: 'bg-teal-600',
},
size: {
sm: 'h-1.5',
File renamed without changes.
File renamed without changes.
File renamed without changes.
6 changes: 3 additions & 3 deletions src/components/Tab/Tabs.tsx → src/components/Tabs/Tabs.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import type { FlowbiteBoolean } from '../Flowbite';
import type { TabItemProps } from './TabItem';
import { TabItem } from './TabItem';

export interface FlowbiteTabTheme {
export interface FlowbiteTabsTheme {
base: string;
tablist: {
base: string;
@@ -57,7 +57,7 @@ interface TabKeyboardEventProps extends TabEventProps {
export interface TabsProps extends Omit<ComponentProps<'div'>, 'ref' | 'style'> {
onActiveTabChange?: (activeTab: number) => void;
style?: keyof TabStyles;
theme?: DeepPartial<FlowbiteTabTheme>;
theme?: DeepPartial<FlowbiteTabsTheme>;
}

export interface TabsRef {
@@ -69,7 +69,7 @@ const TabsComponent = forwardRef<TabsRef, TabsProps>(
{ children, className, onActiveTabChange, style = 'default', theme: customTheme = {}, ...props },
ref: ForwardedRef<TabsRef>,
) => {
const theme = mergeDeep(getTheme().tab, customTheme);
const theme = mergeDeep(getTheme().tabs, customTheme);

const id = useId();
const tabs = useMemo(
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ export { TabItem } from './TabItem';
export type { TabItemProps } from './TabItem';
export { Tabs } from './Tabs';
export type {
FlowbiteTabTheme,
FlowbiteTabsTheme,
TabItemStatus,
TabStyleItem,
TabStyleItemProps,
4 changes: 2 additions & 2 deletions src/components/Tab/theme.ts → src/components/Tabs/theme.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { FlowbiteTabTheme } from './Tabs';
import type { FlowbiteTabsTheme } from './Tabs';

export const tabTheme: FlowbiteTabTheme = {
export const tabTheme: FlowbiteTabsTheme = {
base: 'flex flex-col gap-2',
tablist: {
base: 'flex text-center',
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -32,8 +32,8 @@ export * from './components/Rating';
export * from './components/Select';
export * from './components/Sidebar';
export * from './components/Spinner';
export * from './components/Tab';
export * from './components/Table';
export * from './components/Tabs';
export * from './components/TextInput';
export * from './components/Textarea';
export * from './components/ThemeModeScript';
4 changes: 2 additions & 2 deletions src/theme.ts
Original file line number Diff line number Diff line change
@@ -30,8 +30,8 @@ import { ratingAdvancedTheme, ratingTheme } from './components/Rating/theme';
import { selectTheme } from './components/Select/theme';
import { sidebarTheme } from './components/Sidebar/theme';
import { spinnerTheme } from './components/Spinner/theme';
import { tabTheme } from './components/Tab/theme';
import { tableTheme } from './components/Table/theme';
import { tabTheme } from './components/Tabs/theme';
import { textInputTheme } from './components/TextInput/theme';
import { textareaTheme } from './components/Textarea/theme';
import { timelineTheme } from './components/Timeline/theme';
@@ -76,8 +76,8 @@ export const theme: FlowbiteTheme = {
toggleSwitch: toggleSwitchTheme,
sidebar: sidebarTheme,
spinner: spinnerTheme,
tab: tabTheme,
table: tableTheme,
tabs: tabTheme,
timeline: timelineTheme,
toast: toastTheme,
tooltip: tooltipTheme,