[UIK-4336][inline-input] added handlers for Escape on buttons

semcore/inline-input/src/InlineInput.tsx

@@ -64,6 +64,7 @@ type ControlAsProps = {
 };
 type ConfirmControlAsProps = ControlAsProps & {
   onConfirm?: OnConfirm;
+  onCancel?: OnCancel;
   inputRef?: React.RefObject<HTMLInputElement>;
 };
 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);

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,43 +53,29 @@ 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.
 
 ![](static/hint2.png)
 
 ![](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