Skip to content

Commit

Permalink
fix: remove ineffective styles across different components
Browse files Browse the repository at this point in the history
  • Loading branch information
sjschlapbach committed Jul 17, 2024
1 parent 426b78d commit 5520b16
Show file tree
Hide file tree
Showing 21 changed files with 5 additions and 97 deletions.
2 changes: 0 additions & 2 deletions src/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export interface ButtonProps {
loading?: boolean
onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void
className?: {
override?: string
root?: string
active?: string
}
Expand Down Expand Up @@ -54,7 +53,6 @@ export function Button({
...props
}: ButtonProps) {
const computedClassName = twMerge(
className?.override,
!basic && 'border rounded px-[0.75em] py-[0.25em] shadow bg-white',
'inline-flex flex-row items-center font-sans gap-2 cursor-pointer',
fluid && 'w-full justify-center',
Expand Down
2 changes: 0 additions & 2 deletions src/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export interface CheckboxProps {
label?: string | React.ReactNode
size?: 'sm' | 'md' | 'lg' | 'xl'
className?: {
override?: string
root?: string
label?: string
}
Expand Down Expand Up @@ -80,7 +79,6 @@ export function Checkbox({
defaultChecked
checked={checked || partial}
className={twMerge(
className?.override,
'border-grey-80 align-center my-auto flex justify-center rounded-md border border-solid bg-white p-0',
(checked || partial) && 'border-black',
disabled && 'cursor-not-allowed',
Expand Down
7 changes: 1 addition & 6 deletions src/Collapsible.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export interface CollapsibleProps {
secondary?: string | React.ReactNode
onSecondaryClick?: () => void
className?: {
override?: string
root?: string
staticContent?: string
closedContent?: string
Expand Down Expand Up @@ -71,11 +70,7 @@ export function Collapsible({
children,
}: CollapsibleProps) {
return (
<RadixCollapsible.Root
open={open}
onOpenChange={onChange}
className={className?.override}
>
<RadixCollapsible.Root open={open} onOpenChange={onChange}>
<div
className={twMerge(
'w-full rounded-md border-2 border-solid border-uzh-grey-80 p-2 pb-0',
Expand Down
2 changes: 0 additions & 2 deletions src/DateChanger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import Button from './Button'
import Label from './forms/Label'

export interface DateChangerClassName {
override?: string
root?: string
label?: string
field?: string
Expand Down Expand Up @@ -117,7 +116,6 @@ export function DateChanger({
id={id}
type="date"
className={twMerge(
className?.override,
'w-max border-none px-0 py-1 pl-2',
className?.input
)}
Expand Down
2 changes: 0 additions & 2 deletions src/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,6 @@ const DropdownItem = ({
shorting?: string
selected?: boolean
className?: {
override?: string
root?: string
active?: string
}
Expand All @@ -202,7 +201,6 @@ const DropdownItem = ({
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.override,
`flex flex-row rounded px-2 py-0.5 hover:cursor-pointer hover:bg-primary-20 hover:text-primary`,
active && twMerge('font-bold', className?.active),
className?.root
Expand Down
5 changes: 0 additions & 5 deletions src/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ interface HeaderProps {
test?: string
}
className?: {
override?: string
root?: string
}
children: React.ReactNode
Expand All @@ -30,7 +29,6 @@ export function H1({ id, data, className, children }: HeaderProps) {
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.override,
'mb-[0.2em] font-sans text-2xl font-bold',
className?.root
)}
Expand All @@ -56,7 +54,6 @@ export function H2({ id, data, className, children }: HeaderProps) {
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.override,
'mb-[0.2em] font-sans text-xl font-bold',
className?.root
)}
Expand All @@ -82,7 +79,6 @@ export function H3({ id, data, className, children }: HeaderProps) {
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.override,
'mb-[0.2em] font-sans text-lg font-bold',
className?.root
)}
Expand All @@ -108,7 +104,6 @@ export function H4({ id, data, className, children }: HeaderProps) {
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.override,
'text-md mb-[0.2em] font-sans font-bold',
className?.root
)}
Expand Down
4 changes: 0 additions & 4 deletions src/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ export interface ModalProps {
test?: string
}
className?: {
overlayOverride?: string
contentOverride?: string
overlay?: string
content?: string
title?: string
Expand Down Expand Up @@ -131,7 +129,6 @@ export function Modal({
const overlayContent = (
<RadixDialog.Overlay
className={twMerge(
className?.overlayOverride,
'fixed bottom-0 left-0 right-0 top-0 z-20 flex justify-center gap-4 bg-uzh-grey-100 bg-opacity-50 p-4 md:items-center',
className?.overlay
)}
Expand All @@ -151,7 +148,6 @@ export function Modal({

<RadixDialog.Content
className={twMerge(
className?.contentOverride,
'z-30 flex flex-col gap-4 overflow-y-auto rounded-lg bg-white p-4 shadow',
fullScreen
? 'h-full w-full'
Expand Down
12 changes: 0 additions & 12 deletions src/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export interface NavigationProps {
}
children: React.ReactNode
className?: {
override?: string
root?: string
indicator?: string
viewport?: string
Expand Down Expand Up @@ -42,7 +41,6 @@ export function Navigation({
return (
<NavigationMenuPrimitive.Root
className={twMerge(
className?.override,
'relative w-max rounded-md bg-primary-20',
className?.root
)}
Expand Down Expand Up @@ -86,8 +84,6 @@ interface TriggerProps {
children: React.ReactNode
disabled?: boolean
className?: {
override?: string
dropdownOverride?: string
root?: string
label?: string
icon?: string
Expand Down Expand Up @@ -144,7 +140,6 @@ Navigation.TriggerItem = function TriggerItem({
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.override,
'flex flex-row items-center rounded-md px-3 py-2 text-sm font-medium text-black hover:text-white focus:outline-none focus-visible:ring',
icon && !label && 'h-9 w-9 justify-center',
!disabled && 'hover:bg-primary-60',
Expand Down Expand Up @@ -177,7 +172,6 @@ Navigation.TriggerItem = function TriggerItem({

<NavigationMenuPrimitive.Content
className={twMerge(
className?.dropdownOverride,
'flex flex-col gap-2 rounded-lg p-2',
dropdownWidth,
className?.dropdown
Expand All @@ -200,7 +194,6 @@ interface DropdownItemProps {
subtitle?: string
icon?: React.ReactNode
className?: {
override?: string
root?: string
title?: string
icon?: string
Expand Down Expand Up @@ -258,7 +251,6 @@ Navigation.DropdownItem = function DropdownItem({
href={href}
onClick={onClick}
className={twMerge(
className?.override,
'w-full rounded-md px-4 py-3 text-black hover:bg-primary-60',
'hover:text-white focus:outline-none focus-visible:ring focus-visible:ring-opacity-75',
className?.root
Expand Down Expand Up @@ -308,7 +300,6 @@ interface ButtonItemProps {
disabled?: boolean
icon?: React.ReactNode
className?: {
override?: string
root?: string
label?: string
icon?: string
Expand Down Expand Up @@ -366,7 +357,6 @@ Navigation.ButtonItem = function ButtonItem({
href={!disabled ? href : undefined}
onClick={!disabled ? onClick : undefined}
className={twMerge(
className?.override,
'cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-black hover:text-white',
!disabled && 'hover:bg-primary-60',
disabled && 'hover:text-none cursor-not-allowed text-gray-400',
Expand Down Expand Up @@ -402,7 +392,6 @@ interface IconItemProps {
icon: React.ReactNode
disabled?: boolean
className?: {
override?: string
root?: string
disabled?: string
}
Expand Down Expand Up @@ -454,7 +443,6 @@ Navigation.IconItem = function IconItem({
href={!disabled ? href : undefined}
onClick={!disabled ? onClick : undefined}
className={twMerge(
className?.override,
'flex h-9 w-9 items-center justify-center rounded-md text-black hover:text-white',
!disabled && 'hover:bg-primary-60',
disabled && 'hover:text-none cursor-not-allowed text-gray-400',
Expand Down
7 changes: 1 addition & 6 deletions src/Progress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export interface ProgressProps {
formatter: (value: any) => any
isMaxVisible?: boolean
className?: {
override?: string
root?: string
indicator?: string
}
Expand Down Expand Up @@ -61,11 +60,7 @@ export function Progress({
id={id}
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.override,
'relative h-7 rounded text-sm',
className?.root
)}
className={twMerge('relative h-7 rounded text-sm', className?.root)}
value={internalValue}
max={max}
{...props}
Expand Down
6 changes: 0 additions & 6 deletions src/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@ import React, { useState } from 'react'
import { twMerge } from 'tailwind-merge'

export interface SelectClassName {
triggerOverride?: string
contentOverride?: string
itemOverride?: string
root?: string
trigger?: string
content?: string
Expand Down Expand Up @@ -115,7 +112,6 @@ export function Select({
<RadixSelect.Content
position={contentPosition}
className={twMerge(
className?.contentOverride,
'z-50 overflow-hidden rounded-md bg-white shadow-md',
className?.content
)}
Expand Down Expand Up @@ -185,7 +181,6 @@ export function Select({
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.triggerOverride,
'rounded-md px-2 py-1',
!basic &&
'inline-flex h-7 items-center justify-between gap-2 border bg-white p-4 shadow-sm hover:bg-primary-20 hover:text-primary',
Expand Down Expand Up @@ -259,7 +254,6 @@ const SelectItem = React.forwardRef(
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.itemOverride,
'relative flex select-none items-center rounded-md px-8 py-2 font-medium text-gray-700',
'hover:cursor-pointer hover:bg-primary-20 hover:text-primary hover:outline-none focus:border-primary-40',
disabled &&
Expand Down
6 changes: 0 additions & 6 deletions src/Slider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@ interface SliderProps {
rangeColorMap?: Record<string, string>
borderColorMap?: Record<string, string>
className?: {
override?: string
rangeOverride?: string
thumbOverride?: string
root?: string
icons?: string
labels?: string
Expand Down Expand Up @@ -91,7 +88,6 @@ export function Slider({
data-cy={data?.cy}
data-test={data?.test}
className={twMerge(
className?.override,
'relative flex h-24 w-full select-none items-center',
className?.root
)}
Expand Down Expand Up @@ -130,7 +126,6 @@ export function Slider({
<RadixSlider.Track className="relative h-4 flex-1 rounded-xl bg-gray-200">
<RadixSlider.Range
className={twMerge(
className?.rangeOverride,
'absolute h-full rounded-full',
rangeColorMap && Object.keys(rangeColorMap).length === steps
? rangeColorMap[String(value)]
Expand All @@ -142,7 +137,6 @@ export function Slider({

<RadixSlider.Thumb
className={twMerge(
className?.thumbOverride,
'flex h-12 w-12 flex-col items-center justify-center rounded-full border-[3px] border-solid bg-white shadow-lg focus:outline-none',
disabled ? 'cursor-not-allowed' : 'cursor-move',
disabled ||
Expand Down
4 changes: 0 additions & 4 deletions src/StepProgress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@ interface StepProgressBaseProps {
displayOffsetLeft?: number
displayOffsetRight?: number
className?: {
override?: string
root?: string
}
formatter?: ({ element, ix }: { element: StepItem; ix: number }) => {
Expand Down Expand Up @@ -126,7 +125,6 @@ export function StepProgress({
<button
data-cy={data?.cy ? `${data?.cy}-left` : undefined}
className={twMerge(
className?.override,
'rounded-l px-3 py-1 hover:bg-primary-20 hover:text-primary',
!items && 'bg-primary-60 text-white'
)}
Expand All @@ -147,7 +145,6 @@ export function StepProgress({
key={ix}
data-cy={data?.cy ? `${data?.cy}-${ix}` : undefined}
className={twMerge(
className?.override,
'flex flex-1 items-center justify-center border-r border-white p-1 last:border-r-0 hover:bg-primary-20 hover:text-primary',
ix === 0 && 'rounded-l',
ix === length - 1 && 'rounded-r',
Expand All @@ -173,7 +170,6 @@ export function StepProgress({
<button
data-cy={data?.cy ? `${data?.cy}-right` : undefined}
className={twMerge(
className?.override,
'rounded-r px-3 py-1 hover:bg-primary-20 hover:text-primary'
)}
onClick={() =>
Expand Down
Loading

0 comments on commit 5520b16

Please sign in to comment.