@croquiscom/pds 8.19.2 → 8.21.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @croquiscom/pds
 
+## 8.21.0
+
+### Minor Changes
+
+- f4fff19: FormField 컴포넌트에 FormHelperText영역 추가, No label 상태 추가
+
+### Patch Changes
+
+- 417377b: 타임피커 스크롤 y auto로 변경
+
+## 8.20.0
+
+### Minor Changes
+
+- 65c47dd: Setting Icon 추가
+
 ## 8.19.2
 
 ### Patch Changes

package/assets/icons/Setting.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.76688 2.31876C8.84986 1.68868 9.39405 1.25 10 1.25H14C14.606 1.25 15.1502 1.68868 15.2332 2.31876L15.5536 4.55284C15.944 4.73909 16.3141 4.95557 16.6662 5.19915L18.7821 4.3494L18.7937 4.34516C19.3178 4.15459 19.9929 4.32618 20.313 4.90102L22.314 8.36271L22.3185 8.37086C22.6028 8.89217 22.4989 9.56859 22.0048 9.95866L22.002 9.96081L20.2204 11.3541C20.2384 11.5605 20.25 11.7752 20.25 12C20.25 12.2248 20.2384 12.4395 20.2204 12.6459L22.0048 14.0413C22.4989 14.4314 22.6028 15.1078 22.3185 15.6291L22.314 15.6373L20.313 19.099C20.0054 19.6514 19.3464 19.8714 18.7767 19.6484L18.7705 19.646L16.6626 18.7994C16.3146 19.0381 15.9457 19.2575 15.5537 19.4461L15.2332 21.6813C15.1502 22.3113 14.606 22.75 14 22.75H10C9.39406 22.75 8.84987 22.3113 8.76688 21.6813L8.44652 19.4472C8.05611 19.2609 7.68594 19.0444 7.33389 18.8009L5.21802 19.6506L5.20634 19.6548C4.6823 19.8454 4.0072 19.6738 3.68708 19.0991L1.68606 15.6373L1.68161 15.6291C1.39726 15.1078 1.50121 14.4314 1.9953 14.0413L1.99803 14.0392L3.77996 12.6457C3.76177 12.4364 3.75004 12.2198 3.75004 12C3.75004 11.7802 3.76177 11.5636 3.77996 11.3543L1.99803 9.96081L1.9953 9.95866C1.5232 9.58595 1.3668 8.90701 1.69213 8.35221L3.68707 4.90097C3.99471 4.34859 4.65366 4.12865 5.22334 4.35157L5.22955 4.354L7.33743 5.20057C7.68548 4.96187 8.05442 4.74254 8.44638 4.55387L8.76688 2.31876ZM10.2204 2.75L9.81153 5.60124L9.41445 5.76398C8.87603 5.98464 8.37126 6.28908 7.89004 6.65L7.55229 6.90331L4.88208 5.83093L3.09824 8.91698L5.36698 10.6911L5.31424 11.113C5.27617 11.4177 5.25004 11.7136 5.25004 12C5.25004 12.2864 5.27617 12.5823 5.31424 12.887L5.36698 13.3089L3.09824 15.083L4.88208 18.1691L7.5579 17.0944L7.89732 17.3555C8.36839 17.7179 8.87076 18.0132 9.41445 18.236L9.81153 18.3988L10.2204 21.25H13.7797L14.1885 18.3988L14.5856 18.236C15.124 18.0154 15.6288 17.7109 16.11 17.35L16.4478 17.0967L19.118 18.1691L20.9018 15.083L18.6331 13.3089L18.6858 12.887C18.724 12.5816 18.75 12.296 18.75 12C18.75 11.704 18.724 11.4184 18.6858 11.113L18.6331 10.6911L20.9018 8.91698L19.118 5.83093L16.4422 6.90556L16.1028 6.64447C15.6317 6.28211 15.1293 5.98681 14.5856 5.76398L14.1885 5.60124L13.7797 2.75H10.2204ZM12 9.25C10.4843 9.25 9.25004 10.4842 9.25004 12C9.25004 13.5158 10.4843 14.75 12 14.75C13.5158 14.75 14.75 13.5158 14.75 12C14.75 10.4842 13.5158 9.25 12 9.25ZM7.75004 12C7.75004 9.65579 9.65582 7.75 12 7.75C14.3443 7.75 16.25 9.65579 16.25 12C16.25 14.3442 14.3443 16.25 12 16.25C9.65582 16.25 7.75004 14.3442 7.75004 12Z" fill="#363644"/>
+</svg>

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

@@ -20,7 +20,12 @@ export interface FormFieldProps {
      */
     helper?: HelpTextProps;
     /**
-     * 최소너비 80px내에서 라벨 너비를 지정할 수 있습니다.
+     * FormHelperText 컴포넌트로 라벨 아래에 메세지를 표시합니다.
+     */
+    formHelperText?: ReactNode;
+    /**
+     * @default 80
+     * 최소너비 80px이상인 경우 라벨 너비를 지정할 수 있습니다.
      */
     labelWidth?: CSSValueWithLength;
     /**
@@ -35,5 +40,5 @@ export interface FormFieldProps {
      */
     position?: FormFieldPosition;
 }
-export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, alignment, position, children, }: PropsWithChildren<FormFieldProps>) => React.JSX.Element;
+export declare const FormField: ({ className, label, rightAddon, required, helper, formHelperText, labelWidth, alignment, position, children, }: PropsWithChildren<FormFieldProps>) => React.JSX.Element;
 export {};

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

@@ -10,3 +10,8 @@ export declare const WithCheckboxGroup: Story;
 export declare const WithHelpPopover: Story;
 export declare const TopAlign: Story;
 export declare const TopPosition: Story;
+export declare const Error: Story;
+export declare const ErrorLongLabel: Story;
+export declare const ErrorOverflowLabel: Story;
+export declare const ErrorTop: Story;
+export declare const ErrorNoLabel: Story;

package/dist/components/icons/generated/Setting.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgSetting: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgSetting;

package/dist/components/icons/generated/index.d.ts

@@ -199,6 +199,7 @@ export { default as IconPlus } from './Plus';
 export { default as IconRefresh } from './Refresh';
 export { default as IconRocket } from './Rocket';
 export { default as IconSearch } from './Search';
+export { default as IconSetting } from './Setting';
 export { default as IconSort } from './Sort';
 export { default as IconSpoid } from './Spoid';
 export { default as IconStar } from './Star';