Skip to content

refactor: text-align and vertical-align to tailwind #1094

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JammingBen merged 6 commits into from
Aug 20, 2025
Merged

refactor: text-align and vertical-align to tailwind #1094

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
49fb3ca
refactor: replace oc-text-center with tailwind class
JammingBen Aug 19, 2025
5daf79e
refactor: replace oc-text-left with tailwind class
JammingBen Aug 19, 2025
48dc0f8
refactor: replace oc-text-right with tailwind class
JammingBen Aug 19, 2025
3f0e00c
refactor: migrate custom text-align to tailwind
JammingBen Aug 19, 2025
8351019
refactor: migrate custom vertical-align to tailwind
JammingBen Aug 19, 2025
b8b627e
fix: re-add css that has been removed accidentally
JammingBen Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
</head>
<body>
<div id="splash-incompatible" class="splash-banner splash-hide">
<div class="oc-card oc-border oc-rounded oc-width-large oc-text-center">
<div class="oc-card oc-border oc-rounded oc-width-large text-center">
<div class="oc-card-header">
<div class="flex items-center justify-center">
<span class="mr-2 oc-icon oc-icon-m oc-icon-warning">
Expand Down
3 changes: 1 addition & 2 deletions packages/design-system/src/components/OcAvatar/OcAvatar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<span
class="vue-avatar--wrapper oc-avatar"
class="vue-avatar--wrapper oc-avatar text-center"
:style="style"
:width="width"
:aria-label="accessibleLabel === '' ? null : accessibleLabel"
Expand Down Expand Up @@ -127,7 +127,6 @@ const randomBackgroundColor = (seed: number, colors: string[]) => {
.oc-avatar {
align-items: center;
justify-content: center;
text-align: center;
user-select: none;
display: flex;
flex-shrink: 0;
Expand Down
15 changes: 5 additions & 10 deletions packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
:to="item.isTruncationPlaceholder ? lastHiddenItem.to : item.to"
class="first:text-base text-xl"
>
<span class="oc-breadcrumb-item-text hover:underline">{{ item.text }}</span>
<span class="oc-breadcrumb-item-text hover:underline align-sub">{{ item.text }}</span>
</router-link>
<oc-button
v-else-if="item.onClick"
Expand All @@ -47,6 +47,7 @@
:class="[
'oc-breadcrumb-item-text',
'hover:underline',
'align-sub',
{
'oc-breadcrumb-item-text-last': index === displayItems.length - 1
}
Expand All @@ -56,7 +57,7 @@
</oc-button>
<span
v-else
class="oc-breadcrumb-item-text first:text-base text-xl"
class="oc-breadcrumb-item-text first:text-base text-xl align-sub"
:aria-current="getAriaCurrent(index)"
tabindex="-1"
v-text="item.text"
Expand All @@ -65,7 +66,7 @@
v-if="index !== displayItems.length - 1"
color="var(--oc-role-on-surface)"
name="arrow-right-s"
class="mx-1"
class="mx-1 align-sub"
fill-type="line"
/>
<template v-if="showContextActions && index === displayItems.length - 1">
Expand All @@ -76,7 +77,7 @@
appearance="raw"
no-hover
>
<oc-icon name="more-2" color="var(--oc-role-on-surface)" />
<oc-icon name="more-2" color="var(--oc-role-on-surface)" class="align-middle" />
</oc-button>
<oc-drop
drop-id="oc-breadcrumb-contextmenu"
Expand Down Expand Up @@ -319,10 +320,6 @@ const dropItemStyling = (
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

&-last {
vertical-align: text-bottom;
}
}

&-mobile-current,
Expand All @@ -342,7 +339,6 @@ const dropItemStyling = (
}

#oc-breadcrumb-contextmenu-trigger > span {
vertical-align: middle;
border: 3px solid transparent;
}

Expand Down Expand Up @@ -371,7 +367,6 @@ const dropItemStyling = (
span:first-of-type {
color: var(--oc-role-on-surface);
display: inline-block;
vertical-align: sub;
}
}
}
Expand Down
36 changes: 18 additions & 18 deletions packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,26 @@ exports[`OcBreadcrumb > displays all items 1`] = `
"<nav id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default" aria-label="Breadcrumbs">
<ol class="oc-breadcrumb-list flex m-0 p-0">
<li data-key="0" class="oc-breadcrumb-list-item flex items-center">
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">First folder</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub">First folder</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center oc-invisible-sr">
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">...</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub">...</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="2" class="oc-breadcrumb-list-item flex items-center">
<oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">Subfolder</span></oc-button-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub">Subfolder</span></oc-button-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="3" class="oc-breadcrumb-list-item flex items-center">
<router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">Deep</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub">Deep</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="4" class="oc-breadcrumb-list-item flex items-center"><span class="oc-breadcrumb-item-text first:text-base text-xl" tabindex="-1">Deeper ellipsize in responsive mode</span>
<li data-key="4" class="oc-breadcrumb-list-item flex items-center"><span class="oc-breadcrumb-item-text first:text-base text-xl align-sub" tabindex="-1">Deeper ellipsize in responsive mode</span>
<!--v-if-->
<!--v-if-->
</li>
Expand All @@ -40,26 +40,26 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
"<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead" aria-label="Breadcrumbs">
<ol class="oc-breadcrumb-list flex m-0 p-0">
<li data-key="0" class="oc-breadcrumb-list-item flex items-center">
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">First folder</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub">First folder</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center oc-invisible-sr">
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">...</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub">...</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="2" class="oc-breadcrumb-list-item flex items-center">
<oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">Subfolder</span></oc-button-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub">Subfolder</span></oc-button-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="3" class="oc-breadcrumb-list-item flex items-center">
<router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">Deep</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub">Deep</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="4" class="oc-breadcrumb-list-item flex items-center"><span class="oc-breadcrumb-item-text first:text-base text-xl" tabindex="-1">Deeper ellipsize in responsive mode</span>
<li data-key="4" class="oc-breadcrumb-list-item flex items-center"><span class="oc-breadcrumb-item-text first:text-base text-xl align-sub" tabindex="-1">Deeper ellipsize in responsive mode</span>
<!--v-if-->
<!--v-if-->
</li>
Expand Down
1 change: 0 additions & 1 deletion packages/design-system/src/components/OcButton/OcButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,6 @@ const onClick = (event: MouseEvent) => {
border: 0;
box-sizing: border-box;
display: inline-flex;
text-align: left;

&-justify-content {
&-left {
Expand Down
9 changes: 8 additions & 1 deletion packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,15 @@ const keydownEnter = (event: KeyboardEvent) => {
emit('click', event)
}
</script>
<style>
@reference 'tailwindcss';

@layer components {
.oc-checkbox {
@apply align-middle;
}
}
</style>
<style lang="scss">
@mixin oc-form-check-size($factor) {
height: $oc-size-form-check-default * $factor;
Expand All @@ -112,7 +120,6 @@ const keydownEnter = (event: KeyboardEvent) => {
border: 2px solid var(--oc-role-outline);
display: inline-block;
overflow: hidden;
vertical-align: middle;
background-color: transparent;
outline: none;

Expand Down
4 changes: 1 addition & 3 deletions packages/design-system/src/components/OcContextualHelper/OcContextualHelper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
:id="buttonId"
:aria-label="$gettext('Show more information')"
appearance="raw"
class="align-middle"
no-hover
>
<oc-icon name="question" fill-type="line" size="small" />
Expand Down Expand Up @@ -55,8 +56,5 @@ const props = computed(() => ({ title, text, list, endText, readMoreLink }))
<style lang="scss">
.oc-contextual-helper {
display: inline-block;
.oc-button {
vertical-align: middle;
}
}
</style>
3 changes: 1 addition & 2 deletions packages/design-system/src/components/OcDropzone/OcDropzone.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ defineOptions({ name: 'OcDropzone' })

@layer components {
.oc-dropzone {
@apply p-4;
@apply p-4 text-center;
}
}
</style>
Expand All @@ -33,7 +33,6 @@ defineOptions({ name: 'OcDropzone' })
display: flex;
justify-content: center;
opacity: 0.9;
text-align: center;

* {
pointer-events: none;
Expand Down
9 changes: 8 additions & 1 deletion packages/design-system/src/components/OcIcon/OcIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,15 @@ const transformSvgElement = (svg: SVGElement) => {
return svg
}
</script>
<style>
@reference 'tailwindcss';

@layer components {
.oc-icon {
@apply align-baseline;
}
}
</style>
<style lang="scss">
@mixin oc-icon-size($factor) {
height: $oc-size-icon-default * $factor;
Expand All @@ -113,7 +121,6 @@ const transformSvgElement = (svg: SVGElement) => {
.oc-icon {
// SVG wrapper
display: inline-block;
vertical-align: baseline;

svg {
display: block;
Expand Down
5 changes: 1 addition & 4 deletions packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="info-drop-content">
<div class="flex justify-between info-header oc-border-b pb-2">
<h4 class="m-0 info-title text-lg" v-text="$gettext(title)" />
<oc-button appearance="raw" :aria-label="$gettext('Close')">
<oc-button appearance="raw" :aria-label="$gettext('Close')" class="align-middle">
<oc-icon name="close" fill-type="line" size="medium" />
</oc-button>
</div>
Expand Down Expand Up @@ -122,9 +122,6 @@ export default {
<style lang="scss">
.oc-info-drop {
display: inline-block;
.oc-button {
vertical-align: middle;
}
.info-header {
align-items: center;
}
Expand Down
3 changes: 1 addition & 2 deletions packages/design-system/src/components/OcLoader/OcLoader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()

@layer components {
.oc-loader {
@apply my-5;
@apply my-5 align-baseline;
}
}
</style>
Expand All @@ -36,7 +36,6 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
display: block;
height: 15px;
overflow: hidden;
vertical-align: baseline;
width: 100%;
position: relative;

Expand Down
3 changes: 1 addition & 2 deletions packages/design-system/src/components/OcModal/OcModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</template>
</div>

<div v-if="!hideActions" class="oc-modal-body-actions flex justify-end p-4">
<div v-if="!hideActions" class="oc-modal-body-actions flex justify-end p-4 text-right">
<div class="oc-modal-body-actions-grid">
<oc-button
class="oc-modal-body-actions-cancel"
Expand Down Expand Up @@ -361,7 +361,6 @@ export default {
color: var(--oc-role-on-surface);

&-actions {
text-align: right;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

Expand Down
8 changes: 4 additions & 4 deletions packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`OcModal > displays input 1`] = `
<!--v-if-->
<oc-text-input-stub label="Folder name" id="oc-textinput-1" type="text" modelvalue="New folder" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="oc-modal-body-input -mb-5 pb-4"></oc-text-input-stub>
</div>
<div class="oc-modal-body-actions flex justify-end p-4">
<div class="oc-modal-body-actions flex justify-end p-4 text-right">
<div class="oc-modal-body-actions-grid">
<oc-button-stub appearance="outline" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
<oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-confirm ml-2">Confirm</oc-button-stub>
Expand All @@ -35,7 +35,7 @@ exports[`OcModal > displays loading state 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="oc-modal-body-actions flex justify-end p-4">
<div class="oc-modal-body-actions flex justify-end p-4 text-right">
<div class="oc-modal-body-actions-grid"><button type="button" disabled="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-cancel">
<!--v-if-->
<!-- @slot Content of the button --> Cancel
Expand All @@ -58,7 +58,7 @@ exports[`OcModal > matches snapshot 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="oc-modal-body-actions flex justify-end p-4">
<div class="oc-modal-body-actions flex justify-end p-4 text-right">
<div class="oc-modal-body-actions-grid">
<oc-button-stub appearance="outline" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
<oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-confirm ml-2">Confirm</oc-button-stub>
Expand All @@ -81,7 +81,7 @@ exports[`OcModal > overrides props message with slot 1`] = `
<p>Slot message</p>
</div>
</div>
<div class="oc-modal-body-actions flex justify-end p-4">
<div class="oc-modal-body-actions flex justify-end p-4 text-right">
<div class="oc-modal-body-actions-grid">
<oc-button-stub appearance="outline" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
<oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-confirm ml-2">Confirm</oc-button-stub>
Expand Down
9 changes: 8 additions & 1 deletion packages/design-system/src/components/OcRadio/OcRadio.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,15 @@ const labelClasses = computed(() => ({
'oc-cursor-pointer': !disabled
}))
</script>
<style>
@reference 'tailwindcss';

@layer components {
.oc-radio {
@apply align-middle;
}
}
</style>
<style lang="scss">
@mixin oc-form-check-size($factor) {
height: $oc-size-form-check-default * $factor;
Expand All @@ -88,7 +96,6 @@ const labelClasses = computed(() => ({

transition: 0.2s ease-in-out;
transition-property: background-color, border;
vertical-align: middle;
width: 1rem;

&:not(:disabled) {
Expand Down
Loading