From 76aeca1f639a567378d9843e1c31f11ffcaaa805 Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Thu, 13 Jul 2023 14:21:22 -0300 Subject: [PATCH 01/10] fix(dropdown): adding property to position the dropdown manually --- src/components.d.ts | 10 +++++++- src/components/dropdown/dropdown.scss | 4 +++ src/components/dropdown/dropdown.tsx | 36 ++++++++++++++++++++++++--- src/components/dropdown/readme.md | 9 ++++--- 4 files changed, 51 insertions(+), 8 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 1baccd58..af41a527 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -25,7 +25,7 @@ import { typeDate } from "./components/datepicker/datepicker"; import { languages } from "./utils/languages"; import { DaysList } from "./components/datepicker/datepicker-interface"; import { stateSelect } from "./components/datepicker/datepicker-period/datepicker-period"; -import { activeMode } from "./components/dropdown/dropdown"; +import { activeMode, DropdownPostionType } from "./components/dropdown/dropdown"; import { alignItems, breakpoint, direction, flexWrap, gap, justifyContent, margin, padding } from "./components/grid/grid-interface"; import { IconSize, IconTheme, IconType as IconType1 } from "./components/icon/icon-interface"; import { IllustrationType } from "./components/illustration/illustration-interface"; @@ -578,6 +578,10 @@ export namespace Components { * Open. Used to open/close the dropdown. */ "open"?: boolean; + /** + * Used to set tooltip position + */ + "position"?: DropdownPostionType; "toggle": () => Promise; } interface BdsExpansionPanel { @@ -3263,6 +3267,10 @@ declare namespace LocalJSX { * Open. Used to open/close the dropdown. */ "open"?: boolean; + /** + * Used to set tooltip position + */ + "position"?: DropdownPostionType; } interface BdsExpansionPanel { } diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index 605f930a..1b569dc5 100644 --- a/src/components/dropdown/dropdown.scss +++ b/src/components/dropdown/dropdown.scss @@ -42,6 +42,10 @@ left: 0; } + &__center { + left: calc(50% - 122px); + } + &__right { right: 0; } diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index dd2ee452..9a1be823 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -14,9 +14,19 @@ import { import { getScrollParent, positionAbsoluteElement } from '../../utils/position-element'; export type activeMode = 'hover' | 'click'; -export type dropdownPosition = 'bottom' | 'right'; +export type dropVerticalPosition = 'bottom' | 'top'; +export type dropHorizontalPosition = 'left' | 'center' | 'right'; export type subMenuState = 'close' | 'pending' | 'open'; +export type DropdownPostionType = + | 'auto' + | 'top-center' + | 'top-left' + | 'top-right' + | 'bottom-center' + | 'bottom-right' + | 'bottom-left'; + @Component({ tag: 'bds-dropdown', styleUrl: 'dropdown.scss', @@ -46,6 +56,11 @@ export class BdsDropdown implements ComponentInterface { */ @Prop({ mutable: true, reflect: true }) public open?: boolean = false; + /** + * Used to set tooltip position + */ + @Prop() position?: DropdownPostionType = 'auto'; + /** * bdsToggle. Event to return selected date value. */ @@ -65,7 +80,17 @@ export class BdsDropdown implements ComponentInterface { } componentDidLoad() { - this.validatePositionDrop(); + if (this.position != 'auto') { + this.setDefaultPlacement(this.position); + } else { + this.validatePositionDrop(); + } + } + + private setDefaultPlacement(value: DropdownPostionType) { + const arrayPosition = value.split('-'); + this.dropElement.classList.add(`dropdown__basic__${arrayPosition[0]}`); + this.dropElement.classList.add(`dropdown__basic__${arrayPosition[1]}`); } private validatePositionDrop() { @@ -85,7 +110,12 @@ export class BdsDropdown implements ComponentInterface { @Watch('open') protected isOpenChanged(open: boolean): void { - if (open) this.validatePositionDrop(); + if (open) + if (this.position != 'auto') { + this.setDefaultPlacement(this.position); + } else { + this.validatePositionDrop(); + } } @Method() diff --git a/src/components/dropdown/readme.md b/src/components/dropdown/readme.md index 0b2d618d..625e6aab 100644 --- a/src/components/dropdown/readme.md +++ b/src/components/dropdown/readme.md @@ -7,10 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------ | ------------- | -------------------------------------- | -------------------- | --------- | -| `activeMode` | `active-mode` | Open. Used to open/close the dropdown. | `"click" \| "hover"` | `'click'` | -| `open` | `open` | Open. Used to open/close the dropdown. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------- | --------- | +| `activeMode` | `active-mode` | Open. Used to open/close the dropdown. | `"click" \| "hover"` | `'click'` | +| `open` | `open` | Open. Used to open/close the dropdown. | `boolean` | `false` | +| `position` | `position` | Used to set tooltip position | `"auto" \| "bottom-center" \| "bottom-left" \| "bottom-right" \| "top-center" \| "top-left" \| "top-right"` | `'auto'` | ## Events From 189c33d620ea8a42fe877576a6a6517bc1313ec1 Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Fri, 14 Jul 2023 16:58:05 -0300 Subject: [PATCH 02/10] fix(autocomplete): adding property to position the autocomplete manually --- .../autocomplete-select-interface.ts | 2 +- src/components/autocomplete/autocomplete.tsx | 25 ++++++++++++++++--- src/components/autocomplete/readme.md | 2 +- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/components/autocomplete/autocomplete-select-interface.ts b/src/components/autocomplete/autocomplete-select-interface.ts index eaa0eb32..9996d3ea 100644 --- a/src/components/autocomplete/autocomplete-select-interface.ts +++ b/src/components/autocomplete/autocomplete-select-interface.ts @@ -22,4 +22,4 @@ export interface AutocompleteSelectedChangeEventDetail { export type AutocompleteSelectType = 'text' | 'icon'; -export type AutocompleteOptionsPositionType = 'top' | 'bottom'; +export type AutocompleteOptionsPositionType = 'auto' | 'top' | 'bottom'; diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx index 4b7d2a1f..a85ed1c1 100644 --- a/src/components/autocomplete/autocomplete.tsx +++ b/src/components/autocomplete/autocomplete.tsx @@ -87,7 +87,7 @@ export class BdsAutocomplete { /** * Set the placement of the options menu. Can be 'bottom' or 'top'. */ - @Prop() optionsPosition?: AutocompleteOptionsPositionType = 'bottom'; + @Prop() optionsPosition?: AutocompleteOptionsPositionType = 'auto'; /** * If true, the X icon will appear only when component is focused. @@ -136,7 +136,12 @@ export class BdsAutocomplete { } else { this.iconDropElement.name = this.isOpen ? 'arrow-down' : 'arrow-up'; } - if (isOpen) this.validatePositionDrop(); + if (isOpen) + if (this.optionsPosition != 'auto') { + this.setDefaultPlacement(this.optionsPosition); + } else { + this.validatePositionDrop(); + } } @Watch('selected') @@ -187,7 +192,21 @@ export class BdsAutocomplete { } this.text = this.getText(); - this.validatePositionDrop(); + if (this.optionsPosition != 'auto') { + this.setDefaultPlacement(this.optionsPosition); + } else { + this.validatePositionDrop(); + } + } + + private setDefaultPlacement(value: AutocompleteOptionsPositionType) { + if (value == 'bottom') { + this.dropElement.classList.add('select__options--position-bottom'); + this.iconDropElement.name = 'arrow-down'; + } else { + this.dropElement.classList.add('select__options--position-top'); + this.iconDropElement.name = 'arrow-up'; + } } private validatePositionDrop() { diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md index fb254ab8..5ca239b7 100644 --- a/src/components/autocomplete/readme.md +++ b/src/components/autocomplete/readme.md @@ -16,7 +16,7 @@ | `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | | `label` | `label` | label in input, with he the input size increases. | `string` | `''` | | `options` | `options` | The options of the select Should be passed this way: options='[{"value": "Cat", "label": "Meow"}, {"value": "Dog", "label": "Woof"}]' Options can also be passed as child by using bds-select-option component, but passing as a child you may have some compatibility problems with Angular. | `AutocompleteOption[] \| string` | `undefined` | -| `optionsPosition` | `options-position` | Set the placement of the options menu. Can be 'bottom' or 'top'. | `"bottom" \| "top"` | `'bottom'` | +| `optionsPosition` | `options-position` | Set the placement of the options menu. Can be 'bottom' or 'top'. | `"auto" \| "bottom" \| "top"` | `'auto'` | | `placeholder` | `placeholder` | Placeholder for native input element. | `string` | `''` | | `searchOnlyTitle` | `search-only-title` | Search only the title property | `boolean` | `true` | | `selected` | -- | the item selected. | `HTMLBdsSelectOptionElement` | `undefined` | From 32e1930708bc3fd27b5c1077e7382ff674a8fded Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Fri, 14 Jul 2023 17:10:48 -0300 Subject: [PATCH 03/10] fix(selects): adding property to position the selects manually --- src/components/selects/select-chips/readme.md | 50 +++++++++---------- .../selects/select-chips/select-chips.tsx | 25 ++++++++-- src/components/selects/select-interface.ts | 2 +- src/components/selects/select/readme.md | 30 +++++------ src/components/selects/select/select.tsx | 25 ++++++++-- 5 files changed, 85 insertions(+), 47 deletions(-) diff --git a/src/components/selects/select-chips/readme.md b/src/components/selects/select-chips/readme.md index 9e159889..90ad8534 100644 --- a/src/components/selects/select-chips/readme.md +++ b/src/components/selects/select-chips/readme.md @@ -7,31 +7,31 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- | -| `canAddNew` | `can-add-new` | Specify if is possible to create a new tag that is not on the options. | `boolean` | `true` | -| `chips` | `chips` | The chips on the component Should be passed this way: chips='["chip1", "chip2"]' | `string \| string[]` | `[]` | -| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` | -| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | -| `delimiters` | -- | The delimiter is used to add multiple chips in the same string. | `RegExp` | `/,\|;/` | -| `disableSubmit` | `disable-submit` | If `true`, the user cannot modify the value. | `boolean` | `false` | -| `disabled` | `disabled` | Disabled input. | `boolean` | `false` | -| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` | -| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` | -| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` | -| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | -| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` | -| `label` | `label` | label in input, with he the input size increases. | `string` | `''` | -| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` | -| `newPrefix` | `new-prefix` | Used for add prefix on new option select. | `string` | `''` | -| `notFoundMessage` | `not-found-message` | Specify if is possible to create a new tag that is not on the options. | `string` | `'No results found'` | -| `options` | `options` | The options of the select Should be passed this way: options='[{"value": "Cat", "label": "Meow"}, {"value": "Dog", "label": "Woof"}]' Options can also be passed as child by using bds-select-option component, but passing as a child you may have some compatibility problems with Angular. | `Option[] \| string` | `[]` | -| `optionsPosition` | `options-position` | Set the placement of the options menu. Can be 'bottom' or 'top'. | `"bottom" \| "top"` | `'bottom'` | -| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` | -| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` | -| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` | -| `type` | `type` | Defining the type is important so that it is possible to carry out validations. Can be one of: 'text' and 'email; | `"email" \| "text"` | `'text'` | -| `value` | `value` | the value of the select. | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -------------------- | +| `canAddNew` | `can-add-new` | Specify if is possible to create a new tag that is not on the options. | `boolean` | `true` | +| `chips` | `chips` | The chips on the component Should be passed this way: chips='["chip1", "chip2"]' | `string \| string[]` | `[]` | +| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` | +| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | +| `delimiters` | -- | The delimiter is used to add multiple chips in the same string. | `RegExp` | `/,\|;/` | +| `disableSubmit` | `disable-submit` | If `true`, the user cannot modify the value. | `boolean` | `false` | +| `disabled` | `disabled` | Disabled input. | `boolean` | `false` | +| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` | +| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` | +| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` | +| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | +| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` | +| `label` | `label` | label in input, with he the input size increases. | `string` | `''` | +| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` | +| `newPrefix` | `new-prefix` | Used for add prefix on new option select. | `string` | `''` | +| `notFoundMessage` | `not-found-message` | Specify if is possible to create a new tag that is not on the options. | `string` | `'No results found'` | +| `options` | `options` | The options of the select Should be passed this way: options='[{"value": "Cat", "label": "Meow"}, {"value": "Dog", "label": "Woof"}]' Options can also be passed as child by using bds-select-option component, but passing as a child you may have some compatibility problems with Angular. | `Option[] \| string` | `[]` | +| `optionsPosition` | `options-position` | Set the placement of the options menu. Can be 'bottom' or 'top'. | `"auto" \| "bottom" \| "top"` | `'auto'` | +| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` | +| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` | +| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` | +| `type` | `type` | Defining the type is important so that it is possible to carry out validations. Can be one of: 'text' and 'email; | `"email" \| "text"` | `'text'` | +| `value` | `value` | the value of the select. | `string` | `''` | ## Events diff --git a/src/components/selects/select-chips/select-chips.tsx b/src/components/selects/select-chips/select-chips.tsx index 6a0a5e98..d8c51204 100644 --- a/src/components/selects/select-chips/select-chips.tsx +++ b/src/components/selects/select-chips/select-chips.tsx @@ -149,7 +149,7 @@ export class SelectChips { /** * Set the placement of the options menu. Can be 'bottom' or 'top'. */ - @Prop({ mutable: true, reflect: true }) optionsPosition?: SelectOptionsPositionType = 'bottom'; + @Prop({ mutable: true, reflect: true }) optionsPosition?: SelectOptionsPositionType = 'auto'; /** * Data test is the prop to specifically test the component action object. */ @@ -197,7 +197,12 @@ export class SelectChips { } else { this.iconDropElement.name = this.isOpen ? 'arrow-down' : 'arrow-up'; } - if (isOpen) this.validatePositionDrop(); + if (isOpen) + if (this.optionsPosition != 'auto') { + this.setDefaultPlacement(this.optionsPosition); + } else { + this.validatePositionDrop(); + } } @Listen('mousedown', { target: 'window', passive: true }) @@ -286,7 +291,21 @@ export class SelectChips { async componentDidLoad() { await this.resetFilterOptions(); - this.validatePositionDrop(); + if (this.optionsPosition != 'auto') { + this.setDefaultPlacement(this.optionsPosition); + } else { + this.validatePositionDrop(); + } + } + + private setDefaultPlacement(value: SelectOptionsPositionType) { + if (value == 'bottom') { + this.dropElement.classList.add('select__options--position-bottom'); + this.iconDropElement.name = 'arrow-down'; + } else { + this.dropElement.classList.add('select__options--position-top'); + this.iconDropElement.name = 'arrow-up'; + } } private validatePositionDrop() { diff --git a/src/components/selects/select-interface.ts b/src/components/selects/select-interface.ts index e7de0f8f..3b5809e4 100644 --- a/src/components/selects/select-interface.ts +++ b/src/components/selects/select-interface.ts @@ -18,4 +18,4 @@ export interface SelectChangeEventDetail { export type SelectType = 'text' | 'icon'; -export type SelectOptionsPositionType = 'top' | 'bottom'; +export type SelectOptionsPositionType = 'auto' | 'top' | 'bottom'; diff --git a/src/components/selects/select/readme.md b/src/components/selects/select/readme.md index 2748ebee..4473a355 100644 --- a/src/components/selects/select/readme.md +++ b/src/components/selects/select/readme.md @@ -7,21 +7,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- | -| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` | -| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | -| `disabled` | `disabled` | Disabled input. | `boolean` | `false` | -| `errorMessage` | `error-message` | Indicated to pass an feeback to user. | `string` | `''` | -| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` | -| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | -| `label` | `label` | label in input, with he the input size increases. | `string` | `''` | -| `options` | `options` | The options of the select Should be passed this way: options='[{"value": "Cat", "label": "Meow"}, {"value": "Dog", "label": "Woof"}]' Options can also be passed as child by using bds-select-option component, but passing as a child you may have some compatibility problems with Angular. | `Option[] \| string` | `undefined` | -| `optionsPosition` | `options-position` | Set the placement of the options menu. Can be 'bottom' or 'top'. | `"bottom" \| "top"` | `'bottom'` | -| `placeholder` | `placeholder` | Placeholder for native input element. | `string` | `''` | -| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` | -| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` | -| `value` | `value` | the value of the select. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- | +| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` | +| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | +| `disabled` | `disabled` | Disabled input. | `boolean` | `false` | +| `errorMessage` | `error-message` | Indicated to pass an feeback to user. | `string` | `''` | +| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` | +| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | +| `label` | `label` | label in input, with he the input size increases. | `string` | `''` | +| `options` | `options` | The options of the select Should be passed this way: options='[{"value": "Cat", "label": "Meow"}, {"value": "Dog", "label": "Woof"}]' Options can also be passed as child by using bds-select-option component, but passing as a child you may have some compatibility problems with Angular. | `Option[] \| string` | `undefined` | +| `optionsPosition` | `options-position` | Set the placement of the options menu. Can be 'bottom' or 'top'. | `"auto" \| "bottom" \| "top"` | `'auto'` | +| `placeholder` | `placeholder` | Placeholder for native input element. | `string` | `''` | +| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` | +| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` | +| `value` | `value` | the value of the select. | `any` | `undefined` | ## Events diff --git a/src/components/selects/select/select.tsx b/src/components/selects/select/select.tsx index c3a89f75..10d3b6a6 100644 --- a/src/components/selects/select/select.tsx +++ b/src/components/selects/select/select.tsx @@ -115,7 +115,7 @@ export class Select { /** * Set the placement of the options menu. Can be 'bottom' or 'top'. */ - @Prop({ mutable: true, reflect: true }) optionsPosition?: SelectOptionsPositionType = 'bottom'; + @Prop({ mutable: true, reflect: true }) optionsPosition?: SelectOptionsPositionType = 'auto'; /** * Data test is the prop to specifically test the component action object. @@ -129,7 +129,12 @@ export class Select { } else { this.iconDropElement.name = this.isOpen ? 'arrow-down' : 'arrow-up'; } - if (isOpen) this.validatePositionDrop(); + if (isOpen) + if (this.optionsPosition != 'auto') { + this.setDefaultPlacement(this.optionsPosition); + } else { + this.validatePositionDrop(); + } } @Watch('value') @@ -161,7 +166,21 @@ export class Select { componentDidLoad() { this.getValueSelected(); - this.validatePositionDrop(); + if (this.optionsPosition != 'auto') { + this.setDefaultPlacement(this.optionsPosition); + } else { + this.validatePositionDrop(); + } + } + + private setDefaultPlacement(value: SelectOptionsPositionType) { + if (value == 'bottom') { + this.dropElement.classList.add('select__options--position-bottom'); + this.iconDropElement.name = 'arrow-down'; + } else { + this.dropElement.classList.add('select__options--position-top'); + this.iconDropElement.name = 'arrow-up'; + } } private validatePositionDrop() { From aceca8fd1adb87e769efa42de1a725099578115f Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Fri, 14 Jul 2023 17:39:22 -0300 Subject: [PATCH 04/10] fix(pagination): adding property to position the pagination manually --- src/components.d.ts | 9 ++++++++ src/components/pagination/pagination.tsx | 28 ++++++++++++++++++++++-- src/components/pagination/readme.md | 9 ++++---- 3 files changed, 40 insertions(+), 6 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 1baccd58..05f3e8bb 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -41,6 +41,7 @@ import { colorsVariants as colorsVariants1, loadingSize, LoadingSpinnerVariant a import { menuPosition } from "./components/menu/menu"; import { avatarSize as avatarSize2 } from "./components/menu/menu-exibition/menu-exibition"; import { sizes } from "./components/modal/modal"; +import { PaginationOptionsPositionType } from "./components/pagination/pagination"; import { PaperElevation } from "./components/paper/paper-interface"; import { progressBarColor, progressBarSize } from "./components/progress-bar/progress-bar"; import { sidebarPosition, sidebarType } from "./components/sidebar/sidebar"; @@ -1346,6 +1347,10 @@ export namespace Components { "active"?: boolean; } interface BdsPagination { + /** + * Set the placement of the options menu. Can be 'bottom' or 'top'. + */ + "optionsPosition"?: PaginationOptionsPositionType; /** * Prop to recive the number of pages. */ @@ -4147,6 +4152,10 @@ declare namespace LocalJSX { * When de value of component change, the event are dispache. */ "onBdsPaginationChange"?: (event: BdsPaginationCustomEvent) => void; + /** + * Set the placement of the options menu. Can be 'bottom' or 'top'. + */ + "optionsPosition"?: PaginationOptionsPositionType; /** * Prop to recive the number of pages. */ diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index db7e5386..8bbaa8c9 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -1,6 +1,7 @@ import { Component, Host, h, Element, Prop, State, Event, EventEmitter, Watch } from '@stencil/core'; import { SelectOptionsPositionType } from '../selects/select-interface'; import { getScrollParent, positionAbsoluteElement } from '../../utils/position-element'; +export type PaginationOptionsPositionType = 'auto' | 'top' | 'bottom'; @Component({ tag: 'bds-pagination', styleUrl: 'pagination.scss', @@ -35,6 +36,10 @@ export class Pagination { * When the component are render this page are set. */ @Prop() startedPage?: number; + /** + * Set the placement of the options menu. Can be 'bottom' or 'top'. + */ + @Prop() optionsPosition?: PaginationOptionsPositionType = 'auto'; /** * When de value of component change, the event are dispache. */ @@ -46,7 +51,21 @@ export class Pagination { } componentDidLoad() { - this.validatePositionDrop(); + if (this.optionsPosition != 'auto') { + this.setDefaultPlacement(this.optionsPosition); + } else { + this.validatePositionDrop(); + } + } + + private setDefaultPlacement(value: PaginationOptionsPositionType) { + if (value == 'bottom') { + this.dropElement.classList.add('select__options--position-bottom'); + this.iconDropElement.name = 'arrow-down'; + } else { + this.dropElement.classList.add('select__options--position-top'); + this.iconDropElement.name = 'arrow-up'; + } } private validatePositionDrop() { @@ -72,7 +91,12 @@ export class Pagination { } else { this.iconDropElement.name = this.openSelect ? 'arrow-down' : 'arrow-up'; } - if (isOpen) this.validatePositionDrop(); + if (isOpen) + if (this.optionsPosition != 'auto') { + this.setDefaultPlacement(this.optionsPosition); + } else { + this.validatePositionDrop(); + } } @Watch('pages') diff --git a/src/components/pagination/readme.md b/src/components/pagination/readme.md index 21466e32..dc9e41f9 100644 --- a/src/components/pagination/readme.md +++ b/src/components/pagination/readme.md @@ -7,10 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | -------------- | ------------------------------------------------ | -------- | ----------- | -| `pages` | `pages` | Prop to recive the number of pages. | `number` | `undefined` | -| `startedPage` | `started-page` | When the component are render this page are set. | `number` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------- | ----------------------------- | ----------- | +| `optionsPosition` | `options-position` | Set the placement of the options menu. Can be 'bottom' or 'top'. | `"auto" \| "bottom" \| "top"` | `'auto'` | +| `pages` | `pages` | Prop to recive the number of pages. | `number` | `undefined` | +| `startedPage` | `started-page` | When the component are render this page are set. | `number` | `undefined` | ## Events From 2f02264ab11f6b0ef0b34719a56abbe6b2d55022 Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Tue, 18 Jul 2023 17:06:53 -0300 Subject: [PATCH 05/10] fix(button): fixind fixing button loading position --- src/components/button/button.scss | 23 ++++++++++++++----- src/components/button/button.tsx | 7 +++--- src/components/button/readme.md | 2 +- .../loading-spinner/loading-spinner.scss | 12 +++++----- 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/components/button/button.scss b/src/components/button/button.scss index c7e2ad10..55f47c7b 100755 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -69,6 +69,12 @@ $button-padding-left-right: 16px; -moz-transition: all 0.5s; transition: all 0.5s; + + bds-loading-spinner { + max-height: 100%; + position: absolute; + } + & * { pointer-events: none; } @@ -84,6 +90,12 @@ $button-padding-left-right: 16px; &--size-standard { @include padding-button-top-bottom($button-size-standard, $height-standard); + bds-loading-spinner { + width: 32px; + height: 32px; + top: calc(50% - 16px); + } + &--icon { @include padding-button-top-bottom($button-size-standard-icon, $height-standard); } @@ -92,6 +104,11 @@ $button-padding-left-right: 16px; &--size-short { @include padding-button-top-bottom($button-size-short, $height-short); + bds-loading-spinner { + width: 16px; + height: 16px; + top: calc(50% - 8px); + } &--icon { @include padding-button-top-bottom($button-size-short-icon, $height-short); } @@ -287,12 +304,6 @@ $button-padding-left-right: 16px; } } - bds-loading-spinner { - width: auto; - max-height: 100%; - position: absolute; - } - .hide { cursor: not-allowed; opacity: 0; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 70c14b56..11248b51 100755 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -78,7 +78,7 @@ export class Button { /** * If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost' */ - @Prop() bdsLoadingColor?: colorsVariants = 'light'; + @Prop() bdsLoadingColor?: colorsVariants = 'main'; /** * Data test is the prop to specifically test the component action object. @@ -132,10 +132,11 @@ export class Button { } renderLoadingSpinner(): HTMLBdsLoadingSpinnerElement { + const loadingColor = this.variant == 'primary' || this.variant == 'delete' ? 'light' : 'main'; if (this.size === 'short') { - return ; + return ; } else { - return ; + return ; } } diff --git a/src/components/button/readme.md b/src/components/button/readme.md index aee65ef9..4d9b6eed 100755 --- a/src/components/button/readme.md +++ b/src/components/button/readme.md @@ -11,7 +11,7 @@ | ------------------- | --------------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------ | | `arrow` | `arrow` | The arrow button | `boolean` | `false` | | `bdsLoading` | `bds-loading` | If true, shows the loading spinner | `boolean` | `false` | -| `bdsLoadingColor` | `bds-loading-color` | If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost' | `"light" \| "main"` | `'light'` | +| `bdsLoadingColor` | `bds-loading-color` | If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost' | `"light" \| "main"` | `'main'` | | `bdsLoadingVariant` | `bds-loading-variant` | If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost' | `"delete" \| "ghost" \| "primary" \| "secondary" \| "tertiary"` | `'primary'` | | `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | | `disabled` | `disabled` | If true, the base button will be disabled. | `boolean` | `false` | diff --git a/src/components/loading-spinner/loading-spinner.scss b/src/components/loading-spinner/loading-spinner.scss index ce4daba6..e823c6b6 100644 --- a/src/components/loading-spinner/loading-spinner.scss +++ b/src/components/loading-spinner/loading-spinner.scss @@ -15,7 +15,7 @@ .spinner_background { border-radius: 50%; - border: 2px solid $color-surface-3; + border: 2px solid; &_extra-small { border-width: 2px; width: 16px; @@ -35,12 +35,12 @@ box-sizing: border-box; } &_main { - border-color: $color-surface-3; + border-color: $color-content-din; + opacity: 0.16; } &_light { - border-color: $color-content-default; - mix-blend-mode: multiply; - opacity: 0.32; + border-color: $color-content-bright; + opacity: 0.16; } } @@ -64,7 +64,7 @@ color: $color-primary; } &_light { - color: $color-surface-3; + color: $color-content-bright; } } @keyframes rotate { From a432beb8a240f046d716ea1e9bcc62cade3e835d Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Tue, 18 Jul 2023 17:39:13 -0300 Subject: [PATCH 06/10] fix(input-chips): fixind maxlenght on component --- src/components.d.ts | 16 ++++++++ src/components/counter-text/readme.md | 2 + src/components/input-chips/input-chips.tsx | 42 +++++++++++++------- src/components/input-chips/readme.md | 45 ++++++++++++---------- src/components/test-component/readme.md | 1 + 5 files changed, 72 insertions(+), 34 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index cc3eafd4..163a5fec 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -848,6 +848,10 @@ export namespace Components { * Clear all chips */ "clear": () => Promise; + /** + * Passing true to display a counter of available size, it is necessary to pass another maxlength property. + */ + "counterLength"?: boolean; /** * Add state danger on input, use for use feedback. */ @@ -900,6 +904,10 @@ export namespace Components { * label in input, with he the input size increases. */ "label"?: string; + /** + * Set maximum length value for chips + */ + "maxChipsLength"?: number; /** * Set maximum length value for the chip content */ @@ -3550,6 +3558,10 @@ declare namespace LocalJSX { * The chips on the component Should be passed this way: chips='["chip1", "chip2"]' */ "chips"?: string[] | string; + /** + * Passing true to display a counter of available size, it is necessary to pass another maxlength property. + */ + "counterLength"?: boolean; /** * Add state danger on input, use for use feedback. */ @@ -3594,6 +3606,10 @@ declare namespace LocalJSX { * label in input, with he the input size increases. */ "label"?: string; + /** + * Set maximum length value for chips + */ + "maxChipsLength"?: number; /** * Set maximum length value for the chip content */ diff --git a/src/components/counter-text/readme.md b/src/components/counter-text/readme.md index 3ad1349b..0c132d19 100644 --- a/src/components/counter-text/readme.md +++ b/src/components/counter-text/readme.md @@ -21,6 +21,7 @@ ### Used by - [bds-input](../input) + - [bds-input-chips](../input-chips) ### Depends on @@ -31,6 +32,7 @@ graph TD; bds-counter-text --> bds-typo bds-input --> bds-counter-text + bds-input-chips --> bds-counter-text style bds-counter-text fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/input-chips/input-chips.tsx b/src/components/input-chips/input-chips.tsx index 52876222..fe9a5525 100644 --- a/src/components/input-chips/input-chips.tsx +++ b/src/components/input-chips/input-chips.tsx @@ -51,6 +51,10 @@ export class InputChips { */ @Prop() maxlength?: number; + /** + * Set maximum length value for chips + */ + @Prop() maxChipsLength?: number; /** * used for add icon in input left. Uses the bds-icon component. */ @@ -112,6 +116,11 @@ export class InputChips { */ @Prop() placeholder?: string = ''; + /** + * Passing true to display a counter of available size, it is necessary to + * pass another maxlength property. + */ + @Prop() counterLength? = false; /** * Data test is the prop to specifically test the component action object. */ @@ -501,22 +510,27 @@ export class InputChips { {this.renderLabel()}
{this.internalChips.length > 0 && {this.renderChips()}} - (this.nativeInput = input)} - class={{ input__container__text: true }} - name={this.inputName} - maxlength={this.maxlength} - placeholder={this.placeholder} - onInput={this.onInput} - onFocus={this.onFocus} - onBlur={() => this.handleOnBlur()} - onChange={() => this.handleChange} - value={this.value} - disabled={this.disabled} - data-test={this.dataTest} - > + {this.internalChips.length < this.maxChipsLength && ( + (this.nativeInput = input)} + class={{ input__container__text: true }} + name={this.inputName} + maxlength={this.maxlength} + placeholder={this.placeholder} + onInput={this.onInput} + onFocus={this.onFocus} + onBlur={() => this.handleOnBlur()} + onChange={() => this.handleChange} + value={this.value} + disabled={this.disabled} + data-test={this.dataTest} + > + )}
+ {this.counterLength && ( + + )} {this.success && } diff --git a/src/components/input-chips/readme.md b/src/components/input-chips/readme.md index bc40fadf..7ca4dfa1 100644 --- a/src/components/input-chips/readme.md +++ b/src/components/input-chips/readme.md @@ -7,26 +7,28 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- | -| `chips` | `chips` | The chips on the component Should be passed this way: chips='["chip1", "chip2"]' | `string \| string[]` | `[]` | -| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` | -| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | -| `delimiters` | -- | The delimiter is used to add multiple chips in the same string. | `RegExp` | `/,\|;/` | -| `disableSubmit` | `disable-submit` | If `true`, the user cannot modify the value. | `boolean` | `false` | -| `disabled` | `disabled` | Disabled input | `boolean` | `false` | -| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` | -| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` | -| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` | -| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | -| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` | -| `label` | `label` | label in input, with he the input size increases. | `string` | `''` | -| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` | -| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` | -| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` | -| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` | -| `type` | `type` | Defining the type is important so that it is possible to carry out validations. Can be one of: 'text' and 'email; | `"email" \| "text"` | `'text'` | -| `value` | `value` | The value of the input. | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- | +| `chips` | `chips` | The chips on the component Should be passed this way: chips='["chip1", "chip2"]' | `string \| string[]` | `[]` | +| `counterLength` | `counter-length` | Passing true to display a counter of available size, it is necessary to pass another maxlength property. | `boolean` | `false` | +| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` | +| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | +| `delimiters` | -- | The delimiter is used to add multiple chips in the same string. | `RegExp` | `/,\|;/` | +| `disableSubmit` | `disable-submit` | If `true`, the user cannot modify the value. | `boolean` | `false` | +| `disabled` | `disabled` | Disabled input | `boolean` | `false` | +| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` | +| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` | +| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` | +| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | +| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` | +| `label` | `label` | label in input, with he the input size increases. | `string` | `''` | +| `maxChipsLength` | `max-chips-length` | Set maximum length value for chips | `number` | `undefined` | +| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` | +| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` | +| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` | +| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` | +| `type` | `type` | Defining the type is important so that it is possible to carry out validations. Can be one of: 'text' and 'email; | `"email" \| "text"` | `'text'` | +| `value` | `value` | The value of the input. | `string` | `''` | ## Events @@ -124,6 +126,7 @@ Type: `Promise` - [bds-tooltip](../tooltip) - [bds-icon](../icon) - [bds-typo](../typo) +- [bds-counter-text](../counter-text) ### Graph ```mermaid @@ -132,12 +135,14 @@ graph TD; bds-input-chips --> bds-tooltip bds-input-chips --> bds-icon bds-input-chips --> bds-typo + bds-input-chips --> bds-counter-text bds-chip-clickable --> bds-icon bds-chip-clickable --> bds-avatar bds-chip-clickable --> bds-typo bds-avatar --> bds-typo bds-avatar --> bds-icon bds-tooltip --> bds-typo + bds-counter-text --> bds-typo bds-test-component --> bds-input-chips style bds-input-chips fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/test-component/readme.md b/src/components/test-component/readme.md index 7f933ef1..f70f1a90 100644 --- a/src/components/test-component/readme.md +++ b/src/components/test-component/readme.md @@ -138,6 +138,7 @@ graph TD; bds-input-chips --> bds-tooltip bds-input-chips --> bds-icon bds-input-chips --> bds-typo + bds-input-chips --> bds-counter-text bds-tooltip --> bds-typo bds-input-editable --> bds-icon bds-input-editable --> bds-typo From 59bd1124ba3911c32877094d3653bc7d8d7e9fad Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Tue, 18 Jul 2023 18:31:06 -0300 Subject: [PATCH 07/10] fix(accordion): fixing open and close method --- src/components/accordion/accordion.scss | 6 +++++- src/components/accordion/accordion.tsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss index b22f8488..622eeda4 100644 --- a/src/components/accordion/accordion.scss +++ b/src/components/accordion/accordion.scss @@ -1,3 +1,6 @@ +@import 'resets'; +@import 'mixins'; + .accordion_header { display: grid; grid-auto-flow: column; @@ -76,9 +79,10 @@ -webkit-transition: height 0.5s; -moz-transition: height 0.5s; transition: height 0.5s; + @include custom-scroll; &_isOpen { - overflow: visible; + overflow: overlay; } & .container { diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index 1c5a7bfe..4d5f4cea 100644 --- a/src/components/accordion/accordion.tsx +++ b/src/components/accordion/accordion.tsx @@ -49,6 +49,7 @@ export class AccordionGroup { async close() { this.accheaders?.close(); this.accBodies?.close(); + this.isOpen = false; } // Método interno From 65bae2b935de25753131f9380c2c36cfe3966057 Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Fri, 21 Jul 2023 15:29:33 -0300 Subject: [PATCH 08/10] fix(input-chips): fixing input error --- src/components/input-chips/input-chips.tsx | 30 ++++++++++------------ 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/components/input-chips/input-chips.tsx b/src/components/input-chips/input-chips.tsx index fe9a5525..81e0f939 100644 --- a/src/components/input-chips/input-chips.tsx +++ b/src/components/input-chips/input-chips.tsx @@ -510,22 +510,20 @@ export class InputChips { {this.renderLabel()}
{this.internalChips.length > 0 && {this.renderChips()}} - {this.internalChips.length < this.maxChipsLength && ( - (this.nativeInput = input)} - class={{ input__container__text: true }} - name={this.inputName} - maxlength={this.maxlength} - placeholder={this.placeholder} - onInput={this.onInput} - onFocus={this.onFocus} - onBlur={() => this.handleOnBlur()} - onChange={() => this.handleChange} - value={this.value} - disabled={this.disabled} - data-test={this.dataTest} - > - )} + (this.nativeInput = input)} + class={{ input__container__text: true }} + name={this.inputName} + maxlength={this.maxlength} + placeholder={this.placeholder} + onInput={this.onInput} + onFocus={this.onFocus} + onBlur={() => this.handleOnBlur()} + onChange={() => this.handleChange} + value={this.value} + disabled={this.disabled} + data-test={this.dataTest} + >
{this.counterLength && ( From c6703d3d1b8bf86adf30179118fb385a1132cfef Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Fri, 21 Jul 2023 15:46:01 -0300 Subject: [PATCH 09/10] fix(sidebar): fixing prop name --- src/components.d.ts | 4 ++-- src/components/sidebar/readme.md | 2 +- src/components/sidebar/sidebar.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 609f0dd3..72b39a04 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -1665,7 +1665,7 @@ export namespace Components { /** * Width, number to define sidebar width. */ - "backgournd"?: sidebarBackground; + "background"?: sidebarBackground; /** * ; isOpen. Used to open sidebar. */ @@ -4542,7 +4542,7 @@ declare namespace LocalJSX { /** * Width, number to define sidebar width. */ - "backgournd"?: sidebarBackground; + "background"?: sidebarBackground; /** * ; isOpen. Used to open sidebar. */ diff --git a/src/components/sidebar/readme.md b/src/components/sidebar/readme.md index 940ba1e3..e71f4e50 100644 --- a/src/components/sidebar/readme.md +++ b/src/components/sidebar/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | ----------------- | ------------------ | ----------------------------------------------------------------------------------- | ---------------------------------------------------------- | ------------- | -| `backgournd` | `backgournd` | Width, number to define sidebar width. | `"surface-1" \| "surface-2" \| "surface-3" \| "surface-4"` | `'surface-2'` | +| `background` | `background` | Width, number to define sidebar width. | `"surface-1" \| "surface-2" \| "surface-3" \| "surface-4"` | `'surface-2'` | | `isOpen` | `is-open` | ; isOpen. Used to open sidebar. | `boolean` | `false` | | `margin` | `margin` | If true, a lateral margin will apear in the content. | `boolean` | `true` | | `sidebarPosition` | `sidebar-position` | sidebar position. Used to position the sidebar. Either on the left or on the right. | `"left" \| "right"` | `'left'` | diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index ac10c642..3465497d 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -44,7 +44,7 @@ export class Sidebar { /** * Width, number to define sidebar width. */ - @Prop() backgournd?: sidebarBackground = 'surface-2'; + @Prop() background?: sidebarBackground = 'surface-2'; @Method() async toggle() { @@ -92,7 +92,7 @@ export class Sidebar { is_open: this.isOpen, [`type_${this.type}`]: true, [`position_${this.sidebarPosition}`]: true, - [`background_${this.backgournd}`]: true, + [`background_${this.background}`]: true, }} style={{ width: `${this.width > 144 ? this.width : 144}px` }} > From 00a7a99566724b3a642fd8ffdccc47464496ff6f Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Fri, 21 Jul 2023 17:08:23 -0300 Subject: [PATCH 10/10] Update sidebar --- src/components/sidebar/sidebar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 3465497d..860efd32 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -94,7 +94,6 @@ export class Sidebar { [`position_${this.sidebarPosition}`]: true, [`background_${this.background}`]: true, }} - style={{ width: `${this.width > 144 ? this.width : 144}px` }} > {this.hasHeaderSlot && (