Skip to content

Commit a6f40ad

Browse files
jaredhill4jaredhill4
committed
fix: postcss nesting bug and missing unsplash image bug
1 parent ea3584f commit a6f40ad

File tree

7 files changed

+119
-112
lines changed

7 files changed

+119
-112
lines changed

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"react-dropzone": "^11.4.2",
5858
"react-image-crop": "^8.6.12",
5959
"react-imask": "^6.4.2",
60-
"react-is": "18.0.0",
60+
"react-is": "18.2.0",
6161
"react-modal": "^3.15.1",
6262
"react-quill": "2.0.0-beta.4",
6363
"regenerator-runtime": "0.13.7",
@@ -148,13 +148,12 @@
148148
"postcss-import": "^14.0.2",
149149
"postcss-loader": "^6.1.1",
150150
"postcss-mixins": "^8.1.0",
151-
"postcss-nested": "^6.0.0",
151+
"postcss-nested": "^6.0.1",
152152
"postcss-scss": "^4.0.1",
153153
"postcss-simple-vars": "^6.0.3",
154154
"postcss-strip-inline-comments": "^0.1.5",
155155
"postcss-url": "^10.1.3",
156156
"prettier": "2.8.0",
157-
"react-is": "18.2.0",
158157
"react-test-renderer": "18.2.0",
159158
"sass-loader": "^12.1.0",
160159
"string-dedent": "^2.0.0",
@@ -206,4 +205,4 @@
206205
"component",
207206
"library"
208207
]
209-
}
208+
}

‎packages/ui-components/src/assets/icons/eye.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎packages/ui-components/src/lib/file-uploader/file-uploader.css‎

Lines changed: 92 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -27,112 +27,112 @@
2727
@apply lc-bg-primary;
2828
@apply lc-bg-opacity-5;
2929
}
30+
}
3031

31-
&-active {
32-
@apply lc-border-dashed;
33-
}
32+
&-dropzone-active {
33+
@apply !lc-border-dashed;
34+
}
3435

35-
&-accept {
36-
color: rgba(var(--lc-color-primary), 1) !important;
37-
border-color: rgba(var(--lc-color-primary), 1) !important;
38-
background-color: rgba(var(--lc-color-primary), 0.05) !important;
39-
}
36+
&-dropzone-accept {
37+
color: rgba(var(--lc-color-primary), 1) !important;
38+
border-color: rgba(var(--lc-color-primary), 1) !important;
39+
background-color: rgba(var(--lc-color-primary), 0.05) !important;
40+
}
4041

41-
&-reject {
42-
color: rgba(var(--lc-color-danger), 1) !important;
43-
border-color: rgba(var(--lc-color-danger), 1) !important;
44-
background-color: rgba(var(--lc-color-danger), 0.05) !important;
45-
}
42+
&-dropzone-reject {
43+
color: rgba(var(--lc-color-danger), 1) !important;
44+
border-color: rgba(var(--lc-color-danger), 1) !important;
45+
background-color: rgba(var(--lc-color-danger), 0.05) !important;
46+
}
4647

47-
&-placeholder {
48-
@apply lc-inline-block;
49-
@apply lc-w-64;
50-
}
48+
&-dropzone-placeholder {
49+
@apply lc-inline-block;
50+
@apply lc-w-64;
51+
}
5152

52-
&-text {
53-
@apply lc-text-sm;
54-
@apply lc-mt-24;
55-
}
53+
&-dropzone-text {
54+
@apply lc-text-sm;
55+
@apply lc-mt-24;
56+
}
5657

57-
&-files {
58-
@apply lc-inline-flex;
59-
@apply lc-flex-wrap;
60-
@apply lc-list-none;
61-
@apply lc--m-12;
62-
@apply lc-p-0;
63-
@apply lc-items-start;
64-
@apply lc-justify-center;
65-
66-
& li {
67-
@apply lc-m-0;
68-
@apply lc-p-12;
69-
70-
flex: 1 1 16.666667%;
71-
min-width: 16.666667%;
72-
max-width: 240px;
73-
}
74-
}
58+
&-dropzone-files {
59+
@apply lc-inline-flex;
60+
@apply lc-flex-wrap;
61+
@apply lc-list-none;
62+
@apply lc--m-12;
63+
@apply lc-p-0;
64+
@apply lc-items-start;
65+
@apply lc-justify-center;
66+
}
7567

76-
&-file {
77-
@apply lc-transition-all;
78-
@apply lc-text-primary;
79-
@apply lc-bg-white;
80-
@apply lc-p-4;
81-
@apply lc-w-full;
82-
@apply lc-max-w-full;
83-
@apply lc-h-auto;
84-
85-
&:hover {
86-
@apply lc-text-primary-dark;
87-
@apply lc-bg-white;
88-
89-
& .lc-file-uploader-dropzone-file-thumb-overlay {
90-
@apply lc-opacity-100;
91-
}
92-
}
68+
&-dropzone-files li {
69+
@apply lc-m-0;
70+
@apply lc-p-12;
9371

94-
&-thumb {
95-
@apply lc-relative;
96-
@apply lc-flex;
97-
@apply lc-items-center;
98-
@apply lc-justify-center;
99-
@apply lc-bg-gray-lightest;
100-
@apply lc-w-full;
101-
@apply lc-rounded-sm;
102-
103-
&-image {
104-
@apply lc-block;
105-
@apply lc-max-w-full;
106-
@apply lc-h-160;
107-
@apply lc-object-contain;
108-
}
109-
110-
&-overlay {
111-
@apply lc-absolute;
112-
@apply lc-flex;
113-
@apply lc-items-center;
114-
@apply lc-justify-center;
115-
@apply lc-inset-0;
116-
@apply lc-opacity-0;
117-
@apply lc-transition-all;
118-
@apply lc-rounded-sm;
119-
@apply lc-bg-black;
120-
@apply lc-bg-opacity-40;
121-
}
122-
}
72+
flex: 1 1 16.666667%;
73+
min-width: 16.666667%;
74+
max-width: 240px;
75+
}
12376

124-
&-remove-icon {
125-
@apply lc-text-white;
126-
}
77+
&-dropzone-file {
78+
@apply lc-transition-all;
79+
@apply lc-text-primary;
80+
@apply lc-bg-white;
81+
@apply lc-p-4;
82+
@apply lc-w-full;
83+
@apply lc-max-w-full;
84+
@apply lc-h-auto;
85+
86+
&:hover {
87+
@apply lc-text-primary-dark;
88+
@apply lc-bg-white;
12789

128-
&-name {
129-
@apply lc-text-xs;
130-
@apply lc-mt-8;
131-
@apply lc-break-all;
90+
& .lc-file-uploader-dropzone-file-thumb-overlay {
91+
@apply lc-opacity-100;
13292
}
13393
}
13494
}
13595

96+
&-dropzone-file-thumb {
97+
@apply lc-relative;
98+
@apply lc-flex;
99+
@apply lc-items-center;
100+
@apply lc-justify-center;
101+
@apply lc-bg-gray-lightest;
102+
@apply lc-w-full;
103+
@apply lc-rounded-sm;
104+
}
105+
106+
&-dropzone-file-thumb-image {
107+
@apply lc-block;
108+
@apply lc-max-w-full;
109+
@apply lc-h-160;
110+
@apply lc-object-contain;
111+
}
112+
113+
&-dropzone-file-thumb-overlay {
114+
@apply lc-absolute;
115+
@apply lc-flex;
116+
@apply lc-items-center;
117+
@apply lc-justify-center;
118+
@apply lc-inset-0;
119+
@apply lc-opacity-0;
120+
@apply lc-transition-all;
121+
@apply lc-rounded-sm;
122+
@apply lc-bg-black;
123+
@apply lc-bg-opacity-40;
124+
}
125+
126+
&-dropzone-file-remove-icon {
127+
@apply lc-text-white;
128+
}
129+
130+
&-dropzone-file-name {
131+
@apply lc-text-xs;
132+
@apply lc-mt-8;
133+
@apply lc-break-all;
134+
}
135+
136136
&-errors {
137137
@apply lc-text-danger;
138138
@apply lc-m-0;

‎packages/ui-components/src/lib/icon-button/icon-button.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
--lc-icon-button-color: var(--lc-color-gray-dark);
1818
--lc-icon-button-hover-bg-color: var(--lc-color-gray-lighter);
1919
--lc-icon-button-hover-bg-transparency: 1;
20+
position: relative;
2021
background-color: transparent;
2122
color: rgba(var(--lc-icon-button-color), 1);
2223

‎packages/ui-components/src/lib/image-cropper/image-cropper-documentation/image-cropper.examples.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import { FileUpload } from '../../file-uploader/FileUploader.types';
55
import { ImageCropper } from '../ImageCropper';
66
import { fetchFileFromURL } from '../ImageCropper.helpers';
77
import { CroppedImage } from '../ImageCropper.types';
8+
import { Button } from '../../buttons';
89

910
export const ImageCropperExample = () => {
1011
const [open, setOpen] = useState(false);
1112
const [file, setFile] = useState<FileUpload | null | undefined>(null);
1213
const [croppedImage, setCroppedImage] = useState<CroppedImage | null>(null);
1314

1415
const fetchImage = async () => {
15-
const imageURL = 'https://source.unsplash.com/random/800x600';
16+
const imageURL = 'https://picsum.photos/800/600';
1617
const imageFile = await fetchFileFromURL(imageURL);
1718
const preview = URL.createObjectURL(imageFile);
1819

@@ -35,6 +36,10 @@ export const ImageCropperExample = () => {
3536
setCroppedImage(newCroppedImage);
3637
};
3738

39+
const handleReset = () => {
40+
setCroppedImage(null);
41+
};
42+
3843
if (!file) return <>Loading image...</>;
3944

4045
return (
@@ -45,9 +50,16 @@ export const ImageCropperExample = () => {
4550
onSave={handleSave}
4651
onAfterClose={handleClose}
4752
/>
48-
<ButtonUnstyled onClick={handleImageClick}>
49-
<img src={croppedImage ? croppedImage.preview : file.preview} />
53+
54+
<ButtonUnstyled onClick={handleImageClick} className="!lc-inline-block lc-max-w-100 lc-p-0">
55+
<img src={croppedImage ? croppedImage.preview : file.preview} className="lc-block lc-max-w-100" />
5056
</ButtonUnstyled>
57+
58+
{croppedImage && (
59+
<div className="lc-mt-16" onClick={handleReset}>
60+
<Button>Reset</Button>
61+
</div>
62+
)}
5163
</>
5264
);
5365
};
@@ -58,7 +70,7 @@ export const ImageCropperExampleString = `
5870
const [croppedImage, setCroppedImage] = useState<CroppedImage | null>(null);
5971
6072
const fetchImage = async () => {
61-
const imageURL = 'https://source.unsplash.com/random/800x600';
73+
const imageURL = 'https://picsum.photos/800/600';
6274
const imageFile = await fetchFileFromURL(imageURL);
6375
const preview = URL.createObjectURL(imageFile);
6476

‎packages/ui-components/src/lib/image-cropper/image-cropper.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
@apply lc-rounded-sm;
6161
@apply lc-mr-8;
6262

63-
img {
63+
& img {
6464
@apply lc-w-40;
6565
@apply lc-h-40;
6666
@apply lc-object-contain;

‎yarn.lock‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17659,10 +17659,10 @@ react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2:
1765917659
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
1766017660
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
1766117661

17662-
react-is@18.0.0:
17663-
version "18.0.0"
17664-
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.0.0.tgz#026f6c4a27dbe33bf4a35655b9e1327c4e55e3f5"
17665-
integrity sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw==
17662+
react-is@18.2.0, react-is@^18.2.0:
17663+
version "18.2.0"
17664+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
17665+
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
1766617666

1766717667
"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
1766817668
version "18.1.0"
@@ -17674,11 +17674,6 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
1767417674
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
1767517675
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
1767617676

17677-
react-is@^18.2.0:
17678-
version "18.2.0"
17679-
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
17680-
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
17681-
1768217677
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
1768317678
version "3.0.4"
1768417679
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"

0 commit comments

Comments
 (0)