Skip to content

Commit

Permalink
fix(editablechipinput): update default state, icon buttons and close …
Browse files Browse the repository at this point in the history 
…icon

    Current PR fixes following:
    - Update default state spacing and borders
    - Remove right close icon
    - Update icon buttons to have largeIcons
  • Loading branch information
Satyam Chatterjee committed Jul 8, 2023
1 parent a3044b5 commit cd7ddbb
Show file tree
Hide file tree
Showing 9 changed files with 210 additions and 164 deletions.
3 changes: 2 additions & 1 deletion core/components/atoms/editable/Editable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import classNames from 'classnames';
import { BaseProps, extractBaseProps } from '@/utils/types';
import { EditableProvider } from '@/utils/EditableContext';

export interface EditableProps extends BaseProps {
editing?: boolean;
Expand Down Expand Up @@ -31,7 +32,7 @@ export const Editable = (props: EditableProps) => {
onMouseLeave={() => !editing && onChange('default')}
>
{/* eslint-enable */}
{children}
<EditableProvider value={{ editable: true }}>{children}</EditableProvider>
</div>
</div>
);
Expand Down
60 changes: 32 additions & 28 deletions core/components/molecules/chipInput/ChipInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import classNames from 'classnames';
import { Chip, Icon } from '@/index';
import { ChipProps } from '@/index.type';
import { BaseProps, extractBaseProps } from '@/utils/types';
import editableContext from '@/utils/EditableContext';

const keyCodes = {
BACKSPACE: 'Backspace',
Expand Down Expand Up @@ -85,6 +86,7 @@ export const ChipInput = (props: ChipInputProps) => {
const inputRef = React.createRef<HTMLInputElement>();
const [chips, setChips] = React.useState(value || defaultValue);
const [inputValue, setInputValue] = React.useState('');
const { editable } = React.useContext(editableContext);

const baseProps = extractBaseProps(props);

Expand All @@ -98,7 +100,7 @@ export const ChipInput = (props: ChipInputProps) => {
{
ChipInput: true,
['ChipInput--disabled']: disabled,
['ChipInput--withChips']: chips.length > 0,
['ChipInput--withChips']: chips && chips.length > 0,
},
className
);
Expand Down Expand Up @@ -181,7 +183,7 @@ export const ChipInput = (props: ChipInputProps) => {
type={type}
disabled={disabled}
key={index}
className="my-2 mx-2"
className="my-3 mx-2"
onClick={() => onClick && onClick(chip, index)}
onClose={() => onChipDeleteHandler(index)}
{...rest}
Expand All @@ -192,33 +194,35 @@ export const ChipInput = (props: ChipInputProps) => {
return (
/* TODO(a11y): fix accessibility */
/* eslint-disable */
<div data-test="DesignSystem-ChipInput" {...baseProps} className={ChipInputClass} onClick={onClickHandler}>
<div className="ChipInput-wrapper">
{chips && chips.length > 0 && chipComponents}
<input
data-test="DesignSystem-ChipInput--Input"
ref={inputRef}
className="ChipInput-input"
autoFocus={autoFocus}
placeholder={placeholder}
disabled={disabled}
value={inputValue}
onBlur={onBlur}
onFocus={onFocus}
onChange={onInputChangeHandler}
onKeyDown={onKeyDownHandler}
/>
{/* eslint-enable */}
<div data-test="DesignSystem-ChipInput--Border" className="ChipInput-border">
<div data-test="DesignSystem-ChipInput" {...baseProps} className={ChipInputClass} onClick={onClickHandler}>
<div className="ChipInput-wrapper">
{chips && chips.length > 0 && chipComponents}
<input
data-test="DesignSystem-ChipInput--Input"
ref={inputRef}
className="ChipInput-input"
autoFocus={autoFocus}
placeholder={chips && chips.length > 0 ? '' : placeholder}
disabled={disabled}
value={inputValue}
onBlur={onBlur}
onFocus={onFocus}
onChange={onInputChangeHandler}
onKeyDown={onKeyDownHandler}
/>
{/* eslint-enable */}
</div>
{chips.length > 0 && !editable && (
<Icon
data-test="DesignSystem-ChipInput--Icon"
name="close"
appearance="subtle"
className="ChipInput-icon"
onClick={onDeleteAllHandler}
/>
)}
</div>
{chips.length > 0 && (
<Icon
data-test="DesignSystem-ChipInput--Icon"
name="close"
appearance="subtle"
className="ChipInput-icon"
onClick={onDeleteAllHandler}
/>
)}
</div>
);
};
Expand Down
232 changes: 121 additions & 111 deletions core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,80 +6,85 @@ exports[`ChipInput component
<body>
<div>
<div
class="ChipInput ChipInput--withChips"
data-test="DesignSystem-ChipInput"
class="ChipInput-border"
data-test="DesignSystem-ChipInput--Border"
>
<div
class="ChipInput-wrapper"
class="ChipInput ChipInput--withChips"
data-test="DesignSystem-ChipInput"
>
<div
class="Chip-wrapper Chip Chip--input Chip-icon--clear my-2 mx-2"
data-test="DesignSystem-ChipInput--Chip"
tabindex="0"
class="ChipInput-wrapper"
>
<span
class="Text Text--regular color-inverse Chip-text"
data-test="DesignSystem-GenericChip--Text"
>
1020
</span>
<div
class="Chip-icon Chip-icon--right cursor-pointer"
data-test="DesignSystem-GenericChip--clearButton"
role="button"
class="Chip-wrapper Chip Chip--input Chip-icon--clear my-3 mx-2"
data-test="DesignSystem-ChipInput--Chip"
tabindex="0"
>
<i
class="material-icons material-icons-round Icon Icon--subtle p-2"
<span
class="Text Text--regular color-inverse Chip-text"
data-test="DesignSystem-GenericChip--Text"
>
1020
</span>
<div
class="Chip-icon Chip-icon--right cursor-pointer"
data-test="DesignSystem-GenericChip--clearButton"
role="button"
style="font-size: 16px; width: 16px;"
tabindex="0"
>
clear_round
</i>
<i
class="material-icons material-icons-round Icon Icon--subtle p-2"
role="button"
style="font-size: 16px; width: 16px;"
>
clear_round
</i>
</div>
</div>
</div>
<div
class="Chip-wrapper Chip Chip--input Chip-icon--clear my-2 mx-2"
data-test="DesignSystem-ChipInput--Chip"
tabindex="0"
>
<span
class="Text Text--regular color-inverse Chip-text"
data-test="DesignSystem-GenericChip--Text"
>
80
</span>
<div
class="Chip-icon Chip-icon--right cursor-pointer"
data-test="DesignSystem-GenericChip--clearButton"
role="button"
class="Chip-wrapper Chip Chip--input Chip-icon--clear my-3 mx-2"
data-test="DesignSystem-ChipInput--Chip"
tabindex="0"
>
<i
class="material-icons material-icons-round Icon Icon--subtle p-2"
<span
class="Text Text--regular color-inverse Chip-text"
data-test="DesignSystem-GenericChip--Text"
>
80
</span>
<div
class="Chip-icon Chip-icon--right cursor-pointer"
data-test="DesignSystem-GenericChip--clearButton"
role="button"
style="font-size: 16px; width: 16px;"
tabindex="0"
>
clear_round
</i>
<i
class="material-icons material-icons-round Icon Icon--subtle p-2"
role="button"
style="font-size: 16px; width: 16px;"
>
clear_round
</i>
</div>
</div>
<input
class="ChipInput-input"
data-test="DesignSystem-ChipInput--Input"
placeholder=""
value=""
/>
</div>
<input
class="ChipInput-input"
data-test="DesignSystem-ChipInput--Input"
placeholder="Add value"
value=""
/>
<i
class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
data-test="DesignSystem-ChipInput--Icon"
role="button"
style="font-size: 16px; width: 16px;"
tabindex="0"
>
close_round
</i>
</div>
<i
class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
data-test="DesignSystem-ChipInput--Icon"
role="button"
style="font-size: 16px; width: 16px;"
tabindex="0"
>
close_round
</i>
</div>
</div>
</body>
Expand All @@ -91,81 +96,86 @@ exports[`ChipInput component
<body>
<div>
<div
class="ChipInput ChipInput--disabled ChipInput--withChips"
data-test="DesignSystem-ChipInput"
class="ChipInput-border"
data-test="DesignSystem-ChipInput--Border"
>
<div
class="ChipInput-wrapper"
class="ChipInput ChipInput--disabled ChipInput--withChips"
data-test="DesignSystem-ChipInput"
>
<div
class="Chip-wrapper Chip Chip-input--disabled Chip-icon--clear my-2 mx-2"
data-test="DesignSystem-ChipInput--Chip"
tabindex="-1"
class="ChipInput-wrapper"
>
<span
class="Text Text--regular color-inverse-lightest Chip-text"
data-test="DesignSystem-GenericChip--Text"
>
1020
</span>
<div
class="Chip-icon Chip-icon--right Chip-icon-disabled--right"
data-test="DesignSystem-GenericChip--clearButton"
role="button"
class="Chip-wrapper Chip Chip-input--disabled Chip-icon--clear my-3 mx-2"
data-test="DesignSystem-ChipInput--Chip"
tabindex="-1"
>
<i
class="material-icons material-icons-round Icon Icon--disabled p-2"
<span
class="Text Text--regular color-inverse-lightest Chip-text"
data-test="DesignSystem-GenericChip--Text"
>
1020
</span>
<div
class="Chip-icon Chip-icon--right Chip-icon-disabled--right"
data-test="DesignSystem-GenericChip--clearButton"
role="button"
style="font-size: 16px; width: 16px;"
tabindex="-1"
>
clear_round
</i>
<i
class="material-icons material-icons-round Icon Icon--disabled p-2"
role="button"
style="font-size: 16px; width: 16px;"
>
clear_round
</i>
</div>
</div>
</div>
<div
class="Chip-wrapper Chip Chip-input--disabled Chip-icon--clear my-2 mx-2"
data-test="DesignSystem-ChipInput--Chip"
tabindex="-1"
>
<span
class="Text Text--regular color-inverse-lightest Chip-text"
data-test="DesignSystem-GenericChip--Text"
>
80
</span>
<div
class="Chip-icon Chip-icon--right Chip-icon-disabled--right"
data-test="DesignSystem-GenericChip--clearButton"
role="button"
class="Chip-wrapper Chip Chip-input--disabled Chip-icon--clear my-3 mx-2"
data-test="DesignSystem-ChipInput--Chip"
tabindex="-1"
>
<i
class="material-icons material-icons-round Icon Icon--disabled p-2"
<span
class="Text Text--regular color-inverse-lightest Chip-text"
data-test="DesignSystem-GenericChip--Text"
>
80
</span>
<div
class="Chip-icon Chip-icon--right Chip-icon-disabled--right"
data-test="DesignSystem-GenericChip--clearButton"
role="button"
style="font-size: 16px; width: 16px;"
tabindex="-1"
>
clear_round
</i>
<i
class="material-icons material-icons-round Icon Icon--disabled p-2"
role="button"
style="font-size: 16px; width: 16px;"
>
clear_round
</i>
</div>
</div>
<input
class="ChipInput-input"
data-test="DesignSystem-ChipInput--Input"
disabled=""
placeholder=""
value=""
/>
</div>
<input
class="ChipInput-input"
data-test="DesignSystem-ChipInput--Input"
disabled=""
placeholder="Add value"
value=""
/>
<i
class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
data-test="DesignSystem-ChipInput--Icon"
role="button"
style="font-size: 16px; width: 16px;"
tabindex="0"
>
close_round
</i>
</div>
<i
class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
data-test="DesignSystem-ChipInput--Icon"
role="button"
style="font-size: 16px; width: 16px;"
tabindex="0"
>
close_round
</i>
</div>
</div>
</body>
Expand Down
Loading

0 comments on commit cd7ddbb

Please sign in to comment.