Implemented AppSelect component #268

RossWebFS · 2025-01-25T17:07:34Z

No description provided.

src/styles/app-select/AppSelect.scss

src/styles/app-select/AppSelect.stories.tsx

src/styles/app-select/AppSelect.tsx

src/styles/app-select/AppSelect.types.ts

src/styles/app-select/AppSelect.tsx

.lintstagedrc

eslint.config.js

src/styles/app-collapsible/AppCollapsible.tsx

mhevyk · 2025-02-23T08:43:35Z

src/styles/app-form-control/AppFormControl.tsx

@@ -27,7 +30,11 @@ const AppFormControl = forwardRef<HTMLDivElement, AppFormControlProps>(
    }, [isInvalid, helperText]);

    return (
-      <div className={classnames("app-form-control", className)} ref={ref}>
+      <div
+        style={{ width: fullWidth ? "100%" : "auto" }}


Could you move it to scss file?

mhevyk · 2025-02-23T08:44:12Z

src/styles/app-select/AppSelect.scss

@@ -0,0 +1,111 @@
+@use "design-system/mixins/scrollbar.module.scss" as *;


Let's use .module.scss only for exporting variables to js

mhevyk · 2025-02-23T08:48:08Z

src/styles/app-select/AppSelect.stories.tsx

+          type="multiple"
+        />
+        <div style={{ marginTop: "20px" }}>
+          <h3>Selected Options:</h3>


Same for texts

Already fixed

mhevyk · 2025-02-23T08:49:17Z

src/styles/app-select/AppSelect.tsx

+        <div ref={ref} style={{ width: containerWidth }}>
+          <div
+            style={{ width: containerWidth }}


Do we need to set width on both contaners?

Removed redundant style

mhevyk · 2025-02-23T08:50:39Z

src/styles/app-spinner/AppSpinner.tsx

 };

 // TODO: improve AppSpinner component
-function AppSpinner({ variant }: AppSpinnerProps) {
+function AppSpinner({ variant = "#000" }: AppSpinnerProps) {


May I propose to use value form APP_COLORS?

mhevyk · 2025-02-23T08:50:57Z

src/styles/mixins/scrollbar.module.scss

+  $thumb-color: #ddd,
+  $thumb-hover: #ccc,
+  $track-color: #fff,


Please use colors from design system

mhevyk · 2025-02-23T08:52:01Z

src/styles/mixins/scrollbar.module.scss

+    &::-webkit-scrollbar {
+      width: $width; // for vertical scrollbar
+      height: $width; // for horizontal scrollbar
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $track-color;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $thumb-color;
+      border-radius: $border-radius;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: $thumb-hover;
+    }


Did you check this in firefox? I think we need to add additional property because scrollbars are tricky to style across browsers

There are not enough flexible styles for Firefox, so I can't fully customize the scrollbar

mhevyk · 2025-02-23T08:54:52Z

src/styles/app-select/AppSelectItem.tsx

+  );
+};
+
+AppSelectItem.displayName = "Item";


Please use AppSelectItem for display name

mhevyk · 2025-02-23T08:56:17Z

Please add user-select: none to select button

mhevyk · 2025-02-23T10:44:39Z

Please move all AppSelectItem related types, scss to separate folder within app-select, it should be like follows:

app-select/app-select-item

mhevyk added 8 commits January 2, 2025 19:30

Move readme to docs folder

e335920

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

26b500d

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

f456de9

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

a41a0e3

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

efa8d62

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

9d0df9d

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

ecea503

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

3bf9f80

RossWebFS requested a review from mhevyk January 25, 2025 17:07

RossWebFS self-assigned this Jan 25, 2025

RossWebFS temporarily deployed to Preview January 25, 2025 17:07 — with GitHub Actions Inactive

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

c0ab953

RossWebFS linked an issue Jan 25, 2025 that may be closed by this pull request

Add AppSelect component #258

Open

RossWebFS marked this pull request as draft January 25, 2025 19:40

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

becdd8a

mhevyk reviewed Jan 26, 2025

View reviewed changes

mhevyk added 2 commits January 26, 2025 14:25

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

9a1b75c

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

6cd2d7b

This comment was marked as resolved.

Sign in to view

mhevyk added 3 commits February 6, 2025 21:43

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

9bc550c

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

121f6a5

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

c5a56c9

RossWebFS temporarily deployed to Preview February 23, 2025 07:48 — with GitHub Actions Inactive

RossWebFS marked this pull request as ready for review February 23, 2025 07:48

RossWebFS requested a review from mhevyk February 23, 2025 07:48

mhevyk reviewed Feb 23, 2025

View reviewed changes

mhevyk temporarily deployed to Preview February 23, 2025 10:42 — with GitHub Actions Inactive

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

76aba28

mhevyk force-pushed the feature/258/app-select branch from 24fd56e to 6fef661 Compare February 23, 2025 13:32

mhevyk temporarily deployed to Preview February 23, 2025 13:32 — with GitHub Actions Inactive

mhevyk added 2 commits February 23, 2025 15:42

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

c6f7113

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

cc5a1e6

mhevyk force-pushed the feature/258/app-select branch from 6fef661 to 6b56ac2 Compare February 23, 2025 13:51

mhevyk temporarily deployed to Preview February 23, 2025 13:51 — with GitHub Actions Inactive

mhevyk and others added 9 commits February 23, 2025 16:40

Merge branch 'dev' of https://github.com/mhevyk/beauty-clinic into dev

e09d65f

Implemented AppSelect component

f859505

Fixed some AppSelect bugs

b5caaf6

Added small improvements to AppSelect

d46b3dd

Ts fixes

3c074f3

Refactored AppSelect

d2d7630

Label, style and storybook polish

6c04a1f

Polish loading, empty states and storybook

47bd622

Polish

7cff821

mhevyk force-pushed the feature/258/app-select branch from 6b56ac2 to 7cff821 Compare February 23, 2025 14:42

mhevyk had a problem deploying to Preview February 23, 2025 14:42 — with GitHub Actions Failure

mhevyk added 2 commits February 23, 2025 16:43

Fix package.lock

5aa1114

Fix package.lock

7b90170

mhevyk had a problem deploying to Preview February 23, 2025 14:44 — with GitHub Actions Failure

mhevyk had a problem deploying to Preview February 23, 2025 14:48 — with GitHub Actions Failure

Fix package.lock

293d4bf

mhevyk force-pushed the feature/258/app-select branch from eab65ff to 293d4bf Compare February 23, 2025 14:53

mhevyk temporarily deployed to Preview February 23, 2025 14:53 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implemented AppSelect component #268

Implemented AppSelect component #268

RossWebFS commented Jan 25, 2025

This comment was marked as resolved.

This comment was marked as resolved.

mhevyk Feb 23, 2025

RossWebFS Feb 23, 2025

mhevyk Feb 23, 2025

RossWebFS Feb 23, 2025

mhevyk Feb 23, 2025

RossWebFS Feb 23, 2025

mhevyk Feb 23, 2025

RossWebFS Feb 23, 2025

mhevyk Feb 23, 2025

RossWebFS Feb 23, 2025

mhevyk Feb 23, 2025

RossWebFS Feb 23, 2025

mhevyk Feb 23, 2025

RossWebFS Feb 23, 2025

mhevyk Feb 23, 2025

RossWebFS Feb 23, 2025

mhevyk commented Feb 23, 2025

mhevyk commented Feb 23, 2025

		@@ -0,0 +1,111 @@
		@use "design-system/mixins/scrollbar.module.scss" as *;

Implemented AppSelect component #268

Are you sure you want to change the base?

Implemented AppSelect component #268

Conversation

RossWebFS commented Jan 25, 2025

This comment was marked as resolved.

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mhevyk commented Feb 23, 2025

mhevyk commented Feb 23, 2025