diff --git a/semcore/inline-input/src/InlineInput.tsx b/semcore/inline-input/src/InlineInput.tsx index e804bb1e9d..951f231f56 100644 --- a/semcore/inline-input/src/InlineInput.tsx +++ b/semcore/inline-input/src/InlineInput.tsx @@ -64,6 +64,7 @@ type ControlAsProps = { }; type ConfirmControlAsProps = ControlAsProps & { onConfirm?: OnConfirm; + onCancel?: OnCancel; inputRef?: React.RefObject; }; type CancelControlAsProps = ControlAsProps & { @@ -163,6 +164,7 @@ class InlineInputBase extends Component< inputRef: this.inputRef, loading, onConfirm: this.handleConfirm, + onCancel: this.handleCancel, getI18nText, }; } @@ -324,7 +326,7 @@ function Addon(props: AddonAsProps) { function ConfirmControl(props: ConfirmControlAsProps) { const SAddon = Root; - const { Children, children: hasChildren, inputRef } = props; + const { Children, children: hasChildren, inputRef, onCancel } = props; const title = props.title ?? props.getI18nText('confirm'); const handleConfirm = React.useCallback( @@ -341,6 +343,11 @@ function ConfirmControl(props: ConfirmControlAsProps) { event.stopPropagation(); handleConfirm(event); } + if (event.key === 'Escape') { + event.preventDefault(); + event.stopPropagation(); + onCancel?.(inputRef?.current?.value ?? '', event); + } }, [handleConfirm], ); @@ -388,7 +395,7 @@ function CancelControl(props: CancelControlAsProps) { const handleKeydown = React.useCallback( (event: React.KeyboardEvent) => { - if (event.key === 'Enter' || event.key === ' ') { + if (event.key === 'Enter' || event.key === ' ' || event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); handleCancel(event); diff --git a/website/docs/components/inline-input/inline-input.md b/website/docs/components/inline-input/inline-input.md index 58591b3300..ebd721c436 100644 --- a/website/docs/components/inline-input/inline-input.md +++ b/website/docs/components/inline-input/inline-input.md @@ -26,34 +26,20 @@ Don’t use such an input in a [form](/patterns/form/form) along with regular in InlineInput itself doesn't have a set sizes. You can set its height and font size that suit your use case. -### Styles - -The color of the placeholder is the same as a regular input has - `--text-placeholder`. - -![](static/normal-placeholder.png) - -![](static/focus.png) - -### Paddings - -![](static/paddings.png) - ## Addons Addons are slots inside the input to the left or right of the text for additional visual or interactive elements. ### Leading addon -- In the left addon, you can only put a non-clickable icon/flag/avatar/etc. -- Icon use `--icon-secondary-neutral` token for color, no hover, normal cursor. -- **Notice the leading addon is underlined too**. +In the left addon, you can only put a non-clickable icon/flag/avatar/etc. Table: Leading addon styles -| Font size | Appearance example | Margins | Icon size and color | -| ------------------------------------------------------------------ | ----------------------------------- | ----------------------------------------- | ---------------------------------------------- | -| For components with font size less than 24px (including this size) | ![](static/leading-addon-focus.png) | ![](static/leading-addon-margins.png) | M size, `color: var(--icon-secondary-neutral)` | -| For components with font size larger than 24px | ![](static/leading-addon-big.png) | ![](static/leading-addon-big-margins.png) | L size, `color: var(--icon-secondary-neutral)` | +| Font size | Appearance example | Icon size and color | +| ------------------------------------------------------------------ | ----------------------------------- | ---------------------------------------------- | +| For components with font size less than 24px (including this size) | ![](static/leading-addon-focus.png) | M size, `color: var(--icon-secondary-neutral)` | +| For components with font size larger than 24px | ![](static/leading-addon-big.png) | L size, `color: var(--icon-secondary-neutral)` | ### Label @@ -67,17 +53,16 @@ The color of the placeholder is the same as a regular input has - `--text-placeh ### Trailing addon -Trailing addons are clickable icons to save input and cancel and return to view mode. -The save icon is always has `--icon-secondary-success` token as color, the cancel icon – `--icon-secondary-neutral`. +Trailing addons use the [ButtonLink](/components/button/button-code#button-looking-like-link) component to save, cancel, or return to view mode. Table: Trailing addon styles -| Font size | Appearance example | Margins | Icon size | -| ------------------------------------------------------------------ | ------------------------------------------ | -------------------------- | --------- | -| For components with font size less than 24px (including this size) | ![](static/trailing-addon-margins.png) | ![](static/small-text.png) | M | -| For components with font size larger than 24px | ![](static/trailing-addon-big-margins.png) | ![](static/big-text.png) | L | +| Font size | Appearance example | Icon size | +| ------------------------------------------------------------------ | ------------------------------------------ | --------- | +| For components with font size less than 24px (including this size) | ![](static/small-text.png) | M | +| For components with font size larger than 24px | ![](static/big-text.png) | L | -## Tooltip +### Tooltip For save and cancel button icons on hover, it's important to show a tooltip that tells a user what they're doing. @@ -85,25 +70,12 @@ For save and cancel button icons on hover, it's important to show a tooltip that ![](static/hint1.png) -## Save and Cancel actions +### Save and Cancel actions In some cases, where space allows and there is a need to show regular buttons, you can hide control icons. ![](static/buttons.png) -## Icon-only buttons - -For the default state of the icons use the following tokens: - -- `--icon-secondary-success` -- `--icon-secondary-neutral` - -On hover, the icons change their color to to the darker one using CSS filter. - -![](static/tooltip2.png) - -![](static/tooltip1.png) - ## Interaction InlineInput can take on the same states as a [normal input](/components/input/input), except for the normal, read-only, and disabled states. @@ -113,18 +85,6 @@ InlineInput can take on the same states as a [normal input](/components/input/in - The user enters data. Either saves the data, or using the cancel button / `Esc` key returns from edit mode to view mode. - When focus is lost (for example, the user is distracted by another screen), `onBlur` saves the entered value. -Table: InlineInput states - -| State | Appearance example | Styles | -| ------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Normal | ![](static/normal.png) | `border-bottom: 1px solid var(--border-primary)` | -| Focus | ![](static/focus.png) | `border-bottom: 1px solid var(--border-info-active)`, `box-shadow: var(--keyboard-focus)` | -| Invalid | ![](static/invalid.png) | `border-bottom: 1px solid var(--border-danger-active)` | -| Invalid focus | ![](static/invalid-focus.png) | `border-bottom: 1px solid var(--border-danger-active)`, `box-shadow: var(--keyboard-focus-invalid)` | -| Valid | ![](static/valid.png) | `border-bottom: 1px solid var(--border-success-active)` | -| Valid focus | ![](static/valid-focus.png) | `border-bottom: 1px solid var(--border-success-active)`, `box-shadow: var(--keyboard-focus-valid)` | -| Loading | ![](static/loading.png) | Spin with XS size. The cancel button gets the disabled state while the input is loading (use [`--disabled-opacity`](/style/design-tokens/design-tokens) token). | - ## Usage in UX/UI ### Font size diff --git a/website/docs/components/inline-input/static/disabled.png b/website/docs/components/inline-input/static/disabled.png deleted file mode 100644 index 378d834c55..0000000000 Binary files a/website/docs/components/inline-input/static/disabled.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/focus.png b/website/docs/components/inline-input/static/focus.png deleted file mode 100644 index bd2e520c01..0000000000 Binary files a/website/docs/components/inline-input/static/focus.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/invalid-focus.png b/website/docs/components/inline-input/static/invalid-focus.png deleted file mode 100644 index 3b3819dd9e..0000000000 Binary files a/website/docs/components/inline-input/static/invalid-focus.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/invalid.png b/website/docs/components/inline-input/static/invalid.png deleted file mode 100644 index d3fa58ebd0..0000000000 Binary files a/website/docs/components/inline-input/static/invalid.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/leading-addon-big-margins.png b/website/docs/components/inline-input/static/leading-addon-big-margins.png deleted file mode 100644 index 053f18005e..0000000000 Binary files a/website/docs/components/inline-input/static/leading-addon-big-margins.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/leading-addon-invalid-focus.png b/website/docs/components/inline-input/static/leading-addon-invalid-focus.png deleted file mode 100644 index 70d9dd318e..0000000000 Binary files a/website/docs/components/inline-input/static/leading-addon-invalid-focus.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/leading-addon-invalid.png b/website/docs/components/inline-input/static/leading-addon-invalid.png deleted file mode 100644 index a39c3921c2..0000000000 Binary files a/website/docs/components/inline-input/static/leading-addon-invalid.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/leading-addon-margins.png b/website/docs/components/inline-input/static/leading-addon-margins.png deleted file mode 100644 index 2709abacfd..0000000000 Binary files a/website/docs/components/inline-input/static/leading-addon-margins.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/leading-addon-normal-big.png b/website/docs/components/inline-input/static/leading-addon-normal-big.png deleted file mode 100644 index c2f5740f8e..0000000000 Binary files a/website/docs/components/inline-input/static/leading-addon-normal-big.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/leading-addon-normal.png b/website/docs/components/inline-input/static/leading-addon-normal.png deleted file mode 100644 index 0486cb8fce..0000000000 Binary files a/website/docs/components/inline-input/static/leading-addon-normal.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/leading-addon-valid-focus.png b/website/docs/components/inline-input/static/leading-addon-valid-focus.png deleted file mode 100644 index dec30a5181..0000000000 Binary files a/website/docs/components/inline-input/static/leading-addon-valid-focus.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/leading-addon-valid.png b/website/docs/components/inline-input/static/leading-addon-valid.png deleted file mode 100644 index a4e515b2fa..0000000000 Binary files a/website/docs/components/inline-input/static/leading-addon-valid.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/loading.png b/website/docs/components/inline-input/static/loading.png deleted file mode 100644 index 58bea5b893..0000000000 Binary files a/website/docs/components/inline-input/static/loading.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/normal-placeholder.png b/website/docs/components/inline-input/static/normal-placeholder.png deleted file mode 100644 index 03b8f6d179..0000000000 Binary files a/website/docs/components/inline-input/static/normal-placeholder.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/normal.png b/website/docs/components/inline-input/static/normal.png deleted file mode 100644 index 6eb67473ea..0000000000 Binary files a/website/docs/components/inline-input/static/normal.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/paddings.png b/website/docs/components/inline-input/static/paddings.png deleted file mode 100644 index 59df02a9d4..0000000000 Binary files a/website/docs/components/inline-input/static/paddings.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/tooltip1.png b/website/docs/components/inline-input/static/tooltip1.png deleted file mode 100644 index d8eebd310d..0000000000 Binary files a/website/docs/components/inline-input/static/tooltip1.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/tooltip2.png b/website/docs/components/inline-input/static/tooltip2.png deleted file mode 100644 index e9452ee81e..0000000000 Binary files a/website/docs/components/inline-input/static/tooltip2.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/trailing-addon-big-margins.png b/website/docs/components/inline-input/static/trailing-addon-big-margins.png deleted file mode 100644 index 0cf94581a0..0000000000 Binary files a/website/docs/components/inline-input/static/trailing-addon-big-margins.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/trailing-addon-margins.png b/website/docs/components/inline-input/static/trailing-addon-margins.png deleted file mode 100644 index 8224716e17..0000000000 Binary files a/website/docs/components/inline-input/static/trailing-addon-margins.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/valid-focus.png b/website/docs/components/inline-input/static/valid-focus.png deleted file mode 100644 index 8ff9795a4a..0000000000 Binary files a/website/docs/components/inline-input/static/valid-focus.png and /dev/null differ diff --git a/website/docs/components/inline-input/static/valid.png b/website/docs/components/inline-input/static/valid.png deleted file mode 100644 index 9b2358a59a..0000000000 Binary files a/website/docs/components/inline-input/static/valid.png and /dev/null differ