From 95bafc00635465af885fde4b3f3db2c85c47c12b Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Wed, 13 Dec 2023 15:55:16 +0200 Subject: [PATCH] chore(isct-137): added sizes to button component v4 --- .../button/v4/button.component.scss | 121 +++++++++++++++++- .../button/v4/button.component.stories.ts | 15 +++ .../components/button/v4/button.component.ts | 18 ++- .../components/button/v4/button.entities.ts | 1 + 4 files changed, 149 insertions(+), 6 deletions(-) diff --git a/projects/fusion-ui/components/button/v4/button.component.scss b/projects/fusion-ui/components/button/v4/button.component.scss index e0705f19e..fba33d8dc 100644 --- a/projects/fusion-ui/components/button/v4/button.component.scss +++ b/projects/fusion-ui/components/button/v4/button.component.scss @@ -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); @@ -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); @@ -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); } @@ -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); diff --git a/projects/fusion-ui/components/button/v4/button.component.stories.ts b/projects/fusion-ui/components/button/v4/button.component.stories.ts index 101ef4141..8b726c8c0 100644 --- a/projects/fusion-ui/components/button/v4/button.component.stories.ts +++ b/projects/fusion-ui/components/button/v4/button.component.stories.ts @@ -84,3 +84,18 @@ export const Variants = { render: ButtonVariantTemplate, args: {color: 'primary'} }; + +const ButtonSizesTemplate: StoryFn = (args: ButtonComponent) => ({ + props: args, + template: `
+ Small + Medium (default) + Large + Extra Large +
` +}); + +export const Sizes = { + render: ButtonSizesTemplate, + args: {color: 'primary', variant: 'contained'} +}; diff --git a/projects/fusion-ui/components/button/v4/button.component.ts b/projects/fusion-ui/components/button/v4/button.component.ts index 4a1a0902d..1ed5e56c4 100644 --- a/projects/fusion-ui/components/button/v4/button.component.ts +++ b/projects/fusion-ui/components/button/v4/button.component.ts @@ -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({ @@ -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 @@ -38,7 +46,7 @@ export class ButtonComponent { } get buttonClass(): string { - return `${this.colorClass} ${this.variantClass}`; + return `${this.colorClass} ${this.variantClass} ${this.sizeClass}`; } get colorClass(): string { @@ -46,15 +54,19 @@ export class ButtonComponent { } 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; } diff --git a/projects/fusion-ui/components/button/v4/button.entities.ts b/projects/fusion-ui/components/button/v4/button.entities.ts index 9824474bb..95910be47 100644 --- a/projects/fusion-ui/components/button/v4/button.entities.ts +++ b/projects/fusion-ui/components/button/v4/button.entities.ts @@ -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';