@croquiscom/pds 2.2.2 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @croquiscom/pds
 
+## 2.4.0
+
+### Minor Changes
+
+- c0a6b2c: Modal ContentProps scrollable 속성 추가
+
+## 2.3.0
+
+### Minor Changes
+
+- 1b05275: FormField Position Props 추가 및 Checkbox default border-radius 변경 (0->4)
+
 ## 2.2.2
 
 ### Patch Changes

package/dist/components/form/FormField.d.ts

@@ -1,6 +1,9 @@
 import { ReactNode, PropsWithChildren } from 'react';
 import { HelpTextProps } from '../text';
+import { VerticalAlignment } from '../stack';
 import { CSSValueWithLength } from '../../styles';
+type FormFieldAlignment = Extract<VerticalAlignment, 'top' | 'center'>;
+type FormFieldPosition = 'left' | 'top';
 export interface FormFieldProps {
     className?: string;
     label?: ReactNode;
@@ -24,6 +27,13 @@ export interface FormFieldProps {
      * label, children 정렬를 지정할 수 있습니다.
      * @default center
      */
-    alignment?: 'top' | 'center';
+    alignment?: FormFieldAlignment;
+    /**
+     * label 위치를 지정할 수 있습니다.
+     *  - position 이 top 인 경우 좌측 정렬 고정입니다.
+     * @default left
+     */
+    position?: FormFieldPosition;
 }
-export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, alignment, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;
+export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, alignment, position, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;
+export {};

package/dist/components/form/FormField.stories.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { FormField } from './FormField';
-declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, labelWidth, alignment, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
+declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, labelWidth, alignment, position, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const LabelWidth: any;
@@ -9,3 +9,4 @@ export declare const WithRadioGroup: ComponentStory<typeof FormField>;
 export declare const WithCheckboxGroup: ComponentStory<typeof FormField>;
 export declare const WithHelpPopover: any;
 export declare const TopAlign: any;
+export declare const TopPosition: any;

package/dist/components/modal/Modal.d.ts

@@ -6,6 +6,7 @@ export type ModalButtonProps = Omit<ButtonProps, 'onClick'>;
 export type ModalCancelReason = ModalBaseCancelReason;
 export interface ModalContentProps extends SpaceProps {
     maxHeight?: CSSValueWithLength;
+    scrollable?: boolean;
 }
 type LayoutHeightType = {
     header: number;
@@ -40,7 +41,8 @@ export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
     /**
      * 바디 영역 콘텐츠 ModalContentProps를 통한 커스텀이 가능합니다.
      *  - [SpaceProps](https://github.com/croquiscom/pds/blob/main/src/styles/space.ts)
-     *  - maxHeight
+     *  - maxHeight: 콘텐츠 영역 maxHeight을 커스텀할 수 있습니다. 지정하지 않을 경우 안전여백내에서 계산된 자동 최대 maxHeight값이 적용됩니다.
+     *  - scrollable: true일 경우 콘텐츠 영역에 overflow-y: auto값이 적용됩니다.
      */
     contentProps?: ModalContentProps;
     /**

package/dist/components/modal/Modal.stories.d.ts

@@ -18,3 +18,4 @@ export declare const FullScreen: ComponentStory<typeof Modal>;
 export declare const CustomFooterFullScreen: ComponentStory<typeof Modal>;
 export declare const AutoMaxHeight: ComponentStory<typeof Modal>;
 export declare const CustomMaxHeight: ComponentStory<typeof Modal>;
+export declare const Scrollable: ComponentStory<typeof Modal>;

package/dist/components/stack/HStack.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StackProps } from './types';
-type VerticalAlignment = 'stretch' | 'top' | 'bottom' | 'center';
+export type VerticalAlignment = 'stretch' | 'top' | 'bottom' | 'center';
 export interface HStackProps extends StackProps {
     alignment?: VerticalAlignment;
 }
@@ -8,4 +8,3 @@ export declare const HStack: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
 } & HStackProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/dist/components/stack/VStack.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StackProps } from './types';
-type HorizontalAlignment = 'stretch' | 'leading' | 'trailing' | 'center';
+export type HorizontalAlignment = 'stretch' | 'leading' | 'trailing' | 'center';
 export interface VStackProps extends StackProps {
     alignment?: HorizontalAlignment;
 }
@@ -8,4 +8,3 @@ export declare const VStack: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
 } & VStackProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};