chore(devenv): introduced parameterized demo HTML #579

asudoh · 2018-02-15T10:46:03Z

Overview

This PR switches component markup code from HTML to ~~Dust~~ Handlebars, allowing to generate HTML snippets for multiple variants easier, if differences in those variants are small.

~~TODO:~~

~~Try to align HTML file names to where they use to be, especially for major components that some projects may be using directly~~
~~Update tests to refer to the built version of the HTML snippets~~

Added

Support for component.config.js, handling a subset of Fractal properties as follows:
- name
- label
- notes
- context
- preview (Can be left undefined, if specified, should refer to a ~~Dust~~ Handlebars template file name in demo/views)

Changed

Component sample markup from HTML to ~~Dust~~ Handlebars
The HTML snippet view in dev env, now it sends an AJAX request to fetch the snippet so the server code can (lazily) render the ~~Dust~~ Handlebars template
The build tool to generate component HTML snippets, putting ~~Dust~~ Handlebars rendering logic in it

Testing / Reviewing

Starting with button for the review will be the easiest, to see how things work.

Testing should make sure dev env is not broken for any components, and also make sure HTML build is not broken.

Appendix

Current goal

Make it easy to create demo HTML snippets for multiple variants that changes only small fraction of markup (“One template supporting multiple variants” scenario)

Future goal (With separate PRs)

Support SSR for several components where doing so is straightforward
Template instantiation with design tokens
Introduce client-side template, as a separate set of templates, once the spec is standardized (Expecting very future)

Non-goal

Introducing a way to auto-convert the templates to different AJAX frameworks (Angular/React) - Not realistic

joshblack · 2018-02-16T18:53:13Z

server.js

@@ -26,7 +25,7 @@ app.use(webpackHotMiddleware(compiler));

 const fractal = Fractal.create();
 fractal.components.set('path', path.join(__dirname, 'src/components'));
-fractal.components.set('ext', '.html');
+fractal.components.set('ext', '.dust');


Is there any way we could also support hbs as well?

fractal only allows on templating language

joshblack · 2018-02-16T19:04:06Z

Going through this now, looks great 😄

Was curious about two things, namely:

Is there a way to support handlebars here so Watson Health can contribute?
How would we want someone to consume either template?

asudoh · 2018-02-19T08:58:21Z

@joshblack Yes for the former. As of now the template is built into HTML as the dist files. Direct consumption of templates is not covered in this PR as this PR focuses on "supporting multiple variants per template" scenario, but definitely in consideration - Along with design token stuff which I think we talked elsewhere in GH (but I cannot rattle off the link).

joshblack · 2018-02-21T00:46:37Z

src/components/button/button.hbs

@@ -0,0 +1,8 @@
+<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" type="button">Button</button>


Could the variants (like small/big) just be separate hbs files?

I think Watson Health does component--variant.hbs as the pattern

@joshblack Yes, that’s seen in tables in this PR.

BTW given you brought up separate files for variants - Wondering what you imagined using templates for? Text node values? Attributes? Repeat?

joshblack · 2018-02-21T17:02:42Z

Was going through some of this now, noticed:

The demo-container seems to add a lot of height to each example that causes the overflow to exist even though it is redundant in some cases

Reloading the page seems to stall, might just be my machine though
I don't seem to be able to examine styles on the page, is there something I'm doing wrong on my end?

marijohannessen

Would this get rid of the html files completely? Just worried about the users that are depending on them as of now - the website is also using the html files directly to show each component (although we are going to change this by v9). Could we surface both? If not, we'll have to have this in a separate v9 branch until the website is updated. Also not having the variations in separate files will potentially make it hard to show the different variations the way we do it right now on the website.

marijohannessen · 2018-02-21T18:25:04Z

@joshblack I'm experiencing the same issues as you are

joshblack · 2018-02-21T18:31:58Z

Totally agreed that there should be some notion of the html files for vanilla, how are we pulling the examples in now for the site? Worst case we can have a build step that adds the html files for all the variants since that would mean just compiling the templates with the config files

With respect to the different variants, I think Watson Health is doing:

# Actual component template that a server could use
component.hbs

# All component variants
component--all.hbs

# Specific component variant
component--variant.hbs

So I think we could easily follow that model to allow multiple variants in one template file/demo.

marijohannessen · 2018-02-21T18:35:07Z

Right now we're just looking for the specific HTML files in carbon-components/src/components and rendering the content of the file in the component example. We could probably easily switch it to pull the hbs files instead but we would still need a differentiation between the variations.

joshblack · 2018-02-21T18:41:06Z

I'm not sure what the idea is for the site looking forward, and this is totally outside the scope of this issue, but could be a good opportunity for a "to-be" scenario that introduces tabs to the top of the code snippets that let's you select a variant for how to use the component and copy the code for your use-case.

e.g., tabs like HTML - Handlebars - React - Angular that someone could click and copy+paste.

marijohannessen · 2018-02-21T18:46:18Z

Yup, that's part of the plan for V9 (issue here https://github.ibm.com/Bluemix/carbon-issues/issues/451) 🙂 I just want to make sure that the website gets updated accordingly to any updates that happen here - removing the HTML files completely feels like a pretty drastic step.

joshblack · 2018-02-21T18:49:30Z

That's so exciting!

asudoh · 2018-02-21T22:21:57Z

Thanks @joshblack and @marijohannessen for jump in and discussing this thing! Wrt the HTML thing - html:source Gulp task has been changed so that it generates almost the same set of HTML as we used to have. Also the newly added /code/:component Express route calls another newly added (currently) internal template.render() tooling API to generate the HTML snippet in the code example UI in the dev env.

Hope this clarifies the question regarding HTML. Please don’t hesitate to ping me either of you have any further questions/concerns. Thanks!

P.S. Will take a look at the issue of viewport height.

asudoh · 2018-02-22T01:43:23Z

Addressed the viewport height concern: #603

asudoh · 2018-02-22T21:30:54Z

From the feedback from our devs, changed the target from master to v9-dev to address concerns on minor breaking change wrt change in HTML file name. @joshblack Please don’t hesitate to speak up if you have any concerns and I can change the branch (back or another). Thanks!

shinytoyrobots · 2018-05-09T15:02:42Z

Review for v9

tw15egan

This looks awesome! Nice work

asudoh · 2018-05-15T23:25:53Z

Thanks everybody for reviewing!!

* feat(inputs): fixed old pr and added inputs and colors work (#756) * feat(inputs): fixed old pr and added inputs and colors work * feat(inputs): fixed inline select * chore(devenv): introduced parameterized demo HTML (#579) * feat(code-snippet): Add new Code snippet variation and styles (#761) * feat(code-snippet): Update code snippet styles and names * feat(code-snippet): Update font size * chore: cleanup html files * feat(code-snippet): Update feedback copy tooltip to match new styles * chore: cleanup javascript * feat(code-snippet): Update copy tooltip styles * chore: cleanup js * feat(code-snippet): Update click event to only happen on button * chore: Add back support for deprecated class names * feat(code-snippet): Update tooltip styles and positioning * fix: update tooltip positioning for inline snippet * V9 merge 05162018 (#773) * fix(data-table-v2): fix the icon that becomes small when column header wraps, resolves #720 (#742) * fix(tooltip): Firefox overflowing text when you have a long enough string without spaces (#737) * feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme (#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js * docs(components): add component model explainer (#739) * fix(grid): center grid at largest breakpoint (#747) * fix(letter-spacing): Remove letter-spacing (#748) * fix(letter-spacing): remove letter-spacing across the board * fix(letter-spacing): change hard-coded letter-spacing values to use the mixin * fix(select): added disabled styling to option in select (#751) * fix(select): added disabled styling to select item * fix(select): removed disabled * fix(select): added cursor not allowed * fix(dropdown): added tabindex logic to dropdown (#749) * fix(input): remove red focus ring when input marked as required firefox (#750) * fix(multi-select): fixed width and hover color (#752) * feat(Skeleton-states): Add skeleton state styles (#713) * feat(skeleton): Add skeleton loading mixin and styles * feat(skeleton): Add skeleton icon styles * feat(skeleton): Add skeleton styles to components * feat(skeleton): Add structured list skeleton * feat: skeleton styles * feat: add skeleton demo html * feat: update skeleton html * feat(skeleton-states): Update accordion skeleton styles * feat(skeleton-states): Update accordion * chore: Update px to rem * chore: remove duplicate code * chore: Add correct color value for skeleton state * feat(skeleton-states): Update data table * fix(skeleton-states): Add helper-mixins import to components using skeleton states (#755) * fix(data-table): update data-table to use the new search component (#754) * fix(structured-list): Update header alignment to bottom to match designs (#753) * feat(truncation): add truncation classes (#757) * feat(truncation): add truncation classes * fix(truncation): update truncation classes to be more semantic * fix(truncation): use prefix variable * fix(structured-list): fixed column header text size (#766) * fix(structured-list): fixed column header text size * chore(structured-list): deleted extra file * fix(forms): Add helper-mixins import (#767) * fix(helper-classes): import vars file (#768) * fix(code-snippet): Update templates (#779) * fix(code-snippet): Update skeleton state styles * fix: swap code and pre tag nesting order * fix(code-snippet): Update hbs template for code snippet * fix: spelling error * chore: remove old files * chore: move changes from PR 774 to this * fix: Update click event to run on button * fix(pagination): bring v2 version back (#782) * chore(devenv): fix full-render demo (#783) * V9 merge 05182018 (#785) * feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme (#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js * fix(letter-spacing): Remove letter-spacing (#748) * fix(letter-spacing): remove letter-spacing across the board * fix(letter-spacing): change hard-coded letter-spacing values to use the mixin * fix(dropdown): added tabindex logic to dropdown (#749) * feat(Skeleton-states): Add skeleton state styles (#713) * feat(skeleton): Add skeleton loading mixin and styles * feat(skeleton): Add skeleton icon styles * feat(skeleton): Add skeleton styles to components * feat(skeleton): Add structured list skeleton * feat: skeleton styles * feat: add skeleton demo html * feat: update skeleton html * feat(skeleton-states): Update accordion skeleton styles * feat(skeleton-states): Update accordion * chore: Update px to rem * chore: remove duplicate code * chore: Add correct color value for skeleton state * feat(skeleton-states): Update data table * fix(font-face): bring missing $css--font-face reference back (#778) Fixes #777. * chore(devenv): update variant labels (#784) * chore(devenv): update variant labels * chore(devenv): modal config update * feat(tooltip): add definition tooltip (#714) * feat(tooltip): add definition tooltip * feat(tooltip): add on click tooltip * chore(tooltip): simple info tooltip * fix(tooltip): fix arrowhead 1 pixel * chore(tooltip): add v2 of tooltip in seperate folder * chore(tooltip): add previous version of tooltip * chore(tooltip): add files to globals * fix(tooltip): fix simple tooltip class name * chore(tooltip): add definition tooltip to readme * chore(tooltip): add tooltip icon * chore(tooltip): change definition tooltip to seperate element * fix(tooltip): fix merge conflict again * chore(tooltip): removed v2 and added new color variables * chore(tooltip): add bold modifier * chore(tooltip): updated migration to v9 and readme files * chore(tooltip): add focus to definition * chore(tooltip): remove tab * fix(tooltip): added accessibility aria tags * chore(tooltip): change arrow to be a dom element * chore(tooltip): change aria label location * chore(tooltip): attribute name change * chore(files): remove yarn-error.log (#800) * chore(package): remove npm5 lockfile and add lockfile to gitignore (#803) * V9 merge 05212018 (#801) * feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme (#746) * feat(dropdown): added inline dropdown * feat(dropdown): fixed js * feat(Skeleton-states): Add skeleton state styles (#713) * feat(skeleton): Add skeleton loading mixin and styles * feat(skeleton): Add skeleton icon styles * feat(skeleton): Add skeleton styles to components * feat(skeleton): Add structured list skeleton * feat: skeleton styles * feat: add skeleton demo html * feat: update skeleton html * feat(skeleton-states): Update accordion skeleton styles * feat(skeleton-states): Update accordion * chore: Update px to rem * chore: remove duplicate code * chore: Add correct color value for skeleton state * feat(skeleton-states): Update data table * fix(tile): add check to make sure element exists (#786) * feat(data-table-v2): add inline edit styles for cell (#780) * fix(table): Missing border in firefox (#787) * fix(overflow-menu): added different styles for focus and hover (#788) * fix(overflow-menu): added different styles for focus and hover * fix(overflow-menu): fixed danger hover/focus * fix(data-table-v2): remove left positioning from sort icon (#789) * fix(tile): check if is--expanded is set when tile component is loaded (#791) * fix(danger-button): Add correct hover color for icon (#794) * fix(table): removes selected class from row on cancel click (#793) * chore(git): update gitignore for *.log files (#798) * fix(button): bring back primary danger button * chore(package): update lockfile to remove artifactory references (#808) * Light dropdown styles (#809) * feat(dropdown): Add light variation * feat(list-box): Add light variation * Icon updates (#810) * feat(icons): start updating icons * feat(icons): update more icons * feat(icons): continue icon work * feat(icons): finish up icon updates * fix(overflow): fix hover colors on overflow menu * fix(components): some small fixes for v9 (#812) * 732 search (#811) * chore(search): remove icons from search * fix(search): fix default close button offset * fix(form): fixed button width (#819) * fix(docs): Update Component docs (#815) * chore: Remove button docs ref glyphs * fix(docs): Update component docs * fix(code-snippet): fixed a render issue for the light version (#817) * feat(slider): Light variation (#818) * feat(slider): Add light variation * fix: Fix spelling error in all config files * feat(checkbox): Update checkboxes to match new icon set (#822) * feat(checkbox): Update checkboxes to match new icon set * feat: Update checkbox styles * fix: Add code snippet example skeleton state html (#827) * chore(tooltip): change to lowercase 'label' (#836) * fix(search): close button positioning for custom react search (#835) * fix(radio): Update radio + checkbox border colors (#834) * fix(radio-button): update border color * fix(checkbox): update checkbox colors * fix(icons): Update data table v2 & card icons (#826) * fix(icons): Update data table v2 & card icons * fix: Fix toolbar search icon from being cut off * fix(pagination): update colors (#832) * fix(multi-select): update hover color (#830) * fix(v9): small fixes to components (#838) * fix(v9): small fixes to components * fix(tooltip): align focus on icon with text * fix(multi-select): fix HTML structure of multi select (#840) * fix(pagination): fix text input position in pagination V1 (#841) * fix(tooltip): Definition tooltip positioning fix (#843) * fix(tooltip): update tooltip definition markup * fix: Add back in js positioning * chore: cleanup js comments * fix(tooltips: Tooltip a11y (#846) * fix(tooltip): update tooltip definition markup * fix(tooltip): top positioning * fix: A11y fixes * chore: update html/js/readme * chore: revert js changes. * fix(tooltip): position fix (#848) * fix(icons): update icons, other small fixes (#849) * fix(icons): update icons, other small fixes * fix(icon): add a w * fix(code-snippet): fixed feedback not showing up in firefox (#852) * chore: update dev env to work in IE11 (#853) * chore: remove deprecated components (#855) * fix(components): misc fixes for v9 (#854) * fix(inline-dropdown): removed box-shadow * fix(time-picker): fixed arrow being positioned weird in firefox * fix(code-snippet): banner showing up on ie11 * fix(form): remove margins from bx--form-item (#861) * fix(list-box): removed styles on disabled item (#862) * fix(select): position arrow based on bottom rather than top (#864) BREAKING CHANGE: update to v9

…-system#579) * fix(misc): misc fixes (carbon-design-system#530) * chore(lint): remove console.log from overflow * chore(build): remove node 4 from travis * chore(ButtonSet): mark as deprecated (carbon-design-system#510) Official carbon-components no longer need to use explicit containers for pairing button components. Buttons will space themselves when primary and secondary pairs are created. * fix(overflowmenu): cast to array to discard null children first * fix(overflow): those trailing commas

asudoh requested review from alisonjoseph, joshblack, marijohannessen and tw15egan February 15, 2018 10:46

asudoh force-pushed the parameterized-component-sample branch 8 times, most recently from 5dc31a6 to 274ab63 Compare February 16, 2018 01:19

asudoh changed the title ~~[WIP][RFC] chore(devenv): introduced parameterized demo HTML~~ [RFC] chore(devenv): introduced parameterized demo HTML Feb 16, 2018

asudoh force-pushed the parameterized-component-sample branch from 274ab63 to c74e6a0 Compare February 16, 2018 01:25

joshblack reviewed Feb 16, 2018

View reviewed changes

joshblack mentioned this pull request Feb 16, 2018

Parameterize component markup to enable distribution of templates #585

Closed

asudoh force-pushed the parameterized-component-sample branch 6 times, most recently from 5c7c995 to 6dabc3b Compare February 19, 2018 18:02

joshblack reviewed Feb 21, 2018

View reviewed changes

marijohannessen reviewed Feb 21, 2018

View reviewed changes

asudoh mentioned this pull request Feb 22, 2018

chore(devenv): remove forced viewport height #603

Merged

asudoh force-pushed the parameterized-component-sample branch from 6dabc3b to ab4938c Compare February 22, 2018 20:06

asudoh changed the base branch from master to v9-dev February 22, 2018 21:29

asudoh changed the title ~~[RFC] chore(devenv): introduced parameterized demo HTML~~ chore(devenv): introduced parameterized demo HTML Feb 22, 2018

asudoh changed the base branch from v9-dev to v9 May 3, 2018 23:41

asudoh force-pushed the parameterized-component-sample branch from ab4938c to a71db99 Compare May 4, 2018 01:15

asudoh force-pushed the parameterized-component-sample branch from a71db99 to 9d5cc5f Compare May 10, 2018 12:59

chore(devenv): introduced parameterized demo HTML

844ba84

asudoh force-pushed the parameterized-component-sample branch from 9d5cc5f to 844ba84 Compare May 10, 2018 13:11

asudoh mentioned this pull request May 11, 2018

chore(LiveComponent): refer to dist version of HTML carbon-design-system/design-system-website#204

Closed

marijohannessen approved these changes May 14, 2018

View reviewed changes

asudoh added the one more review label May 14, 2018

tw15egan approved these changes May 14, 2018

View reviewed changes

joshblack approved these changes May 15, 2018

View reviewed changes

asudoh merged commit 4edeba9 into carbon-design-system:v9 May 15, 2018

asudoh deleted the parameterized-component-sample branch May 15, 2018 23:25

asudoh added a commit that referenced this pull request May 30, 2018

chore(devenv): introduced parameterized demo HTML (#579)

e1a8ba8

joshblack pushed a commit that referenced this pull request Jun 4, 2018

chore(devenv): introduced parameterized demo HTML (#579)

2ab181b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(devenv): introduced parameterized demo HTML #579

chore(devenv): introduced parameterized demo HTML #579

asudoh commented Feb 15, 2018 •

edited

Loading

joshblack Feb 16, 2018

scottnath Feb 16, 2018

joshblack commented Feb 16, 2018

asudoh commented Feb 19, 2018 •

edited

Loading

joshblack Feb 21, 2018

asudoh Feb 21, 2018 •

edited

Loading

asudoh Feb 21, 2018

joshblack commented Feb 21, 2018

marijohannessen left a comment •

edited

Loading

marijohannessen commented Feb 21, 2018

joshblack commented Feb 21, 2018

marijohannessen commented Feb 21, 2018

joshblack commented Feb 21, 2018

marijohannessen commented Feb 21, 2018

joshblack commented Feb 21, 2018

asudoh commented Feb 21, 2018 •

edited

Loading

asudoh commented Feb 22, 2018

asudoh commented Feb 22, 2018 •

edited

Loading

shinytoyrobots commented May 9, 2018

tw15egan left a comment

asudoh commented May 15, 2018

		@@ -0,0 +1,8 @@
		<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" type="button">Button</button>

chore(devenv): introduced parameterized demo HTML #579

chore(devenv): introduced parameterized demo HTML #579

Conversation

asudoh commented Feb 15, 2018 • edited Loading

Overview

Added

Changed

Testing / Reviewing

Appendix

Current goal

Future goal (With separate PRs)

Non-goal

joshblack Feb 16, 2018

Choose a reason for hiding this comment

scottnath Feb 16, 2018

Choose a reason for hiding this comment

joshblack commented Feb 16, 2018

asudoh commented Feb 19, 2018 • edited Loading

joshblack Feb 21, 2018

Choose a reason for hiding this comment

asudoh Feb 21, 2018 • edited Loading

Choose a reason for hiding this comment

asudoh Feb 21, 2018

Choose a reason for hiding this comment

joshblack commented Feb 21, 2018

marijohannessen left a comment • edited Loading

Choose a reason for hiding this comment

marijohannessen commented Feb 21, 2018

joshblack commented Feb 21, 2018

marijohannessen commented Feb 21, 2018

joshblack commented Feb 21, 2018

marijohannessen commented Feb 21, 2018

joshblack commented Feb 21, 2018

asudoh commented Feb 21, 2018 • edited Loading

asudoh commented Feb 22, 2018

asudoh commented Feb 22, 2018 • edited Loading

shinytoyrobots commented May 9, 2018

tw15egan left a comment

Choose a reason for hiding this comment

asudoh commented May 15, 2018

asudoh commented Feb 15, 2018 •

edited

Loading

asudoh commented Feb 19, 2018 •

edited

Loading

asudoh Feb 21, 2018 •

edited

Loading

marijohannessen left a comment •

edited

Loading

asudoh commented Feb 21, 2018 •

edited

Loading

asudoh commented Feb 22, 2018 •

edited

Loading