Skip to content
Permalink
Browse files

chore: Fix some old syntax in the documentation.

  • Loading branch information...
chriseppstein committed Oct 24, 2019
1 parent 3fcaa51 commit ad1f05d3d7d2d2c2ca4392f4952d834959e55c1e
@@ -144,8 +144,8 @@ For example, given this Block file and template:
```

```handlebars
<div class="class-0" state:active={{isActive}}>
<div class="{{style-if isColorful 'class-1'}}" state:color={{dynamicColor}}>
<div block:class="class-0" block:active={{isActive}}>
<div block:class="{{style-if isColorful 'class-1'}}" block:color={{dynamicColor}}>
```

We can easily conceptualize the `RewriteMapping` data for each element in development mode, when the CSS output is just BEM.
@@ -279,9 +279,9 @@ However, whatever the implementation is, it will feel as though you're interfaci

```hbs
{{!-- :scope selector is automagically applied to the template's root-level element. Thanks Glimmer! --}}
<section state:enabled={{isEnabled}}>
<button class="button">
<div class="icon" state:inverse={{isInverse}}></div>
<section block:enabled={{isEnabled}}>
<button block:class="button">
<div block:class="icon" block:inverse={{isInverse}}></div>
{{value}}
</button>
</section>
@@ -156,19 +156,19 @@ For example, given the following Block file, we can determine the type of usage

Static styles are guaranteed to never change:
```handlebars
<div class="my-class" state:active="true"></div>
<div block:class="my-class" block:active="true"></div>
```

Dynamic styles may or may not be applied depending on application state:
```handlebars
<div class="{{style-if value 'my-class'}}" state:active={{isActive}}></div>
<div block:class="{{style-if value 'my-class'}}" block:active={{isActive}}></div>
```

Mutually Exclusive styles are guaranteed to never be used on the element at the same time:
```handlebars
{{!-- `my-class` and `other-class` are mutually exclusive --}}
{{!-- `[color=red]` and `[color=blue]` are mutually exclusive --}}
<div class="{{style-if value 'my-class' 'other-class'}}" state:color={{color}}></div>
<div block:class="{{style-if value 'my-class' 'other-class'}}" block:color={{color}}></div>
```

Every Template Integration's syntax for consuming Blocks will differ slightly. It is the responsibility of the integration to implement template parsing and Block object discovery to feed in to the `ElementAnalysis` APIs. You can read more about these style tracking methods on the [`ElementAnalysis` API documentation][https://css-blocks.com/api/classes/_css_blocks_core.elementanalysis.html].
@@ -1,7 +1,7 @@
<div></div>
{{!-- <div state:enabled={{enabled}} id="addon-component-scope">
{{!-- <div block:enabled={{enabled}} id="addon-component-scope">
Node Module Resolution Scope Styles State: {{enabled}}
<div class="sub-class" id="addon-component-sub-class" state:enabled={{enabled}}>
<div class="sub-class" id="addon-component-sub-class" block:enabled={{enabled}}>
Node Module Resolution Sub-Class Styles State: {{enabled}}
</div>
<button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>
@@ -72,9 +72,9 @@ const data: Data = {
],

glimmerExample: `
<button state:inverse={{inverse}} state:size={{size}}>
<button block:inverse={{inverse}} block:size={{size}}>
{{#if icon}}
<span class="icon">
<span block:class="icon">
{{icon}}
</span>
{{/if}}

0 comments on commit ad1f05d

Please sign in to comment.
You can’t perform that action at this time.