onboarding modules #1391

levkk · 2024-03-27T23:37:01Z

New components

Small table

Green heading

Blue heading

Input with optional icon

Dropdown input with search

Dropdown input with backend-powered search.

Badges (small)

Badges (large)

Range input v2

Switch v2

Radio

Select (dropdown) with display/value separation

Select supports different values for display in the option and the <input> field. This is useful when display options aren't easily serializable to values the backend can understand.

RGB card

Fixes

Remove extra padding from the bottom of the dropdown <ul> (now it's 20px top and 20px bottom padding)
Add Debug implementation for Component

chillenberger · 2024-04-02T15:14:59Z

pgml-dashboard/src/components/badges/large/label/label.scss

+    span.material-symbols-outlined {
+        color: #{$white};
+    }


You can also just add text-white to the class of this component.

chillenberger · 2024-04-02T15:56:20Z

pgml-dashboard/src/components/badges/large/label/label.scss

+span[data-controller="badges-large-label"] {
+    padding: 8px;
+    background: #{$gray-500};
+    border-radius: 8px;


bs-border4-radius or class rounded-2

--bs-border-radius sets the border radius for Bootstrap components that declare the border-radius: var(--bs-border-radius) in their CSS. This is a new component, so we have to set the border radius with probably rounded-2 as you suggested.

chillenberger · 2024-04-02T16:07:32Z

pgml-dashboard/src/components/cards/rgb/rgb.scss

@@ -0,0 +1,6 @@
+div[data-controller="cards-rgb"] {


I can't tell but If this doesn't have a hover state, it needs one.

You're right, it doesn't have one. I don't think there is one in the design. I'll flag it for review and follow up with a PR.

chillenberger · 2024-04-02T16:20:26Z

pgml-dashboard/src/components/headings/blue/mod.rs

@@ -0,0 +1,18 @@
+use pgml_components::component;


Can we just use our text-gradient-blue class and remove this component?

Yes we can. I think though CSS classes are harder to discover than components. I'm starting to think we should lean on components even more to make our UI more consistent and re-usable. I can see in the future our HTML templates being composed entirely of code like <%+ SomeComponent::new() %>.

chillenberger · 2024-04-02T16:21:08Z

pgml-dashboard/src/components/headings/green/mod.rs

@@ -0,0 +1,18 @@
+use pgml_components::component;


Same as above, can we just just text-gradient-green class here.

I should definitely re-use that class here.

chillenberger · 2024-04-02T16:43:42Z

pgml-dashboard/src/components/inputs/switch_v_2/switch_v_2_controller.js

+export default class extends Controller {
+  static targets = ["button"];
+
+  onClick(e) {


Change this name as recommended by https://stimulus.hotwired.dev/reference/actions#naming-conventions

chillenberger · 2024-04-02T16:49:26Z

pgml-dashboard/src/components/inputs/text/search/search/search.scss

+div[data-controller="inputs-text-search"] {
+    .dropdown {
+        .dropdown-menu {
+            padding: 0;


why not just add p-0 class to html?

Because this re-uses the Dropdown component which doesn't support (and shouldn't in my opinion) adding custom classes to an element. This overrides the Dropdown style.

chillenberger · 2024-04-02T16:52:14Z

pgml-dashboard/src/components/inputs/text/search/search/search_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {


Do you want something to limit the query speed?

Yeah, do we have anything? I think we have underscore and _.debounce?

Yeah I believe it comes from lodash.

Ah yeah, lodash is the new library replacing underscore. I'm old.

chillenberger · 2024-04-02T16:55:17Z

pgml-dashboard/src/components/pages/demo/template.html

@@ -0,0 +1,160 @@
+<% use crate::components::tables::small::*; %>


No need to have playground and demo.

Ah yeah, I was looking for playground and didn't find it. That's weird...

Playground was made so long ago it is still hidden in the templates and is not a component. It should probably be refactored into a component. Maybe we move the playground stuff to your demo page an remove playground.

Works for me. It's just a place to make sure components work before using them in our other apps.

chillenberger · 2024-04-02T17:00:26Z

pgml-dashboard/static/css/scss/abstracts/variables.scss

@@ -120,6 +120,7 @@ $hp-white: #{$gray-200};
 // Background Colors
 $bg-white: #F8FAFC;
 $bg-black: #0D0D0E;
+$bg-black-1: #17181A;


We shouldn't need to add any colors. this is gray-800. If we need this variable to it like $bg-black-1: #{$gray-800}; or just use gray-800 in the css you are trying to use this for.

levkk · 2024-04-02T19:18:09Z

Going to probably have to make more changes as I integrate this into our main app. More PRs to follow.

levkk added 19 commits March 27, 2024 16:36

onboarding modules

1b610ef

components

5ad0db4

remove unused controller

de14827

remove warning

675d20a

range input v2

39d9327

mods

f336529

separate input value from dropdown value

7b14db0

better name

a62a18e

method name

df67e9c

switch v2

1d7ea84

radio + debug on Component

57089fd

vertical option

47c4b81

comments

b2f37a7

fixes

c1467d5

rgb card

b155784

use input value

2c53965

hmm

29c109b

backwards compatible

6fe6361

icon

a6aebfc

levkk marked this pull request as ready for review April 1, 2024 23:02

levkk requested a review from chillenberger April 1, 2024 23:02

chillenberger reviewed Apr 2, 2024

View reviewed changes

addressing comments

aefb18c

levkk merged commit b354214 into master Apr 2, 2024

levkk deleted the levkk-onboarding-v2 branch April 2, 2024 19:18

		@@ -0,0 +1,19 @@
		import { Controller } from "@hotwired/stimulus";

		export default class extends Controller {

		@@ -0,0 +1,160 @@
		<% use crate::components::tables::small::*; %>

onboarding modules #1391

onboarding modules #1391

Uh oh!

Conversation

levkk commented Mar 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New components

Small table

Green heading

Blue heading

Input with optional icon

Dropdown input with search

Badges (small)

Badges (large)

Range input v2

Switch v2

Radio

Select (dropdown) with display/value separation

RGB card

Fixes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

levkk commented Apr 2, 2024

Uh oh!

Uh oh!

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

levkk commented Mar 27, 2024 •

edited

Loading