bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 13:23:34 +00:00
Code Issues Releases Wiki Activity

[CL-703] Use logical css properties in CL components (#14951)

Browse Source 
* update usage of margin-right with margin-inline-end

* update usage of margin-left with margin-inline-start

* update usage of paddiing-right with padding-inline-end

* update usage of paddiing-left with padding-inline-start

* update usage of radius to use logical properties
This commit is contained in:
Bryan Cunningham
2025-06-02 12:05:30 -04:00
committed by GitHub
parent 37e13050a5
commit c215fac818
33 changed files with 67 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
libs/components/src/async-actions/in-forms.stories.ts
View File

@@ -30,11 +30,11 @@ const template = `
<button type="button" bitSuffix bitIconButton="bwi-refresh" bitFormButton [bitAction]="refresh"></button>
</bit-form-field>
<button class="tw-mr-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
<button class="tw-mr-2" type="button" buttonType="secondary" bitButton bitFormButton>Cancel</button>
<button class="tw-mr-2" type="button" buttonType="danger" bitButton bitFormButton [bitAction]="delete">Delete</button>
<button class="tw-mr-2" type="button" buttonType="secondary" bitButton bitFormButton [disabled]="true">Disabled</button>
<button class="tw-mr-2" type="button" buttonType="secondary" bitIconButton="bwi-star" bitFormButton [bitAction]="delete">Delete</button>
<button class="tw-me-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
<button class="tw-me-2" type="button" buttonType="secondary" bitButton bitFormButton>Cancel</button>
<button class="tw-me-2" type="button" buttonType="danger" bitButton bitFormButton [bitAction]="delete">Delete</button>
<button class="tw-me-2" type="button" buttonType="secondary" bitButton bitFormButton [disabled]="true">Disabled</button>
<button class="tw-me-2" type="button" buttonType="secondary" bitIconButton="bwi-star" bitFormButton [bitAction]="delete">Delete</button>
</form>`;
@Component({

2
libs/components/src/async-actions/standalone.stories.ts
View File

@@ -12,7 +12,7 @@ import { IconButtonModule } from "../icon-button";
import { BitActionDirective } from "./bit-action.directive";
const template = /*html*/ `
<button bitButton buttonType="primary" [bitAction]="action" class="tw-mr-2">
<button bitButton buttonType="primary" [bitAction]="action" class="tw-me-2">
Perform action {{ statusEmoji }}
</button>
<button bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;

2
libs/components/src/banner/banner.component.html
View File

@@ -1,5 +1,5 @@
<div
class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-pl-4 tw-text-main tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-ps-4 tw-text-main tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
[ngClass]="bannerClass"
[attr.role]="useAlertRole ? 'status' : null"
[attr.aria-live]="useAlertRole ? 'polite' : null"

2
libs/components/src/breadcrumbs/breadcrumb.component.html
View File

@@ -1,6 +1,6 @@
<ng-template>
@if (icon) {
<i class="bwi {{ icon }} !tw-mr-2" aria-hidden="true"></i>
<i class="bwi {{ icon }} !tw-me-2" aria-hidden="true"></i>
}
<ng-content></ng-content>
</ng-template>

18
libs/components/src/button/button.stories.ts
View File

@@ -88,13 +88,13 @@ export const DisabledWithAttribute: Story = {
props: args,
template: `
@if (disabled) {
<button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
} @else {
<button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
<button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
<button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
<button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
<button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
<button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
}
`,
}),
@@ -110,10 +110,10 @@ export const Block: Story = {
template: `
<span class="tw-flex">
<button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
<a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">[block]="true" Link</a>
<a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ms-2">[block]="true" Link</a>
<button bitButton [buttonType]="buttonType" block class="tw-ml-2">block Button</button>
<a bitButton [buttonType]="buttonType" block href="#" class="tw-ml-2">block Link</a>
<button bitButton [buttonType]="buttonType" block class="tw-ms-2">block Button</button>
<a bitButton [buttonType]="buttonType" block href="#" class="tw-ms-2">block Link</a>
</span>
`,
}),

2
libs/components/src/callout/callout.component.html
View File

@@ -1,5 +1,5 @@
<aside
class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-pl-3 tw-pr-2 tw-py-2 tw-leading-5 tw-text-main"
class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-ps-3 tw-pe-2 tw-py-2 tw-leading-5 tw-text-main"
[ngClass]="calloutClass"
[attr.aria-labelledby]="titleId"
>

2
libs/components/src/checkbox/checkbox.component.ts
View File

@@ -27,7 +27,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
"tw-border-secondary-500",
"tw-h-[1.12rem]",
"tw-w-[1.12rem]",
"tw-mr-1.5",
"tw-me-1.5",
"tw-flex-none", // Flexbox fix for bit-form-control
"before:tw-content-['']",

8
libs/components/src/checkbox/checkbox.stories.ts
View File

@@ -197,15 +197,15 @@ export const Custom: Story = {
<div class="tw-flex tw-flex-col tw-w-32">
<label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
A-Z
<input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
<input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
</label>
<label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
a-z
<input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
<input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
</label>
<label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
0-9
<input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
<input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
</label>
</div>
`,
@@ -232,7 +232,7 @@ export const InTableRow: Story = {
type="checkbox"
bitCheckbox
id="checkAll"
class="tw-mr-2"
class="tw-me-2"
/>
<label for="checkAll" class="tw-mb-0">
All

4
libs/components/src/chip-select/chip-select.component.html
View File

@@ -14,7 +14,7 @@
<!-- Primary button -->
<button
type="button"
class="tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
class="tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-ps-3 last:tw-pe-3 [&:not(:last-child)]:tw-pe-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
data-fvw-target
[ngClass]="{
'tw-cursor-not-allowed': disabled,
@@ -45,7 +45,7 @@
type="button"
[attr.aria-label]="'removeItem' | i18n: label"
[disabled]="disabled"
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-mr-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-me-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
[ngClass]="{
'tw-cursor-not-allowed': disabled,
}"

4
libs/components/src/dialog/dialog/dialog.stories.ts
View File

@@ -89,7 +89,7 @@ export const Default: Story = {
<button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
<button
[disabled]="loading"
class="tw-ml-auto"
class="tw-ms-auto"
bitIconButton="bwi-trash"
buttonType="danger"
size="default"
@@ -252,7 +252,7 @@ export const WithCards: Story = {
<button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
<button
[disabled]="loading"
class="tw-ml-auto"
class="tw-ms-auto"
bitIconButton="bwi-trash"
buttonType="danger"
size="default"

2
libs/components/src/drawer/drawer-header.component.ts
View File

@@ -18,7 +18,7 @@ import { DrawerCloseDirective } from "./drawer-close.directive";
imports: [CommonModule, DrawerCloseDirective, TypographyModule, IconButtonModule, I18nPipe],
templateUrl: "drawer-header.component.html",
host: {
class: "tw-block tw-pl-4 tw-pr-2 tw-py-2",
class: "tw-block tw-ps-4 tw-pe-2 tw-py-2",
},
})
export class DrawerHeaderComponent {

2
libs/components/src/form-control/form-control.component.html
View File

@@ -21,7 +21,7 @@
</span>
</label>
@if (hasError) {
<div class="tw-mt-1 tw-text-danger tw-text-xs tw-ml-0.5">
<div class="tw-mt-1 tw-text-danger tw-text-xs tw-ms-0.5">
<i class="bwi bwi-error"></i> {{ displayError }}
</div>
}

2
libs/components/src/form-control/form-control.component.ts
View File

@@ -40,7 +40,7 @@ export class FormControlComponent {
@HostBinding("class") get classes() {
return []
.concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"])
.concat(this.inline ? ["tw-inline-block", "tw-me-4"] : ["tw-block"])
.concat(this.disableMargin ? [] : ["tw-mb-4"]);
}

16
libs/components/src/form-field/form-field.component.html
View File

@@ -20,7 +20,7 @@
<div class="tw-absolute tw-size-full tw-top-0 tw-pointer-events-none tw-z-20">
<div class="tw-size-full tw-flex">
<div
class="tw-min-w-3 tw-border-r-0 group-focus-within/bit-form-field:tw-border-r-0 !tw-rounded-l-lg"
class="tw-min-w-3 tw-border-r-0 group-focus-within/bit-form-field:tw-border-r-0 !tw-rounded-s-lg"
[ngClass]="inputBorderClasses"
></div>
<div
@@ -40,7 +40,7 @@
</label>
</div>
<div
class="tw-min-w-3 tw-grow tw-border-l-0 group-focus-within/bit-form-field:tw-border-l-0 !tw-rounded-r-lg"
class="tw-min-w-3 tw-grow tw-border-l-0 group-focus-within/bit-form-field:tw-border-l-0 !tw-rounded-e-lg"
[ngClass]="inputBorderClasses"
></div>
</div>
@@ -50,7 +50,7 @@
>
<div
#prefixContainer
class="tw-flex tw-items-center tw-gap-1 tw-pl-3 tw-py-2"
class="tw-flex tw-items-center tw-gap-1 tw-ps-3 tw-py-2"
[hidden]="!prefixHasChildren()"
>
<ng-container *ngTemplateOutlet="prefixContent"></ng-container>
@@ -59,15 +59,15 @@
class="tw-w-full tw-relative tw-py-2 has-[bit-select]:tw-p-0 has-[bit-multi-select]:tw-p-0 has-[input:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea:read-only:not([hidden])]:tw-bg-secondary-100"
data-default-content
[ngClass]="[
prefixHasChildren() ? '' : 'tw-rounded-l-lg tw-pl-3',
suffixHasChildren() ? '' : 'tw-rounded-r-lg tw-pr-3',
prefixHasChildren() ? '' : 'tw-rounded-s-lg tw-ps-3',
suffixHasChildren() ? '' : 'tw-rounded-e-lg tw-pe-3',
]"
>
<ng-container *ngTemplateOutlet="defaultContent"></ng-container>
</div>
<div
#suffixContainer
class="tw-flex tw-items-center tw-gap-1 tw-pr-3 tw-py-2"
class="tw-flex tw-items-center tw-gap-1 tw-pe-3 tw-py-2"
[hidden]="!suffixHasChildren()"
>
<ng-container *ngTemplateOutlet="suffixContent"></ng-container>
@@ -92,7 +92,7 @@
<div
#prefixContainer
[hidden]="!prefixHasChildren()"
class="tw-flex tw-items-center tw-gap-1 tw-pl-1"
class="tw-flex tw-items-center tw-gap-1 tw-ps-1"
>
<ng-container *ngTemplateOutlet="prefixContent"></ng-container>
</div>
@@ -105,7 +105,7 @@
<div
#suffixContainer
[hidden]="!suffixHasChildren()"
class="tw-flex tw-items-center tw-gap-1 tw-pr-1"
class="tw-flex tw-items-center tw-gap-1 tw-pe-1"
>
<ng-container *ngTemplateOutlet="suffixContent"></ng-container>
</div>

2
libs/components/src/layout/layout.component.html
View File

@@ -18,7 +18,7 @@
<main
[id]="mainContentId"
tabindex="-1"
class="tw-overflow-auto tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ml-0 tw-ml-16"
class="tw-overflow-auto tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ms-0 tw-ms-16"
>
<ng-content></ng-content>

6
libs/components/src/link/link.stories.ts
View File

@@ -147,10 +147,10 @@ export const Disabled: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
<button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
<button bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
<button bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
<div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
<button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
<button bitLink disabled linkType="contrast">Contrast</button>
</div>
`,
}),

6
libs/components/src/multi-select/multi-select.component.html
View File

@@ -20,14 +20,14 @@
appendTo="body"
>
<ng-template ng-loadingspinner-tmp>
<i class="bwi bwi-spinner bwi-spin tw-mr-1" [title]="loadingText" aria-hidden="true"></i>
<i class="bwi bwi-spinner bwi-spin tw-me-1" [title]="loadingText" aria-hidden="true"></i>
</ng-template>
<ng-template ng-label-tmp let-item="item" let-clear="clear">
<button
type="button"
bitBadge
variant="primary"
class="tw-mr-1 disabled:tw-border-0 tw-flex tw-gap-1.5 tw-items-center"
class="tw-me-1 disabled:tw-border-0 tw-flex tw-gap-1.5 tw-items-center"
[disabled]="disabled"
(click)="clear(item)"
>
@@ -47,7 +47,7 @@
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
}
</div>
<div class="tw-mr-2 tw-flex-initial">
<div class="tw-me-2 tw-flex-initial">
@if (item.icon != null) {
<i class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
}

2
libs/components/src/navigation/nav-group.component.html
View File

@@ -15,7 +15,7 @@
<ng-template #button>
<button
type="button"
class="tw-ml-auto"
class="tw-ms-auto"
[bitIconButton]="
open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
"

4
libs/components/src/navigation/nav-item.component.html
View File

@@ -52,7 +52,7 @@
class="tw-truncate"
[ngClass]="[
variant === 'tree' ? 'tw-py-1' : 'tw-py-2',
data.open ? 'tw-pr-4' : 'tw-text-center',
data.open ? 'tw-pe-4' : 'tw-text-center',
]"
>
<i
@@ -103,7 +103,7 @@
<div
*ngIf="data.open"
class="tw-flex -tw-ml-3 tw-pr-4 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
class="tw-flex -tw-ms-3 tw-pe-4 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
[ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']"
>
<ng-content select="[slot=end]"></ng-content>

4
libs/components/src/navigation/nav-item.stories.ts
View File

@@ -83,7 +83,7 @@ export const WithChildButtons: Story = {
<bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection-shared">
<button
slot="end"
class="tw-ml-auto"
class="tw-ms-auto"
[bitIconButton]="'bwi-pencil-square'"
[buttonType]="'light'"
size="small"
@@ -91,7 +91,7 @@ export const WithChildButtons: Story = {
></button>
<button
slot="end"
class="tw-ml-auto"
class="tw-ms-auto"
[bitIconButton]="'bwi-check'"
[buttonType]="'light'"
size="small"

2
libs/components/src/popover/popover.component.html
View File

@@ -4,7 +4,7 @@
<div
class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-background tw-pb-4 tw-pt-2 tw-text-main"
>
<div class="tw-mb-1 tw-mr-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-pl-4">
<div class="tw-mb-1 tw-me-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-ps-4">
<h2 bitTypography="h5" class="tw-mt-1 tw-font-semibold">
{{ title }}
</h2>

6
libs/components/src/popover/popover.stories.ts
View File

@@ -62,7 +62,7 @@ type Story = StoryObj<PopoverTriggerForDirective>;
const popoverContent = `
<bit-popover [title]="'Example Title'" #myPopover>
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
<ul class="tw-mt-2 tw-mb-0 tw-pl-4">
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li>Dolor sit amet consectetur</li>
<li>Esse labore veniam tempora</li>
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
@@ -96,7 +96,7 @@ export const Open: Story = {
template: `
<bit-popover [title]="'Example Title'" #myPopover="popoverComponent">
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
<ul class="tw-mt-2 tw-mb-0 tw-pl-4">
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li>Dolor sit amet consectetur</li>
<li>Esse labore veniam tempora</li>
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
@@ -118,7 +118,7 @@ export const OpenLongTitle: Story = {
template: `
<bit-popover [title]="'Example Title that is really long it wraps 2 lines'" #myPopover="popoverComponent">
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
<ul class="tw-mt-2 tw-mb-0 tw-pl-4">
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li>Dolor sit amet consectetur</li>
<li>Esse labore veniam tempora</li>
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>

2
libs/components/src/progress/progress.component.html
View File

@@ -11,7 +11,7 @@
<div class="tw-flex tw-h-full tw-flex-wrap tw-items-center tw-overflow-hidden">
<!-- If text is too long to fit, wrap it below to hide -->
<div class="tw-h-full">&nbsp;</div>
<div class="tw-pr-1">{{ textContent }}</div>
<div class="tw-pe-1">{{ textContent }}</div>
</div>
}
</div>

2
libs/components/src/radio-button/radio-input.component.ts
View File

@@ -30,7 +30,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
"tw-border-secondary-600",
"tw-w-[1.12rem]",
"tw-h-[1.12rem]",
"tw-mr-1.5",
"tw-me-1.5",
"tw-flex-none", // Flexbox fix for bit-form-control
"hover:tw-border-2",

2
libs/components/src/search/search.component.html
View File

@@ -13,7 +13,7 @@
[type]="inputType"
[id]="id"
[placeholder]="placeholder ?? ('search' | i18n)"
class="tw-pl-9"
class="tw-ps-9"
[ngModel]="searchText"
(ngModelChange)="onChange($event)"
(blur)="onTouch()"

2
libs/components/src/select/select.component.html
View File

@@ -12,7 +12,7 @@
>
<ng-template ng-option-tmp let-item="item">
<div class="tw-flex" [title]="item.label">
<div class="tw-mr-2 tw-flex-initial">
<div class="tw-me-2 tw-flex-initial">
@if (item.icon != null) {
<i class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
}

2
libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
View File

@@ -117,7 +117,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
<bit-popover [title]="'Password help'" #myPopover>
<div>A strong password has the following:</div>
<ul class="tw-mt-2 tw-mb-0 tw-pl-4">
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li>Letters</li>
<li>Numbers</li>
<li>Special characters</li>

2
libs/components/src/table/sortable.component.ts
View File

@@ -17,7 +17,7 @@ import { TableComponent } from "./table.component";
(click)="setActive()"
>
<ng-content></ng-content>
<i class="bwi tw-ml-2" [ngClass]="icon"></i>
<i class="bwi tw-ms-2" [ngClass]="icon"></i>
</button>
`,
standalone: true,

2
libs/components/src/tabs/shared/tab-header.component.ts
View File

@@ -7,7 +7,7 @@ import { Component } from "@angular/core";
selector: "bit-tab-header",
host: {
class:
"tw-h-16 tw-pl-4 tw-bg-background-alt tw-flex tw-items-end tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300",
"tw-h-16 tw-ps-4 tw-bg-background-alt tw-flex tw-items-end tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300",
},
template: `<ng-content></ng-content>`,
standalone: true,

2
libs/components/src/tabs/tab-nav-bar/tab-link.component.html
View File

@@ -14,7 +14,7 @@
<div class="group-hover/tab:tw-underline">
<ng-content></ng-content>
</div>
<div class="tw-font-normal tw-ml-2 empty:tw-ml-0">
<div class="tw-font-normal tw-ms-2 empty:tw-ms-0">
<ng-content select="[slot=end]"></ng-content>
</div>
</a>

4
libs/components/src/tabs/tabs.stories.ts
View File

@@ -90,7 +90,7 @@ export const ContentTabs: Story = {
<bit-tab label="Second Tab">Second Tab Content</bit-tab>
<bit-tab>
<ng-template bitTabLabel>
<i class="bwi bwi-search tw-pr-1"></i> Template Label
<i class="bwi bwi-search tw-pe-1"></i> Template Label
</ng-template>
Template Label Content
</bit-tab>
@@ -112,7 +112,7 @@ export const NavigationTabs: Story = {
<bit-tab-link [route]="['item-3']">Item 3</bit-tab-link>
<bit-tab-link [route]="['item-with-child-counter']">
Item With Counter
<div slot="end" class="tw-pl-2 tw-text-muted">
<div slot="end" class="tw-ps-2 tw-text-muted">
42
</div>
</bit-tab-link>

2
libs/components/src/toast/toast.component.html
View File

@@ -19,7 +19,7 @@
</div>
<!-- Overriding hover and focus-visible colors for a11y against colored background -->
<button
class="tw-ml-auto hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
class="tw-ms-auto hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
bitIconButton="bwi-close"
buttonType="main"
type="button"

4
libs/components/src/toggle-group/toggle.component.ts
View File

@@ -72,8 +72,8 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
"hover:tw-bg-primary-100",
"group-first-of-type/toggle:tw-border-l",
"group-first-of-type/toggle:tw-rounded-l-full",
"group-last-of-type/toggle:tw-rounded-r-full",
"group-first-of-type/toggle:tw-rounded-s-full",
"group-last-of-type/toggle:tw-rounded-e-full",
"peer-focus-visible/toggle-input:tw-outline-none",
"peer-focus-visible/toggle-input:tw-ring",