Skip to content

Commit

Permalink
feat: add variants to CloseButton and use that in input clear button
Browse files Browse the repository at this point in the history
  • Loading branch information
@josemarluedke
josemarluedke committed Apr 5, 2024
1 parent a1ab773 commit c692367
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 20 deletions.
12 changes: 9 additions & 3 deletions packages/buttons/src/components/close-button.gts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Component from '@glimmer/component';
import { action } from '@ember/object';
import { on } from '@ember/modifier';
import { VisuallyHidden } from '@frontile/utilities';
import { useStyles } from '@frontile/theme';
import { useStyles, type CloseButtonVariants } from '@frontile/theme';

interface CloseButtonSignature {
Args: {
Expand All @@ -18,7 +18,12 @@ interface CloseButtonSignature {
*
* @defaultValue 'lg'
*/
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
size?: CloseButtonVariants['size'];

/**
* @defaultValue 'transparent'
*/
variant?: CloseButtonVariants['variant'];

/**
* The function to call when button is clicked
Expand All @@ -41,7 +46,8 @@ class CloseButton extends Component<CloseButtonSignature> {
const { closeButton } = useStyles();

let { base, icon } = closeButton({
size: this.args.size || 'md'
size: this.args.size || 'md',
variant: this.args.variant || 'transparent'
});

return {
Expand Down
1 change: 1 addition & 0 deletions packages/forms/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"dependencies": {
"@ember/test-waiters": "^3.0.2",
"@embroider/addon-shim": "^1.8.7",
"@frontile/buttons": "workspace:0.17.0-alpha.15",
"@frontile/collections": "workspace:0.17.0-alpha.15",
"@frontile/overlays": "workspace:0.17.0-alpha.15",
"@frontile/theme": "workspace:0.17.0-alpha.15",
Expand Down
13 changes: 7 additions & 6 deletions packages/forms/src/components/input.gts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
import { FormControl, type FormControlSharedArgs } from './form-control';
import { triggerFormInputEvent } from '../utils';
import { ref } from '@frontile/utilities';
import { CloseButton } from '@frontile/buttons';

interface Args extends FormControlSharedArgs {
type?: string;
Expand Down Expand Up @@ -183,13 +184,13 @@ class Input extends Component<InputSignature> {
{{yield to="endContent"}}

{{#if this.isClearable}}
<button
<CloseButton
@title="Clear"
@variant="subtle"
@size="xs"
data-test-id="input-clear-button"
type="button"
{{on "click" this.clearValue}}
>
x
</button>
@onClick={{this.clearValue}}
/>
{{/if}}
</div>
{{/if}}
Expand Down
29 changes: 21 additions & 8 deletions packages/theme/src/components/close-button.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,36 @@
import { tv } from '../tw';
import { tv, type VariantProps } from '../tw';

const closeButton = tv({
slots: {
base: 'rounded-full hover:bg-default-100 transition transition-200 focus-visable:ring text-inherit',
base: 'rounded-full transition transition-200 focus-visable:ring text-inherit',
icon: 'size-[1em]'
},

variants: {
size: {
xs: 'text-sm p-1',
sm: 'text-base p-2',
md: 'text-xl p-2',
lg: 'text-2xl p-3',
xl: 'text-4xl p-3'
xs: { base: 'text-sm p-1' },
sm: { base: 'text-base p-2' },
md: { base: 'text-xl p-2' },
lg: { base: 'text-2xl p-3' },
xl: { base: 'text-4xl p-3' }
},
variant: {
transparent: { base: ['bg-transparent', 'hover:bg-default-100'] },
subtle: {
base: [
'bg-default-100',
'text-default-foreground dark:text-default-background',
'dark:bg-default-200',
'hover:bg-default-200/60 dark:hover:bg-default-800/60'
]
}
}
},
defaultVariants: {
size: 'md'
size: 'md',
variant: 'transparent'
}
});

export type CloseButtonVariants = VariantProps<typeof closeButton>;
export { closeButton };
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 50 additions & 3 deletions site/app/components/signature-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,21 @@ const data: ComponentDoc[] = [
description: 'The title of the close button',
tags: { defaultValue: { name: 'defaultValue', value: "'Close'" } },
defaultValue: '<span class="hljs-string">\'Close\'</span>'
},
{
identifier: 'variant',
type: {
type: '<span class="hljs-built_in">enum</span>',
raw: '<span class="hljs-string">\'transparent\'</span> | <span class="hljs-string">\'subtle\'</span>',
items: ["'transparent'", "'subtle'"]
},
isRequired: false,
isInternal: false,
description: '',
tags: {
defaultValue: { name: 'defaultValue', value: "'transparent'" }
},
defaultValue: '<span class="hljs-string">\'transparent\'</span>'
}
],
Blocks: [
Expand Down Expand Up @@ -1968,6 +1983,18 @@ const data: ComponentDoc[] = [
description: '',
tags: {}
},
{
identifier: 'endContentPointerEvents',
type: {
type: '<span class="hljs-built_in">enum</span>',
raw: '<span class="hljs-string">\'none\'</span> | <span class="hljs-string">\'auto\'</span>',
items: ["'none'", "'auto'"]
},
isRequired: false,
isInternal: false,
description: '',
tags: {}
},
{
identifier: 'errors',
type: {
Expand All @@ -1980,6 +2007,14 @@ const data: ComponentDoc[] = [
description: '',
tags: {}
},
{
identifier: 'isClearable',
type: { type: '<span class="hljs-built_in">boolean</span>' },
isRequired: false,
isInternal: false,
description: '',
tags: {}
},
{
identifier: 'isInvalid',
type: { type: '<span class="hljs-built_in">boolean</span>' },
Expand Down Expand Up @@ -2016,7 +2051,7 @@ const data: ComponentDoc[] = [
identifier: 'onChange',
type: {
type: '<span class="hljs-function"><span class="hljs-keyword">function</span></span>',
raw: '(value: <span class="hljs-built_in">string</span>, <span class="hljs-attr">event</span>: InputEvent) => <span class="hljs-built_in">void</span>'
raw: '(value: <span class="hljs-built_in">string</span>, event?: InputEvent) => <span class="hljs-built_in">void</span>'
},
isRequired: false,
isInternal: false,
Expand All @@ -2027,7 +2062,7 @@ const data: ComponentDoc[] = [
identifier: 'onInput',
type: {
type: '<span class="hljs-function"><span class="hljs-keyword">function</span></span>',
raw: '(value: <span class="hljs-built_in">string</span>, <span class="hljs-attr">event</span>: InputEvent) => <span class="hljs-built_in">void</span>'
raw: '(value: <span class="hljs-built_in">string</span>, event?: InputEvent) => <span class="hljs-built_in">void</span>'
},
isRequired: false,
isInternal: false,
Expand All @@ -2046,6 +2081,18 @@ const data: ComponentDoc[] = [
description: '',
tags: {}
},
{
identifier: 'startContentPointerEvents',
type: {
type: '<span class="hljs-built_in">enum</span>',
raw: '<span class="hljs-string">\'none\'</span> | <span class="hljs-string">\'auto\'</span>',
items: ["'none'", "'auto'"]
},
isRequired: false,
isInternal: false,
description: '',
tags: {}
},
{
identifier: 'type',
type: { type: '<span class="hljs-built_in">string</span>' },
Expand Down Expand Up @@ -2968,7 +3015,7 @@ const data: ComponentDoc[] = [
{
identifier: 'classes',
type: {
type: 'SlotsToClasses&#x3C;<span class="hljs-string">\'trigger\'</span> | <span class="hljs-string">\'base\'</span> | <span class="hljs-string">\'placeholder\'</span> | <span class="hljs-string">\'listbox\'</span> | <span class="hljs-string">\'icon\'</span>>'
type: 'SlotsToClasses&#x3C;<span class="hljs-string">\'base\'</span> | <span class="hljs-string">\'icon\'</span> | <span class="hljs-string">\'trigger\'</span> | <span class="hljs-string">\'placeholder\'</span> | <span class="hljs-string">\'listbox\'</span>>'
},
isRequired: false,
isInternal: false,
Expand Down
16 changes: 16 additions & 0 deletions test-app/app/components/forms/form-example.gts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,22 @@ export default class FormExample extends Component<FormExampleArgs> {
</Input>

<Input
@size="sm"
@name="field-1"
@label={{MyCustomLabel}}
@description="Cool field"
@isRequired={{true}}
@isClearable={{true}}
/>
<Input
@name="field-1"
@label={{MyCustomLabel}}
@description="Cool field"
@isRequired={{true}}
@isClearable={{true}}
/>
<Input
@size="lg"
@name="field-1"
@label={{MyCustomLabel}}
@description="Cool field"
Expand Down

0 comments on commit c692367

Please sign in to comment.