diff --git a/README.md b/README.md index 6e318638..81dc6782 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ A collection of UI elements. [`@viamrobotics/prime-core`][core] - Core components. Exported as Svelte components. -[`@viamrobotics/prime-blocks`][blocks] - Large blocks of UI that often have dependencies like [Threlte][]. Exported as Svelte components. +[`@viamrobotics/prime-blocks`][blocks] - Large blocks of UI that often have dependencies like [Threlte][threlte]. Exported as Svelte components. [legacy]: https://github.com/viamrobotics/prime/tree/main/packages/legacy [core]: https://github.com/viamrobotics/prime/tree/main/packages/core diff --git a/packages/core/package.json b/packages/core/package.json index 5fd4af87..23f7a252 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@viamrobotics/prime-core", - "version": "0.0.75", + "version": "0.0.76", "publishConfig": { "access": "public" }, diff --git a/packages/core/src/lib/button/icon-button.svelte b/packages/core/src/lib/button/icon-button.svelte index cddfa6bb..e9cebc66 100644 --- a/packages/core/src/lib/button/icon-button.svelte +++ b/packages/core/src/lib/button/icon-button.svelte @@ -29,12 +29,6 @@ export let type: 'button' | 'submit' | 'reset' = 'button'; /** The communicated action type to the user. */ export let variant: 'primary' | 'danger' = 'primary'; -/** - * The text that appears in a native popup box on hover. Defaults to the value - * of `label`. - */ -export let title = label; - /** Additional CSS classes to pass to the button. */ let extraClasses: cx.Argument = ''; export { extraClasses as cx }; @@ -46,7 +40,6 @@ $: handleDisabled = preventHandler(disabled); {type} aria-label={label} aria-disabled={disabled ? true : undefined} - {title} class={cx( 'inline-flex h-7.5 w-7.5 select-none items-center justify-center whitespace-nowrap', { @@ -55,7 +48,7 @@ $: handleDisabled = preventHandler(disabled); 'cursor-not-allowed text-gray-4': disabled, 'hover:text-gray-7 active:text-gray-8': variant === 'primary' && !disabled, - 'hover:bg-[rgba(190,53,54,0.08)] hover:text-danger-dark active:bg-[rgba(190,53,54,0.16)] active:text-danger-dark': + 'hover:bg-danger-dark hover:bg-opacity-[0.08] hover:text-danger-dark active:bg-[rgba(190,53,54,0.16)] active:text-danger-dark': variant === 'danger' && !disabled, }, extraClasses diff --git a/packages/core/src/lib/icon/icon.svelte b/packages/core/src/lib/icon/icon.svelte index c8f01461..0acc649c 100644 --- a/packages/core/src/lib/icon/icon.svelte +++ b/packages/core/src/lib/icon/icon.svelte @@ -51,6 +51,7 @@ const hasNameProperty = Object.hasOwn(paths, name); --> + + + + diff --git a/packages/storybook/src/stories/banner.stories.svelte b/packages/storybook/src/stories/banner.stories.svelte index e14431ce..3adfbb23 100644 --- a/packages/storybook/src/stories/banner.stories.svelte +++ b/packages/storybook/src/stories/banner.stories.svelte @@ -6,48 +6,72 @@ import { Button, Banner } from '@viamrobotics/prime-core'; - + Info message - Here is some helpful information. This message should be no longer than - three lines of text. - This is the action link. + + Here is some helpful information. This message should be no longer than + three lines of text. + + + View details + - + Success message - Here is some helpful information. This message should be no longer than - three lines of text. - - + + Here is some helpful information. This message should be no longer than + three lines of text. - + Warning message - Here is some helpful information. This message should be no longer than - three lines of text. + + Here is some helpful information. This message should be no longer than + three lines of text. + - + + Danger message + + Here is some helpful information. This message should be no longer than + three lines of text. + + + + + + Danger message - Here is some helpful information. This message should be no longer than - three lines of text. + + Here is some helpful information. This message should be no longer than + three lines of text. + + + + diff --git a/packages/storybook/src/stories/code-snippet.stories.svelte b/packages/storybook/src/stories/code-snippet.stories.svelte index 12dbd6b0..243f1e98 100644 --- a/packages/storybook/src/stories/code-snippet.stories.svelte +++ b/packages/storybook/src/stories/code-snippet.stories.svelte @@ -211,8 +211,8 @@ fn main() { }] `.trim()} > - Check out this cool captioned JSON! + + Check out this cool captioned JSON! + diff --git a/packages/storybook/src/stories/context-menu.mdx b/packages/storybook/src/stories/context-menu.mdx index 10859487..87a619fa 100644 --- a/packages/storybook/src/stories/context-menu.mdx +++ b/packages/storybook/src/stories/context-menu.mdx @@ -16,8 +16,9 @@ import { ``` -
- - -
+ +
+ + + diff --git a/packages/storybook/src/stories/context-menu.stories.svelte b/packages/storybook/src/stories/context-menu.stories.svelte index 7a268ca5..be8069bf 100644 --- a/packages/storybook/src/stories/context-menu.stories.svelte +++ b/packages/storybook/src/stories/context-menu.stories.svelte @@ -5,6 +5,7 @@ import { ContextMenuItem, ContextMenuSeparator, FloatingMenu, + IconButton, uniqueId, } from '@viamrobotics/prime-core'; @@ -20,42 +21,47 @@ const setFloatingMenuOpen = (isOpen: boolean) => { - - Just a label - With icon + + Restart + View more info - Primary - Danger + Delete - - - {floatingMenuOpen ? 'Close menu' : 'Open menu'} - - - Just a label - With icon - - Primary - setFloatingMenuOpen(false)} - > - Danger - - - +
+ + + + + + Restart + View more info + + + Delete + + + +
diff --git a/packages/storybook/src/stories/icon-button.mdx b/packages/storybook/src/stories/icon-button.mdx index f8e29f56..3787782a 100644 --- a/packages/storybook/src/stories/icon-button.mdx +++ b/packages/storybook/src/stories/icon-button.mdx @@ -22,7 +22,3 @@ import { IconButton } from '@viamrobotics/prime-core'; - - - - diff --git a/packages/storybook/src/stories/icon-button.stories.svelte b/packages/storybook/src/stories/icon-button.stories.svelte index f0a8eb94..b8beefe0 100644 --- a/packages/storybook/src/stories/icon-button.stories.svelte +++ b/packages/storybook/src/stories/icon-button.stories.svelte @@ -7,31 +7,23 @@ import { IconButton } from '@viamrobotics/prime-core'; - - - - diff --git a/packages/storybook/src/stories/input.mdx b/packages/storybook/src/stories/input.mdx index 275b106b..f6c83920 100644 --- a/packages/storybook/src/stories/input.mdx +++ b/packages/storybook/src/stories/input.mdx @@ -5,8 +5,8 @@ import * as InputStories from './input.stories.svelte'; # Input -A simple user input. We use this input to build all of the other input types, -so it is rarely beneificial to use this over the more specific varities. +A simple user input. We use this input to build all of the other input types. +This is ideal for text, email, and password fields. ```ts import { Input } from '@viamrobotics/prime-core'; @@ -29,18 +29,6 @@ import { Input } from '@viamrobotics/prime-core'; -# Text Input - -A user input for text values. This is ideal for text, email, and password fields. - -```ts -import { TextInput } from '@viamrobotics/prime-core'; -``` - - - - - # Restricted Text Input An opinionated input for text values that only allows specified regex. The allowed characters are specified by the `restrictInput` function. @@ -96,5 +84,5 @@ import { RangeInput } from '@viamrobotics/prime-core'; ``` - + diff --git a/packages/storybook/src/stories/input.stories.svelte b/packages/storybook/src/stories/input.stories.svelte index f2fb8441..6e1cb5c5 100644 --- a/packages/storybook/src/stories/input.stories.svelte +++ b/packages/storybook/src/stories/input.stories.svelte @@ -7,7 +7,6 @@ import { RangeInput, RestrictedTextInput, SliderInput, - TextInput, } from '@viamrobotics/prime-core'; const restrictInput = (inputValue: string) => @@ -17,22 +16,25 @@ const restrictInput = (inputValue: string) => - + - - - - -
+
- + - + - +