Skip to content

Commit 31b1131

Browse files
agjsagjs
committed
chore: Bump package version to 1.0.234 and enhance Checkbox component with new LongText story
- Updated package version in package.json to 1.0.234 - Added LongText story to Checkbox component for better demonstration of text handling - Refactored Checkbox component styles for improved visual representation and accessibility - Updated DatePicker styles for consistency and enhanced user experience
1 parent e27e617 commit 31b1131

File tree

4 files changed

+128
-32
lines changed

4 files changed

+128
-32
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@programmer_network/yail",
3-
"version": "1.0.233",
3+
"version": "1.0.234",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

‎src/Components/Inputs/Checkbox/Checkbox.stories.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,17 @@ export const Default = () => {
2727
/>
2828
);
2929
};
30+
31+
export const LongText = () => {
32+
const [isChecked, setIsChecked] = useState(false);
33+
return (
34+
<Checkbox
35+
text='Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.'
36+
checked={isChecked}
37+
onChange={e => {
38+
setIsChecked(e.target.checked);
39+
action("onChange")(e.target.checked);
40+
}}
41+
/>
42+
);
43+
};

‎src/Components/Inputs/Checkbox/index.tsx‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,32 @@ const Checkbox: FC<ICheckboxProps> = (
1919
<InputHeader {...props} />
2020
<div className='form-control items-start'>
2121
<label className='label yl:flex yl:cursor-pointer yl:items-center yl:gap-2'>
22-
<input
23-
type='checkbox'
24-
checked={checked}
25-
className='yl:cursor-pointer yl:rounded-none yl:text-primary focus:outline-primary yl:h-6 yl:w-6'
26-
onChange={onChange}
27-
/>
28-
{text && <span className='yl:text-primary'>{text}</span>}
22+
<div className='yl:relative'>
23+
<input
24+
type='checkbox'
25+
checked={checked}
26+
className='yl:appearance-none yl:cursor-pointer yl:rounded yl:border-2 yl:border-border yl:h-6 yl:w-6 yl:transition-all yl:duration-200 checked:yl:bg-primary checked:yl:border-primary checked:yl:text-background focus:yl:outline-none focus:yl:ring-2 focus:yl:ring-primary focus:yl:ring-opacity-50 hover:yl:border-primary'
27+
onChange={onChange}
28+
/>
29+
{checked && (
30+
<svg
31+
className='yl:absolute yl:left-1 yl:top-1 yl:h-4 yl:w-4 yl:text-primary yl:pointer-events-none'
32+
fill='currentColor'
33+
viewBox='0 0 20 20'
34+
>
35+
<path
36+
fillRule='evenodd'
37+
d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
38+
clipRule='evenodd'
39+
/>
40+
</svg>
41+
)}
42+
</div>
43+
{text && (
44+
<span className='yl:text-primary yl:top-[-2.5px] yl:relative'>
45+
{text}
46+
</span>
47+
)}
2948
</label>
3049
</div>
3150
{props.error && <InputError error={props.error} />}

‎src/Components/Inputs/DatePicker/style.css‎

Lines changed: 87 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,153 @@
1-
/* .react-datepicker * {
2-
@apply yl-outline-none !important;
1+
.react-datepicker * {
2+
outline: none !important;
33
}
44

55
.react-datepicker-wrapper {
6-
@apply yl-w-full !important;
6+
width: 100% !important;
77
}
88

99
.react-datepicker {
10-
@apply yl-select-none yl-border-2 yl-border-border yl-bg-background yl-font-sans yl-shadow-lg !important;
10+
user-select: none !important;
11+
border: none !important;
12+
background-color: oklch(0.15 0 0) !important;
13+
font-family: ui-sans-serif, system-ui, sans-serif !important;
14+
box-shadow:
15+
0 10px 15px -3px rgb(0 0 0 / 0.1),
16+
0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
17+
border-radius: 0.5rem !important;
1118
}
1219

1320
.react-datepicker,
1421
.react-datepicker__day {
15-
@apply yl-text-text !important;
22+
color: oklch(90% 0.05 80) !important;
1623
}
1724

1825
.react-datepicker__header {
19-
@apply yl-border-0 yl-bg-background !important;
26+
border: 0 !important;
27+
background-color: oklch(0.15 0 0) !important;
2028
}
2129

2230
.react-datepicker__current-month,
2331
.react-datepicker__day-name,
2432
.react-datepicker-time__header {
25-
@apply yl-text-text !important;
33+
color: oklch(90% 0.05 80) !important;
2634
}
2735

2836
.react-datepicker__month-container {
29-
@apply yl-bg-background !important;
37+
background-color: oklch(0.15 0 0) !important;
3038
}
3139

3240
.react-datepicker__day:not([aria-disabled="true"]):hover {
33-
@apply yl-bg-primary yl-text-white !important;
41+
background-color: oklch(80% 0.2 80) !important;
42+
color: oklch(0.15 0 0) !important;
3443
}
3544

3645
.react-datepicker__day--selected {
37-
@apply yl-bg-primary yl-text-white !important;
46+
background-color: oklch(80% 0.2 80) !important;
47+
color: oklch(0.15 0 0) !important;
3848
}
3949

4050
.react-datepicker__day--keyboard-selected {
41-
@apply yl-bg-primary/70 yl-text-white !important;
51+
background-color: color-mix(
52+
in srgb,
53+
oklch(80% 0.2 80) 70%,
54+
transparent
55+
) !important;
56+
color: oklch(0.15 0 0) !important;
4257
}
4358

4459
.react-datepicker__day--keyboard-selected:focus-visible {
45-
@apply yl-text-white yl-outline-border !important;
60+
color: oklch(0.15 0 0) !important;
61+
outline: 1px solid oklch(35% 0.04 80) !important;
4662
}
4763

4864
.react-datepicker__time-container {
49-
@apply yl-border-l-border/20 yl-px-0 !important;
65+
border-left: 2px solid color-mix(in srgb, oklch(35% 0.04 80) 20%, transparent) !important;
5066
}
5167

5268
.react-datepicker__time-container .react-datepicker__time {
53-
@apply yl-bg-background !important;
69+
background-color: oklch(0.15 0 0) !important;
5470
}
5571

5672
.react-datepicker__time-box {
57-
@apply yl-pl-1 !important;
73+
padding-left: 0.25rem !important;
5874
}
5975

6076
.react-datepicker__time-list-item--selected {
61-
@apply yl-bg-primary yl-font-normal yl-text-white !important;
77+
background-color: oklch(80% 0.2 80) !important;
78+
font-weight: 400 !important;
79+
color: oklch(0.15 0 0) !important;
6280
}
6381

64-
li.react-datepicker__time-list-item {
65-
@apply hover:yl-bg-primary hover:yl-text-white !important;
82+
li.react-datepicker__time-list-item:hover {
83+
background-color: oklch(80% 0.2 80) !important;
84+
color: oklch(0.15 0 0) !important;
6685
}
6786

6887
.react-datepicker__time-list::-webkit-scrollbar {
6988
width: 5px;
7089
}
7190

7291
.react-datepicker__time-list::-webkit-scrollbar-track {
73-
background: "##";
92+
background: oklch(0.15 0 0);
7493
}
7594

7695
.react-datepicker__time-list::-webkit-scrollbar-thumb {
77-
background: rgb(var(--text-color));
96+
background: oklch(35% 0.04 80);
7897
}
7998

8099
.react-datepicker__time-list::-webkit-scrollbar-thumb:hover {
81-
background: rgb(var(--text-color));
100+
background: oklch(55% 0.07 80);
82101
}
83102

84103
.react-datepicker__input-container input {
85-
@apply yl-w-full yl-min-w-max yl-appearance-none yl-rounded-md yl-border-2 yl-border-border yl-bg-transparent yl-p-2 yl-text-text hover:yl-cursor-pointer hover:yl-border-border focus:yl-border-border focus:yl-outline-none focus:yl-ring-transparent !important;
104+
width: 100% !important;
105+
min-width: max-content !important;
106+
appearance: none !important;
107+
border-radius: 0.375rem !important;
108+
border: 2px solid oklch(35% 0.04 80) !important;
109+
background-color: transparent !important;
110+
padding: 0.5rem !important;
111+
color: oklch(90% 0.05 80) !important;
112+
outline: none !important;
113+
transition: border-color 0.15s ease-in-out !important;
114+
}
115+
116+
.react-datepicker__input-container input:hover {
117+
cursor: pointer !important;
118+
}
119+
120+
.react-datepicker__input-container input:focus {
121+
box-shadow: none !important;
86122
}
87123

88124
.react-datepicker__day--disabled {
89-
@apply yl-cursor-not-allowed yl-text-text/40 !important;
90-
} */
125+
cursor: not-allowed !important;
126+
color: oklch(55% 0.07 80) !important;
127+
}
128+
129+
.react-datepicker__navigation {
130+
color: oklch(90% 0.05 80) !important;
131+
transition: color 0.15s ease-in-out !important;
132+
}
133+
134+
.react-datepicker__navigation:hover {
135+
color: oklch(80% 0.2 80) !important;
136+
}
137+
138+
.react-datepicker__navigation--previous:hover {
139+
border-right-color: oklch(80% 0.2 80) !important;
140+
}
141+
142+
.react-datepicker__day--outside-month {
143+
color: oklch(55% 0.07 80) !important;
144+
}
145+
146+
.react-datepicker__day--today {
147+
background-color: color-mix(
148+
in srgb,
149+
oklch(75% 0.24 90) 20%,
150+
transparent
151+
) !important;
152+
font-weight: 600 !important;
153+
}

0 commit comments

Comments
 (0)