From 5df89f0d3878ec106b4d69bf3ae9e2151a38408a Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Wed, 5 Nov 2025 11:46:16 +0100 Subject: [PATCH] feat(HotKeys): inherit type --- .changeset/hotkeys-inherit-type.md | 5 ++ .cursor/rules/documentation.mdc | 3 +- .cursor/rules/storybook.mdc | 2 +- .../content/HotKeys/HotKeys.docs.mdx | 56 +++++++++++++++ .../content/HotKeys/HotKeys.stories.tsx | 71 +++++++++++++++++++ src/components/content/HotKeys/HotKeys.tsx | 6 +- 6 files changed, 138 insertions(+), 5 deletions(-) create mode 100644 .changeset/hotkeys-inherit-type.md diff --git a/.changeset/hotkeys-inherit-type.md b/.changeset/hotkeys-inherit-type.md new file mode 100644 index 000000000..00c2a7990 --- /dev/null +++ b/.changeset/hotkeys-inherit-type.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Add `inherit` type to HotKeys component. The inherit type uses `currentColor` for both text and border, allowing the component to adapt to its parent's color context with a transparent background. diff --git a/.cursor/rules/documentation.mdc b/.cursor/rules/documentation.mdc index f05b7c375..deba5023a 100644 --- a/.cursor/rules/documentation.mdc +++ b/.cursor/rules/documentation.mdc @@ -1,8 +1,7 @@ --- -globs: *.docs.mdx +description: When updating the component documentation file *.docs.mdx alwaysApply: false --- - # Component Documentation Guidelines This guide outlines the standards and structure for documenting components in the Cube UI Kit. Following these guidelines ensures consistency, clarity, and comprehensive coverage of component features. diff --git a/.cursor/rules/storybook.mdc b/.cursor/rules/storybook.mdc index 779bc2903..934995537 100644 --- a/.cursor/rules/storybook.mdc +++ b/.cursor/rules/storybook.mdc @@ -1,5 +1,5 @@ --- -globs: *.stories.tsx,*.docs.mdx +description: When updating storybook files and documentatino files *.stories.tsx, *.docs.mdx alwaysApply: false --- ## Imports diff --git a/src/components/content/HotKeys/HotKeys.docs.mdx b/src/components/content/HotKeys/HotKeys.docs.mdx index 5980f46b1..59ff37dad 100644 --- a/src/components/content/HotKeys/HotKeys.docs.mdx +++ b/src/components/content/HotKeys/HotKeys.docs.mdx @@ -43,6 +43,18 @@ Customizes the root element of the component (Space component). These properties allow direct style application without using the `styles` prop: `width`, `height`, `padding`, `margin`, `gap`, `flow`, `placeContent`, `placeItems`. +#### type + +Defines the visual appearance of the keyboard shortcuts. + +**Type:** `'default' | 'primary' | 'inherit'` + +**Default:** `'default'` + +- `default` - Standard appearance with subtle background and border +- `primary` - High contrast appearance with white text and border on transparent background +- `inherit` - Adapts to parent's text color for both text and border, transparent background + ### Accessibility Properties #### label @@ -67,6 +79,50 @@ The `mods` property accepts standard Space component modifiers. mod+k ``` +### Types + +The HotKeys component supports different visual types: + +#### Default Type + + + +```jsx +mod+k +``` + +#### Primary Type + + + +```jsx +mod+k +``` + +#### Inherit Type + +The `inherit` type uses the current text color for the border and text, making it adapt to its parent's color context. + + + +```jsx +mod+k +``` + +#### Inherit Type in Context + +The inherit type is particularly useful when the HotKeys component needs to match the surrounding text color: + + + +```jsx +
+ Press + mod+k + to search +
+``` + ### With Accessibility Labels diff --git a/src/components/content/HotKeys/HotKeys.stories.tsx b/src/components/content/HotKeys/HotKeys.stories.tsx index 59cb23d13..9c1337db8 100644 --- a/src/components/content/HotKeys/HotKeys.stories.tsx +++ b/src/components/content/HotKeys/HotKeys.stories.tsx @@ -15,6 +15,18 @@ export default { type: { summary: 'string' }, }, }, + type: { + control: { + type: 'select', + }, + options: ['default', 'primary', 'inherit'], + description: + 'Visual appearance type: default (subtle), primary (high contrast), or inherit (adapts to parent color)', + table: { + type: { summary: "'default' | 'primary' | 'inherit'" }, + defaultValue: { summary: 'default' }, + }, + }, 'aria-label': { control: { type: 'text', @@ -118,3 +130,62 @@ WithCustomStyles.args = { radius: '1r', }, }; + +export const Primary: StoryFn = (args) => ( +
+ +
+); +Primary.args = { + children: 'mod+k', + type: 'primary', + 'aria-label': 'Search', +}; + +export const Inherit = Template.bind({}); +Inherit.args = { + children: 'mod+k', + type: 'inherit', + 'aria-label': 'Search', +}; + +export const InheritInContext: StoryFn = () => ( +
+
+ Press + + mod+k + + to search (blue context) +
+
+ Press + + delete + + to delete (red context) +
+
+ Press + + mod+s + + to save (green context) +
+
+ Press + + mod+shift+p + + for commands (purple context) +
+
+); +InheritInContext.parameters = { + docs: { + description: { + story: + "The inherit type adapts to the parent element's text color, making it perfect for use within colored text contexts.", + }, + }, +}; diff --git a/src/components/content/HotKeys/HotKeys.tsx b/src/components/content/HotKeys/HotKeys.tsx index 816dc7176..bb386f461 100644 --- a/src/components/content/HotKeys/HotKeys.tsx +++ b/src/components/content/HotKeys/HotKeys.tsx @@ -42,14 +42,16 @@ const KeyElement = tasty({ color: { '': '#dark.65', 'type=primary': '#white', + 'type=inherit': 'currentColor', }, fill: { '': '#dark.04', - 'type=primary': '#clear', + 'type=primary | type=inherit': '#clear', }, border: { '': true, 'type=primary': '#white', + 'type=inherit': 'currentColor', }, }, }); @@ -58,7 +60,7 @@ export interface CubeHotKeysProps extends BasePropsWithoutChildren, ContainerStyleProps { children: string; - type?: 'default' | 'primary'; + type?: 'default' | 'primary' | 'inherit'; } function HotKeys(props: CubeHotKeysProps, ref) {