Skip to content

Commit

Permalink
chore(isct-137): added sizes to button component v4
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndyKIron
AndyKIron committed Dec 13, 2023
1 parent e1fbbd9 commit 95bafc0
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 6 deletions.
121 changes: 118 additions & 3 deletions projects/fusion-ui/components/button/v4/button.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
:host {
margin: 0;
padding: 0;
// region button default styles

button {
// region button default styles
box-sizing: border-box;
display: flex;
padding: var(--spacing-50) var(--spacing-100);
Expand Down Expand Up @@ -36,6 +37,7 @@
&:hover:focus {
padding: var(--spacing-50) var(--spacing-100);
}

&.fu-outlined {
color: var(--text-primary);
border: 1px solid var(--default-outlined-border);
Expand Down Expand Up @@ -79,12 +81,10 @@
&.fu-primary {
color: var(--primary-button-contrast-text);
background: var(--primary-main);

&:focus {
background: var(--primary-main);
outline-color: var(--primary-main-50-p);
}

&:hover {
background: var(--primary-darker);
}
Expand Down Expand Up @@ -299,6 +299,121 @@
}
// endregion

// region button sizes
&.fu-small {
padding: var(--spacing-25) var(--spacing-75);
&:focus {
padding: 0 var(--spacing-50);
}
&:hover{
padding: var(--spacing-25) var(--spacing-75);
}
}
&.fu-large {
padding: var(--spacing-75) var(--spacing-100);
&:focus {
padding: var(--spacing-50) var(--spacing-75);
}
&:hover{
padding: var(--spacing-75) var(--spacing-100);
}
}
&.fu-extraLarge {
padding: var(--spacing-125) var(--spacing-150);
&:focus {
padding: calc(var(--spacing-125) - 2px) calc(var(--spacing-150) - 2px);
}
&:hover{
padding: var(--spacing-125) var(--spacing-150);
}
}

&.fu-outlined {
// region sizes
&.fu-small {
padding: calc(var(--spacing-25) - 1px) calc(var(--spacing-75) - 1px);
&:focus {
padding: 0 var(--spacing-50);
}
&:hover{
padding: calc(var(--spacing-25) - 1px) calc(var(--spacing-75) - 1px);
&:focus {
border-width: 1px;
}
}
}
&.fu-large {
padding: calc(var(--spacing-75) - 1px) calc(var(--spacing-100) - 1px);
&:focus {
padding: var(--spacing-50) var(--spacing-75);
}
&:hover{
padding: calc(var(--spacing-75) - 1px) calc(var(--spacing-100) - 1px);
&:focus {
border-width: 1px;
}
}
}
&.fu-extraLarge {
padding: calc(var(--spacing-125) - 1px) calc(var(--spacing-150) - 1px);
&:focus {
padding: var(--spacing-100) var(--spacing-125);
}
&:hover{
padding: calc(var(--spacing-125) - 1px) calc(var(--spacing-150) - 1px);
&:focus {
border-width: 1px;
}
}
}
//endregion
}
&.fu-text {
// region button sizes
&.fu-small {
padding: var(--spacing-25) var(--spacing-75);
&:focus {
border-width: 2px;
padding: 0 var(--spacing-50);
}
&:hover{
padding: var(--spacing-25) var(--spacing-75);
&:focus {
border-width: 0;
padding: var(--spacing-25) var(--spacing-75);
}
}
}
&.fu-large {
padding: var(--spacing-75) var(--spacing-100);
&:focus {
border-width: 2px;
padding: var(--spacing-50) var(--spacing-75);
}
&:hover{
padding: var(--spacing-75) var(--spacing-100);
&:focus {
padding: var(--spacing-75) var(--spacing-100);
}
}
}
&.fu-extraLarge {
padding: var(--spacing-125) var(--spacing-150);
&:focus {
border-width: 2px;
padding: var(--spacing-100) var(--spacing-125);
}
&:hover{
padding: var(--spacing-125) var(--spacing-150);
&:focus {
padding: var(--spacing-125) var(--spacing-150);
}
}
}
//endregion
}
//endregion

// region disable state for all colors and variants
&:disabled {
color: var(--text-disabled);
Expand Down
15 changes: 15 additions & 0 deletions projects/fusion-ui/components/button/v4/button.component.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,18 @@ export const Variants = {
render: ButtonVariantTemplate,
args: {color: 'primary'}
};

const ButtonSizesTemplate: StoryFn<ButtonComponent> = (args: ButtonComponent) => ({
props: args,
template: `<div style="display: flex; gap: 14px; align-items: center">
<fusion-button [color]="color" [variant]="variant" [disabled]="disabled" size="small">Small</fusion-button>
<fusion-button [color]="color" [variant]="variant" [disabled]="disabled">Medium (default)</fusion-button>
<fusion-button [color]="color" [variant]="variant" [disabled]="disabled" size="large">Large</fusion-button>
<fusion-button [color]="color" [variant]="variant" [disabled]="disabled" size="extraLarge">Extra Large</fusion-button>
</div>`
});

export const Sizes = {
render: ButtonSizesTemplate,
args: {color: 'primary', variant: 'contained'}
};
18 changes: 15 additions & 3 deletions projects/fusion-ui/components/button/v4/button.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ButtonColor, ButtonVariant} from '@ironsource/fusion-ui/components/button/v4/button.entities';
import {ButtonColor, ButtonSize, ButtonVariant} from '@ironsource/fusion-ui/components/button/v4/button.entities';
import {isNullOrUndefined} from '@ironsource/fusion-ui';

@Component({
Expand Down Expand Up @@ -29,6 +29,14 @@ export class ButtonComponent {
this._variant = value || 'contained';
}

/**
* Set button size
* @param value
*/
@Input() set size(value: ButtonSize) {
this._size = value || 'medium';
}

/**
* Set button disabled state
* @param value
Expand All @@ -38,23 +46,27 @@ export class ButtonComponent {
}

get buttonClass(): string {
return `${this.colorClass} ${this.variantClass}`;
return `${this.colorClass} ${this.variantClass} ${this.sizeClass}`;
}

get colorClass(): string {
return 'fu-' + this._color;
}

get variantClass(): string {
console.log('>>', this._variant);
return 'fu-' + this._variant;
}

get sizeClass(): string {
return 'fu-' + this._size;
}

get disabled(): boolean {
return this._disabled;
}

private _color: ButtonColor = 'default';
private _variant: ButtonVariant = 'contained';
private _size: ButtonSize = 'medium';
private _disabled: boolean = false;
}
1 change: 1 addition & 0 deletions projects/fusion-ui/components/button/v4/button.entities.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export type ButtonColor = 'default' | 'primary' | 'danger' | 'info' | 'success' | 'warning';
export type ButtonVariant = 'contained' | 'outlined' | 'text';
export type ButtonSize = 'small' | 'medium' | 'large' | 'extraLarge';

0 comments on commit 95bafc0

Please sign in to comment.