Skip to content

refactor: box-shadow, opacity, filter and pointer-event to tailwind #1142

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 5 commits into from
Sep 4, 2025
Merged

refactor: box-shadow, opacity, filter and pointer-event to tailwind #1142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1c594e2
refactor: box-shadow to tailwind
JammingBen Sep 3, 2025
8129275
refactor: opacity to tailwind
JammingBen Sep 3, 2025
3c04e4d
refactor: filter to tailwind
JammingBen Sep 3, 2025
19919b3
refactor: pointer-event to tailwind
JammingBen Sep 3, 2025
afc593d
refactor: remove blank
JammingBen Sep 3, 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
4 changes: 2 additions & 2 deletions ...ges/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
<div class="oc-card bg-transparent">
<div class="oc-card-header border-b-0 px-4 pt-4">
<div class="flex justify-between items-center">
<!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex raw-hover-surface oc-bottom-drawer-close-button">
<!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default raw-hover-surface oc-bottom-drawer-close-button">
<!--v-if-->
<!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
if (__props.accessibleLabel !== &quot;&quot;) {
Expand All @@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
</button>
</div>
</div>
<div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex raw-hover-surface" id="action-button">
<div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default raw-hover-surface" id="action-button">
<!--v-if-->
<!-- @slot Content of the button --> action button
</button></div>
Expand Down
6 changes: 1 addition & 5 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 @@ -317,7 +317,7 @@ const dropItemStyling = (

@layer components {
.oc-breadcrumb-item-dragover {
@apply bg-role-secondary-container rounded-xs transition-[background,border] duration-100;
@apply bg-role-secondary-container rounded-xs transition-[background,border] duration-100 ring-4 ring-role-secondary-container;
}

.oc-breadcrumb-list #oc-breadcrumb-contextmenu li button {
Expand All @@ -335,10 +335,6 @@ const dropItemStyling = (
</style>
<style lang="scss">
.oc-breadcrumb {
&-item-dragover {
box-shadow: 0 0 0 5px var(--oc-role-secondary-container);
}

&-list {
list-style: none;
flex-wrap: nowrap;
Expand Down
11 changes: 1 addition & 10 deletions 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 @@ -18,7 +18,7 @@
'no-hover': noHover
}
]"
class="oc-button inline-flex"
class="oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default"
v-on="handlers"
>
<oc-spinner v-if="showSpinner" size="small" class="spinner" />
Expand Down Expand Up @@ -242,10 +242,6 @@ const onClick = (event: MouseEvent) => {
align-items: center;

@layer components {
&:hover {
cursor: pointer;
}

&-primary {
@include oc-button-color-role(var(--oc-role-primary), var(--oc-role-on-primary));
}
Expand Down Expand Up @@ -306,11 +302,6 @@ const onClick = (event: MouseEvent) => {
background-color: var(--oc-role-surface-container);
filter: none !important;
}

&:disabled {
cursor: default;
opacity: 0.6;
}
}
}
.quick-action-button,
Expand Down
11 changes: 1 addition & 10 deletions 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 @@ -5,7 +5,7 @@
v-model="model"
type="checkbox"
name="checkbox"
class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden"
class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default"
:class="{
'oc-checkbox-checked bg-white': isChecked,
'size-3': size === 'small',
Expand Down Expand Up @@ -110,10 +110,6 @@ const keydownEnter = (event: KeyboardEvent) => {
background-position: 50% 50% !important;
background-repeat: no-repeat !important;

&:hover {
cursor: pointer;
}

&-checked,
:checked {
@include svg-fill($internal-form-checkbox-image, '#000', '#000');
Expand All @@ -123,11 +119,6 @@ const keydownEnter = (event: KeyboardEvent) => {
@include svg-fill($internal-form-checkbox-indeterminate-image, '#000', '#000');
}

&:disabled {
cursor: default;
opacity: 0.4;
}

&:disabled:checked {
@include svg-fill($internal-form-checkbox-image, '#000', $form-radio-disabled-icon-color);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`OcDatePicker > renders 1`] = `
<!--v-if-->
</label>
<div class="relative">
<!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
<!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="date" value="">
<!--v-if-->
</div>
<div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
Expand Down
13 changes: 1 addition & 12 deletions packages/design-system/src/components/OcDrop/OcDrop.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,7 @@
>
<slot />
</oc-bottom-drawer>
<div
v-else
:id="dropId"
ref="drop"
class="oc-drop oc-box-shadow-medium rounded-sm"
@click="onClick"
>
<div v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
<div
v-if="$slots.default"
:class="['oc-card oc-card-body', getTailwindPaddingClass(paddingSize)]"
Expand Down Expand Up @@ -351,10 +345,5 @@ watch(
background-color: transparent;
font-size: inherit;
line-height: inherit;

.tippy-content {
// note: needed so that the box shadow from `oc-box-shadow-medium` doesn't get suppressed
padding: calc(var(--spacing) * 2);
}
}
</style>
6 changes: 3 additions & 3 deletions packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
style="transition-duration: 300ms;"
>
<div
class="oc-drop oc-box-shadow-medium rounded-sm"
class="oc-drop shadow-md/20 rounded-sm"
id="oc-drop-15"
>
<div
Expand Down Expand Up @@ -79,7 +79,7 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
style="transition-duration: 250ms;"
>
<div
class="oc-drop oc-box-shadow-medium rounded-sm"
class="oc-drop shadow-md/20 rounded-sm"
id="oc-drop-15"
>
<div
Expand Down Expand Up @@ -127,7 +127,7 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
style="transition-duration: 300ms;"
>
<div
class="oc-drop oc-box-shadow-medium rounded-sm"
class="oc-drop shadow-md/20 rounded-sm"
id="oc-drop-15"
>
<div
Expand Down
13 changes: 3 additions & 10 deletions packages/design-system/src/components/OcDropzone/OcDropzone.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<div class="oc-dropzone flex justify-center items-center border-dashed border-role-outline">
<div
class="oc-dropzone flex justify-center items-center border-dashed border-role-outline opacity-90 [&_*]:pointer-events-none"
>
<!-- @slot Message inside of the dropzone -->
<slot />
</div>
Expand All @@ -26,12 +28,3 @@ defineOptions({ name: 'OcDropzone' })
}
}
</style>
<style lang="scss">
.oc-dropzone {
opacity: 0.9;

* {
pointer-events: none;
}
}
</style>
4 changes: 1 addition & 3 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 @@ -7,7 +7,7 @@
:id="elementId"
ref="ocModal"
:class="classes"
class="border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto"
class="border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl"
tabindex="0"
role="dialog"
aria-modal="true"
Expand Down Expand Up @@ -326,8 +326,6 @@ export default {

<style lang="scss">
.oc-modal {
box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);

&-background {
z-index: var(--oc-z-index-modal);
}
Expand Down
12 changes: 6 additions & 6 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 @@ -3,7 +3,7 @@
exports[`OcModal > displays input 1`] = `
"<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
<focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
<div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
<div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
<div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
<h2 id="oc-modal-title" class="truncate m-0 text-base">Create new folder</h2>
</div>
Expand All @@ -26,7 +26,7 @@ exports[`OcModal > displays input 1`] = `
exports[`OcModal > displays loading state 1`] = `
"<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
<focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
<div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
<div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
<div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
<h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
</div>
Expand All @@ -36,10 +36,10 @@ exports[`OcModal > displays loading state 1`] = `
<!--v-if-->
</div>
<div class="oc-modal-body-actions flex justify-end p-4 text-right">
<div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-modal-body-actions-cancel">
<div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-cancel">
<!--v-if-->
<!-- @slot Content of the button --> Cancel
</button> <button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin size-4 spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
</button> <button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-confirm ml-2"><span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin size-4 spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
</div>
</div>
</focus-trap-stub>
Expand All @@ -49,7 +49,7 @@ exports[`OcModal > displays loading state 1`] = `
exports[`OcModal > matches snapshot 1`] = `
"<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
<focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
<div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
<div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
<div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
<h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
</div>
Expand All @@ -72,7 +72,7 @@ exports[`OcModal > matches snapshot 1`] = `
exports[`OcModal > overrides props message with slot 1`] = `
"<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
<focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
<div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
<div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
<div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
<h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="oc-fade-in flex flex-wrap oc-notification-message oc-box-shadow-medium rounded-sm break-keep bg-role-surface"
class="oc-fade-in flex flex-wrap oc-notification-message shadow-md/20 rounded-sm break-keep bg-role-surface"
:class="classes"
>
<div class="flex flex-wrap items-center flex-1" :role="role" :aria-live="ariaLive">
Expand Down
1 change: 0 additions & 1 deletion packages/design-system/src/components/OcSwitch/OcSwitch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ const toggle = () => {
cursor: pointer;

&::before {
box-shadow: rgb(0 0 0 / 25%) 0px 0px 2px 1px;
border-radius: 50%;
content: '';
}
Expand Down
10 changes: 3 additions & 7 deletions packages/design-system/src/components/OcTable/OcTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,9 @@ const extractTbodyTrProps = (item: Item, index: number) => {
'oc-tbody-tr',
`oc-tbody-tr-${domSelector(item) || index}`,
isHighlighted(item) ? 'oc-table-highlighted' : undefined,
isDisabled(item) ? 'oc-table-disabled' : undefined
...(isDisabled(item)
? ['oc-table-disabled', 'opacity-70', 'pointer-events-none', 'grayscale-60']
Copy link
Contributor

@kulmann kulmann Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need the oc-table-disabled class as selector for tests? Because you deleted the scss-class, so you could remove it here.

Copy link
Contributor Author

@JammingBen JammingBen Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A composable for the keyboard actions does something with it. I guess it skips a disabled file based on this class.

: [])
].filter(Boolean)
}
}
Expand Down Expand Up @@ -556,12 +558,6 @@ const handleSort = (field: FieldType) => {
border-collapse: collapse;
border-spacing: 0;

&-disabled {
opacity: 0.7;
filter: grayscale(0.6);
pointer-events: none;
}

&-sticky {
.oc-table-header-cell {
z-index: 1;
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcTextInput/OcTextInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
v-bind="additionalAttributes"
ref="inputRef"
:aria-invalid="ariaInvalid"
class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface"
class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100"
:class="{
'oc-text-input-danger border-role-error': !!showErrorMessage,
'pl-6': !!readOnly,
Expand Down
Loading