kiban-design-system 1.0.245-alpha.0 → 1.0.247-alpha.0
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.
- package/dist/components/DynamicForm/DynamicForm.d.ts +1 -1
- package/dist/components/DynamicForm/DynamicForm.props.d.ts +1 -0
- package/dist/components/DynamicForm/components/SectionForm/SectionForm.d.ts +1 -1
- package/dist/components/DynamicForm/components/SectionForm/SectionForm.props.d.ts +1 -0
- package/dist/components/Select/Select.d.ts +2 -1
- package/dist/components/Select/Select.props.d.ts +8 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +11 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { DynamicFormProps } from './DynamicForm.props';
|
|
3
3
|
import './DynamicForm.styles.scss';
|
|
4
|
-
declare const DynamicForm: <T>({ ariaLabel, dataFormArray, fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }: DynamicFormProps<T>) => JSX.Element;
|
|
4
|
+
declare const DynamicForm: <T>({ ariaLabel, dataFormArray, fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, columnsSize, }: DynamicFormProps<T>) => JSX.Element;
|
|
5
5
|
export default DynamicForm;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { SectionFormProps } from './SectionForm.props';
|
|
3
|
-
declare const SectionForm: <T>({ ariaLabel, data, fields, fieldsSection, iconDeletable, iconHelperText, onChange, onDelete, tagRemoveIcon, isDeletable, extraPropsField, }: SectionFormProps<T>) => JSX.Element;
|
|
3
|
+
declare const SectionForm: <T>({ ariaLabel, data, fields, fieldsSection, iconDeletable, iconHelperText, onChange, onDelete, tagRemoveIcon, isDeletable, extraPropsField, columnsSize: columnsSizeProps, }: SectionFormProps<T>) => JSX.Element;
|
|
4
4
|
export default SectionForm;
|
|
@@ -10,6 +10,7 @@ import './Select.styles.scss';
|
|
|
10
10
|
* options can be selected or not
|
|
11
11
|
* @param {string} SelectProps.placeholder - Select Placeholder
|
|
12
12
|
* @param {string} SelectProps.selectLabel - Select Label
|
|
13
|
+
* @param {object} InputTextProps.secondaryAction - Text for show icon inside right input.
|
|
13
14
|
* @param {string[]} SelectProps.selected - Selected data to highlight in the render
|
|
14
15
|
* of the list items
|
|
15
16
|
* @param {Function} SelectProps.onChange - Action that is triggered by selecting
|
|
@@ -29,5 +30,5 @@ import './Select.styles.scss';
|
|
|
29
30
|
* @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
|
|
30
31
|
* @returns {symbol} - Element Select
|
|
31
32
|
*/
|
|
32
|
-
declare const Select: ({ ariaLabel, items, sections, isMultiple, placeholder, label, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled, tooltip, isDanger, isReadOnly, id, emptyState, onBlur, isRequired, tooltipLabel, action, showSearch, }: SelectProps) => JSX.Element;
|
|
33
|
+
declare const Select: ({ ariaLabel, items, sections, isMultiple, placeholder, label, secondaryAction, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled, tooltip, isDanger, isReadOnly, id, emptyState, onBlur, isRequired, tooltipLabel, action, showSearch, }: SelectProps) => JSX.Element;
|
|
33
34
|
export default Select;
|
|
@@ -7,6 +7,10 @@ export interface TooltipSelect {
|
|
|
7
7
|
id?: string;
|
|
8
8
|
position?: 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter' | 'right' | 'left';
|
|
9
9
|
}
|
|
10
|
+
export interface SelectElementSecondaryActionType {
|
|
11
|
+
text?: string;
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
}
|
|
10
14
|
export interface SelectProps {
|
|
11
15
|
/**
|
|
12
16
|
* Items to render
|
|
@@ -28,6 +32,10 @@ export interface SelectProps {
|
|
|
28
32
|
* Select Label
|
|
29
33
|
*/
|
|
30
34
|
label?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Element to show a one action on right top to the input
|
|
37
|
+
*/
|
|
38
|
+
secondaryAction?: SelectElementSecondaryActionType;
|
|
31
39
|
/**
|
|
32
40
|
* Selected data to highlight in the render of the list items
|
|
33
41
|
*/
|
package/dist/index.css
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */.Popover__container{padding:.62rem 0;visibility:hidden;z-index:9}.Popover__container__internal{background-color:#fff;border:.06rem solid #f5f6f7;border-radius:6px;box-shadow:0 6px 12px rgba(0,0,0,.1);max-height:100%;overflow:auto;padding:.25rem;z-index:10}.Popover__container--isOpen{visibility:visible}.Popover__container--absolute{position:absolute}.Popover__container--fixed{position:fixed}.Popover__full-width{overflow-x:hidden;overflow-y:auto}.Popover__content-width{max-width:-moz-max-content;max-width:max-content;min-width:-moz-max-content;min-width:max-content;width:-moz-max-content;width:max-content}
|
|
32
32
|
|
|
33
|
-
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */.Select .Tooltip__container{width:100%}.Select .AlphaTooltip{height:1.5rem;width:1.5rem}.Select__TooltipLabelContainer{margin-left:.31rem}.Select__tag-container{max-width:100%;padding:.12rem}.
|
|
33
|
+
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */.Select .Tooltip__container{width:100%}.Select .AlphaTooltip{height:1.5rem;width:1.5rem}.Select__TooltipLabelContainer{margin-left:.31rem}.Select__tag-container{max-width:100%;padding:.12rem}.Select__helperText{color:#b5bac3;font-size:.75rem;margin-top:.5rem}.Select__input-container{align-items:stretch;align-items:center;background-color:#fff;border:.06rem solid #dee1e5;border-radius:4px;color:#000;cursor:pointer;display:flex;font-size:.87rem;height:auto;justify-content:flex-start;min-height:2.25rem;outline:none;padding-right:1.5rem;position:relative;width:100%;z-index:0}.Select__input-container:hover{border:.06rem solid #b5bac3}.Select__input-container--is-focus{border:.06rem solid #0047ff;box-shadow:0 0 0 3px #e3efff;box-sizing:border-box;outline:none}.Select__input-container--is-focus:hover{border:.06rem solid #0047ff}.Select__input-container--focus-error{border:.06rem solid #dc2626;box-shadow:0 0 0 3px #fee2e2;box-sizing:border-box;outline:none}.Select__input-container--focus-error:hover{border:.06rem solid #dc2626}.Select__input-container--focus-help{background-color:#f1f7ff;border:.06rem solid #0047ff;box-sizing:border-box;outline:none}.Select__input-container--focus-help:hover{border:.06rem solid #0047ff}.Select__input-container--is-disabled{background-color:#ebedf0;border:.06rem solid #dee1e5;color:#b5bac3}.Select__input-container--is-error,.Select__input-container--is-error:hover{border:.06rem solid #dc2626}.Select__input-container--is-help{background-color:#f1f7ff;border:.06rem solid #0047ff}.Select__input-container--is-help:hover{border:.06rem solid #0047ff}.Select__input-container:focus{border:.06rem solid #0047ff;box-shadow:0 0 0 3px #e3efff;box-sizing:border-box;outline:none}.Select__input-container:focus:hover{border:.06rem solid #0047ff}.Select__icon{height:1.5rem;position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:1.5rem;z-index:-1}.Select__selected{display:flex;flex-wrap:wrap;max-width:100%;padding-bottom:.12rem;padding-left:.75rem;padding-top:.12rem}.Select__placeholder{color:#c2c6cd;cursor:default;left:.75rem;position:absolute;top:50%;transform:translateY(-50%)}.Select__search .InputText-container__inputBody svg{color:#c2c6cd}.Select--isMultiple .Select__icon{height:1.5rem;position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:1.5rem;z-index:-1}.Select__labelContainer{align-items:center;display:flex;justify-content:space-between}.Select__labelContainer--label{align-items:center;color:#000;display:flex;font-size:.87rem;font-weight:700;justify-content:center;line-height:1.5rem;padding-bottom:.5rem}.Select__labelContainer--secondaryAction{padding-bottom:.5rem}.Select__labelContainer--secondaryAction .Button--is-primary{background-color:transparent!important;color:#000;font-size:.75rem;font-weight:500}.Select .Button{align-items:center;color:inherit!important;display:flex;justify-content:center;margin:0!important;padding:0!important}.Select .Button,.Select .Button:hover{background-color:transparent!important}
|
|
34
34
|
|
|
35
35
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */.Divider{align-items:center;display:flex;padding-bottom:.75rem;padding-top:.75rem;position:relative;width:100%}.Divider:after,.Divider:before{background-color:#c2c6cd;content:"";display:block;flex:1;height:1px}.Divider:before{margin-right:.75rem}.Divider:after{margin-left:.75rem}.Divider.Divider--left:before,.Divider.Divider--right:after{display:none}.Divider__Label{color:#b5bac3;font-size:.75rem;font-weight:700}.Divider.Divider--no-label:after,.Divider.Divider--no-label:before{margin:0!important}.AlphaFilterControl{border:1px solid var(--color-border-default);border-radius:var(--radius-6)}.AlphaFilterControl__HeaderWrapper{background:var(--color-base-light-grey-10);border-radius:var(--radius-6) var(--radius-6) 0 0;font-size:var(--font-size-100);font-weight:500;line-height:1.5rem;padding:var(--spacing-3)}.AlphaFilterControl__BodyWrapper{padding:1.5rem}.AlphaFilterControl__BodyWrapper .columns{flex-wrap:wrap}.AlphaFilterControl__ActionWrapper{padding:1.5rem}
|
|
36
36
|
|