Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Simple Partials with Tailwind Styles #23

Merged
merged 9 commits into from
May 16, 2020
Merged

Simple Partials with Tailwind Styles #23

merged 9 commits into from
May 16, 2020

Conversation

devlinjunker
Copy link
Owner

@devlinjunker devlinjunker commented May 11, 2020 •
edited
Loading

Description

Started messing around with simple handlebars partials and helpers.

Added (checkbox) partial with:

  • params based on current state
  • params for defining the color of the checkbox
  • svg icon to stylize checkbox vs use the default browser checkbox

Also needed to add new handlebar helper for handling default values, this lets us stylize the checkbox using basic black/white unless the dev adds custom styles with color and bg-color params

Related

#11
#12

Visual

Screenshot 2020-05-10 22 03 52

small checkbox:
Screenshot 2020-05-16 11 34 09

Questions

TODO

  • PR Body
  • Updated READMEs

@devlinjunker
started checkbox partial and styling
7f35554 
rather than use the default styling, we need to hide the <input> and
create some other elements to represented checked/not.

also added default-val helper so we can use default colors or enable
params that change the look and feel of the checkbox.
@devlinjunker
update checkbox partial params (more!) <3 Michelle
a25f341 
added `bg-checked` and updated partial so the background color of the
checkbox will change if it is checked.

thought about sizing params... but that would require multiple class
changes (padding, width, height, etc..) so maybe make checkbox-sm
partial instead
@devlinjunker devlinjunker added enhancement -priority Take a look at this soon! labels May 11, 2020
@devlinjunker devlinjunker changed the title Dynamic Partials with Tailwind Styles Simple Partials with Tailwind Styles May 11, 2020
devlinjunker
devlinjunker commented May 11, 2020
View reviewed changes
webpack.config.js Outdated Show resolved Hide resolved
@devlinjunker devlinjunker mentioned this pull request May 11, 2020
Merged
13 tasks
@devlinjunker
started checkbox partial and styling
a1a3057 
rather than use the default styling, we need to hide the <input> and
create some other elements to represented checked/not.

also added default-val helper so we can use default colors or enable
params that change the look and feel of the checkbox.
@devlinjunker
update checkbox partial params (more!) <3 Michelle
e7f0e85 
added `bg-checked` and updated partial so the background color of the
checkbox will change if it is checked.

thought about sizing params... but that would require multiple class
changes (padding, width, height, etc..) so maybe make checkbox-sm
partial instead
@devlinjunker
try precompileOptions for handlebars-loader
2c043fd
@devlinjunker
Copy link
Owner Author

Handlebars may not be great for this interactive user interface component use case....

From the handlebars docs: https://handlebarsjs.com/installation/when-to-use-handlebars.html

  • Not great for Event handling, but good for templating:
    • email contents
    • CLI-apps
    • non-HTML text content
    • server-side rendering of pure contents.
  • UI Framework ideas:
    • Angular
    • Aurelia
    • Ember
    • Inferno
    • Mithril
    • Svelte
    • Ractive
    • React
    • Vue

@devlinjunker
Copy link
Owner Author

seems like ember uses handlebars templates:
https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/

It was on the list of event based frameworks (in prev comment) and also was mentioned when researching logical helpers (eq, noteq etc..): https://github.com/jmurphyau/ember-truth-helpers

@devlinjunker
Copy link
Owner Author

sizing seems complicated... if we add size property we also need to add https://github.com/jmurphyau/ember-truth-helpers to handlebars so we can check if size == 'sm' etc...

Need to think about:

  • Checkbox height/width (different based on .checkbox-label css class?)
  • clickable label text size?
  • icon height?

@devlinjunker
Copy link
Owner Author

devlinjunker commented May 16, 2020 •
edited
Loading

sizing seems complicated... if we add size property we also need to add https://github.com/jmurphyau/ember-truth-helpers to handlebars so we can check if size == 'sm' etc...

I was able to do this with a simple {{#if size}} ... {{/if}} check for both size = sm and lg

@devlinjunker devlinjunker merged commit 3232d80 into component-test May 16, 2020
@devlinjunker devlinjunker deleted the hbs-partials branch May 16, 2020 18:43
@devlinjunker devlinjunker mentioned this pull request May 17, 2020
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
-priority Take a look at this soon!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@devlinjunker