@latte-macchiat-io/latte-vanilla-components 0.0.229 → 0.0.231

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Modal/index.tsx +7 -4
  3. package/src/theme/contract.css.ts +6 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.229",
3
+ "version": "0.0.231",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/components/Modal/index.tsx CHANGED
@@ -13,9 +13,10 @@ export type ModalProps = React.HTMLAttributes<HTMLDivElement> &
13
13
  ModalVariants & {
14
14
  triggerLabel: string;
15
15
  children: React.ReactNode;
16
+ withCloseButton?: boolean;
16
17
  };
17
18
 
18
- export const Modal = ({ triggerLabel, className, children, align }: ModalProps) => {
19
+ export const Modal = ({ triggerLabel, className, children, align, withCloseButton = false }: ModalProps) => {
19
20
  const [isOpen, setIsOpen] = useState(false);
20
21
 
21
22
  return (
@@ -27,9 +28,11 @@ export const Modal = ({ triggerLabel, className, children, align }: ModalProps)
27
28
  {isOpen && (
28
29
  <div className={modal} role="dialog" aria-modal="true">
29
30
  <div className={clsx(modalContentRecipe({ align }), className)}>
30
- <button type="button" className={modalContentCloseButton} onClick={() => setIsOpen(false)}>
31
- <Icon icon="close" />
32
- </button>
31
+ {withCloseButton && (
32
+ <button type="button" aria-label="Close modal" className={modalContentCloseButton} onClick={() => setIsOpen(false)}>
33
+ <Icon icon="close" />
34
+ </button>
35
+ )}
33
36
  {children}
34
37
  </div>
35
38
  </div>
package/src/theme/contract.css.ts CHANGED
@@ -671,12 +671,12 @@ export const themeContract = createGlobalThemeContract({
671
671
  '2xl': 'latte-video-playButton-width-2xl',
672
672
  },
673
673
  height: {
674
- mobile: 'latte-video-closeButton-height-mobile',
675
- sm: 'latte-video-closeButton-height-sm',
676
- md: 'latte-video-closeButton-height-md',
677
- lg: 'latte-video-closeButton-height-lg',
678
- xl: 'latte-video-closeButton-height-xl',
679
- '2xl': 'latte-video-closeButton-height-2xl',
674
+ mobile: 'latte-video-playButton-height-mobile',
675
+ sm: 'latte-video-playButton-height-sm',
676
+ md: 'latte-video-playButton-height-md',
677
+ lg: 'latte-video-playButton-height-lg',
678
+ xl: 'latte-video-playButton-height-xl',
679
+ '2xl': 'latte-video-playButton-height-2xl',
680
680
  },
681
681
  iconSize: {
682
682
  mobile: 'latte-video-playButton-iconSize-mobile',