From e28e0830f989fbe2335cac9547bec831fe5ee4d7 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Wed, 14 Aug 2024 15:53:21 +0200 Subject: [PATCH 1/9] feat: add size prop to button --- .../stories/public/orama-search-button.stories.tsx | 11 ++++++++++- packages/ui-stencil-vue/lib/components.ts | 2 ++ packages/ui-stencil/src/components.d.ts | 4 ++++ .../internal/orama-button/orama-button.scss | 13 ++++++++++++- .../internal/orama-button/orama-button.tsx | 3 ++- .../src/components/internal/orama-button/readme.md | 1 + .../src/components/orama-chat-box/readme.md | 2 +- .../src/components/orama-search-box/readme.md | 2 +- .../orama-search-button/orama-search-button.scss | 6 ++++++ .../orama-search-button/orama-search-button.tsx | 7 +++++-- .../src/components/orama-search-button/readme.md | 1 + 11 files changed, 45 insertions(+), 7 deletions(-) diff --git a/apps/storybook/stories/public/orama-search-button.stories.tsx b/apps/storybook/stories/public/orama-search-button.stories.tsx index 70595df1..68a9aea1 100644 --- a/apps/storybook/stories/public/orama-search-button.stories.tsx +++ b/apps/storybook/stories/public/orama-search-button.stories.tsx @@ -26,6 +26,13 @@ const meta: Meta< }, }, }, + size: { + options: ['small', 'medium', 'large'], + table: { + defaultValue: { summary: 'medium' }, + }, + control: { type: 'radio' }, + }, openSearchbox: { table: { defaultValue: { summary: 'false' }, @@ -44,7 +51,8 @@ type Story = StoryObj const Template = (label: string) => (args) => { const [{ openSearchbox }, updateArgs] = useArgs() - window.addEventListener('searchboxClosed', () => { + const searchbox = document.getElementById('orama-ui-search-box') + searchbox?.addEventListener('searchboxClosed', () => { updateArgs({ openSearchbox: false }) }) @@ -55,6 +63,7 @@ const Template = (label: string) => (args) => { label="${args.label}" id="orama-ui-search-button" .colorScheme=${args.colorScheme} + .size=${args.size} .onclick=${() => { updateArgs({ openSearchbox: !openSearchbox }) }} diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 9f848cc2..a7c3fb21 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -12,6 +12,7 @@ export const OramaButton = /*@__PURE__*/ defineContainer('orama 'as', 'class', 'variant', + 'size', 'type', 'disabled', 'withTooltip' @@ -147,6 +148,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer( export const OramaSearchButton = /*@__PURE__*/ defineContainer('orama-search-button', undefined, [ + 'size', 'themeConfig', 'colorScheme' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index 123fdd38..d8d39ebb 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -34,6 +34,7 @@ export namespace Components { "as"?: ButtonProps['as']; "class"?: string; "disabled"?: boolean; + "size": 'small' | 'medium' | 'large'; "type"?: ButtonProps['type']; "variant"?: ButtonProps['variant']; "withTooltip"?: string; @@ -132,6 +133,7 @@ export namespace Components { } interface OramaSearchButton { "colorScheme"?: ColorScheme; + "size": 'small' | 'medium' | 'large'; "themeConfig"?: Partial; } interface OramaSearchResults { @@ -424,6 +426,7 @@ declare namespace LocalJSX { "as"?: ButtonProps['as']; "class"?: string; "disabled"?: boolean; + "size"?: 'small' | 'medium' | 'large'; "type"?: ButtonProps['type']; "variant"?: ButtonProps['variant']; "withTooltip"?: string; @@ -527,6 +530,7 @@ declare namespace LocalJSX { } interface OramaSearchButton { "colorScheme"?: ColorScheme; + "size"?: 'small' | 'medium' | 'large'; "themeConfig"?: Partial; } interface OramaSearchResults { diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss index bc29579f..c7b96db7 100644 --- a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss +++ b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss @@ -6,7 +6,6 @@ align-items: center; border-radius: var(--radius-m, $radius-m); border: 0; - padding: var(--spacing-m, $spacing-m); cursor: pointer; font-family: var(--font-primary, font('primary')); transition: all 0.2s; @@ -29,6 +28,18 @@ } } +.button--small { + padding: var(--spacing-xs, $spacing-xs); +} + +.button--medium { + padding: var(--spacing-s, $spacing-s); +} + +.button--large { + padding: var(--spacing-m, $spacing-m); +} + .button__label { display: flex; align-items: center; diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx index 41e1ab8c..f744d04a 100644 --- a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx +++ b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx @@ -38,6 +38,7 @@ export class OramaButton { @Prop() as?: ButtonProps['as'] = 'button' @Prop() class?: string @Prop() variant?: ButtonProps['variant'] = 'primary' + @Prop() size: 'small' | 'medium' | 'large' = 'medium' @Prop() type?: ButtonProps['type'] @Prop() disabled?: boolean @Prop() withTooltip?: string @@ -47,7 +48,7 @@ export class OramaButton { const declaredProps = ['as', 'class', 'variant'] const buttonProps = getNonExplicitAttributes(this.el, declaredProps) - const buttonClass = `button button--${this.variant} ${this.class}` + const buttonClass = `button button--${this.variant} button--${this.size} ${this.class || ''}` return ( diff --git a/packages/ui-stencil/src/components/internal/orama-button/readme.md b/packages/ui-stencil/src/components/internal/orama-button/readme.md index 17016e05..ed62bd11 100644 --- a/packages/ui-stencil/src/components/internal/orama-button/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-button/readme.md @@ -12,6 +12,7 @@ | `as` | `as` | | `"a" \| "button"` | `'button'` | | `class` | `class` | | `string` | `undefined` | | `disabled` | `disabled` | | `boolean` | `undefined` | +| `size` | `size` | | `"large" \| "medium" \| "small"` | `'medium'` | | `type` | `type` | | `"button" \| "reset" \| "submit"` | `undefined` | | `variant` | `variant` | | `"icon" \| "primary" \| "secondary"` | `'primary'` | | `withTooltip` | `with-tooltip` | | `string` | `undefined` | diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md index 5a93b070..4cc80200 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -12,7 +12,7 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `placeholder` | `placeholder` | | `string` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | | `suggestions` | -- | | `string[]` | `undefined` | diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index f1a4d414..4db2b2c0 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -13,7 +13,7 @@ | `open` | `open` | | `boolean` | `false` | | `placeholder` | `placeholder` | | `string` | `undefined` | | `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` | -| `searchParams` | -- | | `SearchParamsFullText, never> \| SearchParamsHybrid, never> \| SearchParamsVector, never>` | `undefined` | +| `searchParams` | -- | | `SearchParamsFullText, never> \| SearchParamsHybrid, never> \| SearchParamsVector, never>` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | | `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | | `suggestions` | -- | | `string[]` | `undefined` | diff --git a/packages/ui-stencil/src/components/orama-search-button/orama-search-button.scss b/packages/ui-stencil/src/components/orama-search-button/orama-search-button.scss index 5d4e87f3..d8eaa7ee 100644 --- a/packages/ui-stencil/src/components/orama-search-button/orama-search-button.scss +++ b/packages/ui-stencil/src/components/orama-search-button/orama-search-button.scss @@ -1,3 +1,9 @@ :host { display: block; } + +.kyb-shortcut { + background-color: var(--background-color-tertiary, background-color('tertiary')); + border-radius: var(--radius-s, $radius-s); + padding: var(--spacing-xs, $spacing-xs) var(--spacing-s, $spacing-xs); +} diff --git a/packages/ui-stencil/src/components/orama-search-button/orama-search-button.tsx b/packages/ui-stencil/src/components/orama-search-button/orama-search-button.tsx index dadbc251..8f8fd60c 100644 --- a/packages/ui-stencil/src/components/orama-search-button/orama-search-button.tsx +++ b/packages/ui-stencil/src/components/orama-search-button/orama-search-button.tsx @@ -16,6 +16,7 @@ export type ButtonClick = { export class OramaSearchButton { @Element() el: HTMLElement + @Prop() size: 'small' | 'medium' | 'large' = 'medium' @Prop() themeConfig?: Partial @Prop() colorScheme?: ColorScheme = 'light' @@ -95,12 +96,14 @@ export class OramaSearchButton { render() { return ( - (this.buttonRef = el)}> + (this.buttonRef = el)} size={this.size}> - {this.shortcutLabel} + + {this.shortcutLabel} + ) diff --git a/packages/ui-stencil/src/components/orama-search-button/readme.md b/packages/ui-stencil/src/components/orama-search-button/readme.md index 65b1822a..ebbac399 100644 --- a/packages/ui-stencil/src/components/orama-search-button/readme.md +++ b/packages/ui-stencil/src/components/orama-search-button/readme.md @@ -10,6 +10,7 @@ | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `size` | `size` | | `"large" \| "medium" \| "small"` | `'medium'` | | `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-background-color-inactive": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; }; }>; }` | `undefined` | From 92c3bcc1f8f94778273f45f300851c028ef119b4 Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Fri, 16 Aug 2024 11:00:34 +0200 Subject: [PATCH 2/9] style: fix span font-size and chips spacings --- .../orama-chat-suggestions/orama-chat-suggestions.scss | 6 +----- .../ui-stencil/src/components/internal/orama-chat/readme.md | 2 +- packages/ui-stencil/src/components/orama-chat-box/readme.md | 2 +- .../ui-stencil/src/components/orama-search-box/readme.md | 4 ++-- packages/ui-stencil/src/styles/_mixins.scss | 4 ---- 5 files changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss b/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss index 3d8c4343..cc96c106 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss @@ -30,7 +30,7 @@ cursor: pointer; border-radius: var(--radius-l, $radius-l); border: 1px solid var(--border-color-primary, border-color('primary')); - padding: var(--spacing-m, $spacing-m) var(--spacing-m, $spacing-m); + padding: var(--spacing-s, $spacing-s); display: flex; align-items: center; column-gap: var(--spacing-s, $spacing-s); @@ -49,10 +49,6 @@ outline: none; border: 1px solid var(--border-color-accent, border-color('accent')); } - - @media (--md-min) { - padding: var(--spacing-xs, $spacing-xs) var(--spacing-m, $spacing-m); - } } .suggestions-list { diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md index d977c94c..1ce294d0 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/readme.md +++ b/packages/ui-stencil/src/components/internal/orama-chat/readme.md @@ -14,7 +14,7 @@ | `placeholder` | `placeholder` | | `string` | `'Ask me anything'` | | `showClearChat` | `show-clear-chat` | | `boolean` | `true` | | `sourceBaseUrl` | `source-base-url` | | `string` | `''` | -| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | | `suggestions` | -- | | `string[]` | `undefined` | diff --git a/packages/ui-stencil/src/components/orama-chat-box/readme.md b/packages/ui-stencil/src/components/orama-chat-box/readme.md index 4cc80200..5a93b070 100644 --- a/packages/ui-stencil/src/components/orama-chat-box/readme.md +++ b/packages/ui-stencil/src/components/orama-chat-box/readme.md @@ -12,7 +12,7 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `placeholder` | `placeholder` | | `string` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | | `suggestions` | -- | | `string[]` | `undefined` | diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index 4db2b2c0..23123d91 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -12,10 +12,10 @@ | `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | | `open` | `open` | | `boolean` | `false` | | `placeholder` | `placeholder` | | `string` | `undefined` | -| `resultMap` | -- | | `{ title?: string; description?: string; path?: string; section?: string; }` | `{}` | +| `resultMap` | -- | | `{ section?: string; title?: string; path?: string; description?: string; }` | `{}` | | `searchParams` | -- | | `SearchParamsFullText, never> \| SearchParamsHybrid, never> \| SearchParamsVector, never>` | `undefined` | | `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; description?: string; path?: string; }` | `undefined` | +| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | | `suggestions` | -- | | `string[]` | `undefined` | | `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-background-color-inactive": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; }; }>; }` | `undefined` | diff --git a/packages/ui-stencil/src/styles/_mixins.scss b/packages/ui-stencil/src/styles/_mixins.scss index 6d76485a..d2c91d71 100644 --- a/packages/ui-stencil/src/styles/_mixins.scss +++ b/packages/ui-stencil/src/styles/_mixins.scss @@ -77,10 +77,6 @@ margin: 0; padding: 0; - @media (--md-min) { - font-size: var(--font-size-xs, $font-size-xs); - } - @if $variant == 'primary' { color: var(--text-color-primary, text-color('primary')); } From 11fede3d5a9672369e3aaa14b4bdb91a78d94e3c Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Fri, 16 Aug 2024 11:35:38 +0200 Subject: [PATCH 3/9] style: update default text color search button --- .../internal/orama-search-results/orama-search-results.tsx | 2 +- packages/ui-stencil/src/styles/_colors.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx index 3341f056..9a03a24a 100644 --- a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx +++ b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx @@ -90,7 +90,7 @@ export class SearchResults { {result.title} -