Skip to content

Commit

Permalink
feat(component): theme support to modal (#197)
Browse files Browse the repository at this point in the history 
* feat(component): theme support to modal

* doc(component): update button color modal

* refactor(component): clean up interfaces
  • Loading branch information
@rluders
rluders authored Jun 5, 2022
1 parent 80b7e2a commit 3ed4551
Show file tree
Hide file tree
Showing 12 changed files with 313 additions and 233 deletions.
170 changes: 87 additions & 83 deletions src/docs/pages/ModalPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import type { FC } from 'react';
import { useState } from 'react';
import { HiOutlineExclamationCircle } from 'react-icons/hi';

import type { CodeExample } from './DemoPage';
import { DemoPage } from './DemoPage';
import type { ModalSize, ModalPlacement } from '../../lib';
import { Button, Checkbox, Label, Modal, Select, TextInput } from '../../lib';

const ModalPage: FC = () => {
Expand All @@ -20,16 +18,18 @@ const ModalPage: FC = () => {
<Button onClick={() => setOpenModal('default')}>Toggle modal</Button>
<Modal show={openModal === 'default'} onClose={() => setOpenModal(undefined)}>
<Modal.Header>Terms of Service</Modal.Header>
<Modal.Body className="space-y-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its
citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is
meant to ensure a common set of data rights in the European Union. It requires organizations to notify
users as soon as possible of high-risk data breaches that could personally affect them.
</p>
<Modal.Body>
<div className="space-y-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its
citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is
meant to ensure a common set of data rights in the European Union. It requires organizations to notify
users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setOpenModal(undefined)}>I accept</Button>
Expand All @@ -48,18 +48,20 @@ const ModalPage: FC = () => {
<Button onClick={() => setOpenModal('pop-up')}>Toggle modal</Button>
<Modal show={openModal === 'pop-up'} size="md" popup onClose={() => setOpenModal(undefined)}>
<Modal.Header />
<Modal.Body className="text-center">
<HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
Are you sure you want to delete this product?
</h3>
<div className="flex justify-center gap-4">
<Button color="red" onClick={() => setOpenModal(undefined)}>
{"Yes, I'm sure"}
</Button>
<Button color="alternative" onClick={() => setOpenModal(undefined)}>
No, cancel
</Button>
<Modal.Body>
<div className="text-center">
<HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
Are you sure you want to delete this product?
</h3>
<div className="flex justify-center gap-4">
<Button color="failure" onClick={() => setOpenModal(undefined)}>
{"Yes, I'm sure"}
</Button>
<Button color="alternative" onClick={() => setOpenModal(undefined)}>
No, cancel
</Button>
</div>
</div>
</Modal.Body>
</Modal>
Expand All @@ -73,40 +75,42 @@ const ModalPage: FC = () => {
<Button onClick={() => setOpenModal('form-elements')}>Toggle modal</Button>
<Modal show={openModal === 'form-elements'} size="md" popup onClose={() => setOpenModal(undefined)}>
<Modal.Header />
<Modal.Body className="space-y-6 px-6 pb-4 sm:pb-6 lg:px-8 xl:pb-8">
<h3 className="text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
<div>
<Label className="mb-2 block" htmlFor="email">
Your email
</Label>
<TextInput
id="email"
className="dark:border-gray-500 dark:bg-gray-600"
placeholder="[email protected]"
required
/>
</div>
<div>
<Label className="mb-2 block" htmlFor="password">
Your password
</Label>
<TextInput id="password" className="dark:border-gray-500 dark:bg-gray-600" type="password" required />
</div>
<div className="flex justify-between">
<div className="flex items-center gap-2">
<Checkbox id="remember" className="dark:border-gray-500 dark:bg-gray-600" />
<Label htmlFor="remember">Remember me</Label>
<Modal.Body>
<div className="space-y-6 px-6 pb-4 sm:pb-6 lg:px-8 xl:pb-8">
<h3 className="text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
<div>
<Label className="mb-2 block" htmlFor="email">
Your email
</Label>
<TextInput
id="email"
className="dark:border-gray-500 dark:bg-gray-600"
placeholder="[email protected]"
required
/>
</div>
<div>
<Label className="mb-2 block" htmlFor="password">
Your password
</Label>
<TextInput id="password" className="dark:border-gray-500 dark:bg-gray-600" type="password" required />
</div>
<div className="flex justify-between">
<div className="flex items-center gap-2">
<Checkbox id="remember" className="dark:border-gray-500 dark:bg-gray-600" />
<Label htmlFor="remember">Remember me</Label>
</div>
<a href="/modal" className="text-sm text-blue-700 hover:underline dark:text-blue-500">
Lost Password?
</a>
</div>
<Button className="w-full">Log in to your account</Button>
<div className="text-sm font-medium text-gray-500 dark:text-gray-300">
Not registered?{' '}
<a href="/modal" className="text-blue-700 hover:underline dark:text-blue-500">
Create account
</a>
</div>
<a href="/modal" className="text-sm text-blue-700 hover:underline dark:text-blue-500">
Lost Password?
</a>
</div>
<Button className="w-full">Log in to your account</Button>
<div className="text-sm font-medium text-gray-500 dark:text-gray-300">
Not registered?{' '}
<a href="/modal" className="text-blue-700 hover:underline dark:text-blue-500">
Create account
</a>
</div>
</Modal.Body>
</Modal>
Expand All @@ -132,18 +136,20 @@ const ModalPage: FC = () => {
</Select>
<Button onClick={() => setOpenModal('size')}>Toggle modal</Button>
</div>
<Modal show={openModal === 'size'} size={modalSize as ModalSize} onClose={() => setOpenModal(undefined)}>
<Modal show={openModal === 'size'} size={modalSize} onClose={() => setOpenModal(undefined)}>
<Modal.Header>Small modal</Modal.Header>
<Modal.Body className="space-y-6 p-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its
citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is
meant to ensure a common set of data rights in the European Union. It requires organizations to notify
users as soon as possible of high-risk data breaches that could personally affect them.
</p>
<Modal.Body>
<div className="space-y-6 p-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its
citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is
meant to ensure a common set of data rights in the European Union. It requires organizations to notify
users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setOpenModal(undefined)}>I accept</Button>
Expand Down Expand Up @@ -173,22 +179,20 @@ const ModalPage: FC = () => {
</Select>
<Button onClick={() => setOpenModal('placement')}>Toggle modal</Button>
</div>
<Modal
show={openModal === 'placement'}
placement={modalPlacement as ModalPlacement}
onClose={() => setOpenModal(undefined)}
>
<Modal show={openModal === 'placement'} position={modalPlacement} onClose={() => setOpenModal(undefined)}>
<Modal.Header>Small modal</Modal.Header>
<Modal.Body className="space-y-6 p-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its
citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is
meant to ensure a common set of data rights in the European Union. It requires organizations to notify
users as soon as possible of high-risk data breaches that could personally affect them.
</p>
<Modal.Body>
<div className="space-y-6 p-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its
citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is
meant to ensure a common set of data rights in the European Union. It requires organizations to notify
users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setOpenModal(undefined)}>I accept</Button>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Avatar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export interface AvatarProps extends PropsWithChildren<ComponentProps<'div'>> {
statusPosition?: keyof FlowbitePositions;
}

export interface AvatarSizes extends FlowbiteSizes {
export interface AvatarSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'md' | 'lg' | 'xl'> {
[key: string]: string;
}

Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export interface ButtonOutlineColors extends Pick<FlowbiteColors, 'gray'> {
[key: string]: string;
}

export interface ButtonSizes extends FlowbiteSizes {
export interface ButtonSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'lg' | 'xl'> {
[key: string]: string;
}

Expand Down
39 changes: 39 additions & 0 deletions src/lib/components/Flowbite/FlowbiteTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type { ButtonGradientColors, ButtonGradientDuoToneColors } from '../Butto
import type { DeepPartial } from '../../helpers/deep-partial';
import type { PositionInButtonGroup } from '../Button/ButtonGroup';
import type { StarSizes } from '../Rating';
import type { ModalPositions, ModalSizes } from '../Modal';

export type CustomFlowbiteTheme = DeepPartial<FlowbiteTheme>;

Expand Down Expand Up @@ -142,6 +143,33 @@ export interface FlowbiteTheme {
snap: string;
};
};
modal: {
base: string;
show: FlowbiteBoolean;
content: {
base: string;
inner: string;
};
body: {
base: string;
popup: string;
};
header: {
base: string;
popup: string;
title: string;
close: {
base: string;
icon: string;
};
};
footer: {
base: string;
popup: string;
};
sizes: ModalSizes;
positions: ModalPositions;
};
rating: {
base: string;
star: {
Expand Down Expand Up @@ -257,8 +285,13 @@ export type FlowbiteHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
export interface FlowbitePositions {
'bottom-left': string;
'bottom-right': string;
'bottom-center': string;
'top-left': string;
'top-center': string;
'top-right': string;
'center-left': string;
center: string;
'center-right': string;
}

export interface FlowbiteSizes {
Expand All @@ -267,4 +300,10 @@ export interface FlowbiteSizes {
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
}
22 changes: 12 additions & 10 deletions src/lib/components/Modal/Modal.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,18 @@ const TestModal = ({ root }: Pick<ModalProps, 'root'>): JSX.Element => {
<Button onClick={() => setOpen(true)}>Toggle modal</Button>
<Modal root={root} show={open} onClose={() => setOpen(false)}>
<Modal.Header>Terms of Service</Modal.Header>
<Modal.Body className="space-y-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens,
companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant
to ensure a common set of data rights in the European Union. It requires organizations to notify users as
soon as possible of high-risk data breaches that could personally affect them.
</p>
<Modal.Body>
<div className="space-y-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens,
companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant
to ensure a common set of data rights in the European Union. It requires organizations to notify users as
soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setOpen(false)}>I accept</Button>
Expand Down
Loading

0 comments on commit 3ed4551

Please sign in to comment.