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

Bug fixes + minor doc site improvements #39

Merged
merged 19 commits into from
Jul 31, 2024
Merged

Bug fixes + minor doc site improvements #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d41bef9
Small fix for `body` spacing for announcment dialog
slhinyc May 30, 2024
48ba630
Fix bug where contained checkbox & radio have hover state when disabled
slhinyc Jun 27, 2024
d2cda7b
Small update to directions for opening a PR in `contributing.md`
slhinyc Jul 8, 2024
3135987
Update example button copy to be sentence case to follow guidelines
slhinyc Jul 17, 2024
a63ec95
Update doc site prop table to be readable with no scrolling
slhinyc Jul 17, 2024
1106a25
Fix bug where disabled link button is still clickable
slhinyc Jul 17, 2024
3841d24
Add more Dialog examples
slhinyc Jul 17, 2024
42b6d20
Fix bug where event names are hidden if `SLIM` preview is selected
slhinyc Jul 17, 2024
f4460a5
Bump to 2.1.3 + changelog.md
slhinyc Jul 17, 2024
765e86f
Change props table icon indicating when component reflects
slhinyc Jul 17, 2024
4418229
Delete unused CSS instead of commenting out
slhinyc Jul 17, 2024
4326907
Update Dialog variants table to make it more clear
slhinyc Jul 17, 2024
b571147
Delete docs table col min-width dec to prevent table overflow-x & scr…
slhinyc Jul 22, 2024
6c28580
Update `text` button styling to strip all padding so that it aligns b…
slhinyc Jul 25, 2024
7979b11
Add Link page with examples and guidelines
slhinyc Jul 25, 2024
1f9848d
Delete unused style decs + other doc pages cleanup
slhinyc Jul 25, 2024
6e85bce
Update changelog + bump package.json
slhinyc Jul 25, 2024
dcbac64
Fix typo
slhinyc Jul 25, 2024
470881e
Update Link page usage guidelines
slhinyc Jul 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 88 additions & 84 deletions docs/_includes/component.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,11 @@
{# Guidelines #}
{% if
guidelines %}
<h2>Usage Guidelines</h2>
<h2>Usage</h2>
<div id="guidelines-content">{{ guidelines | markdown | safe }}</div>
{% endif %}
{# Importing #}
<h2>Importing</h2>
{# <h2>Importing</h2>
<p>
If you're using the autoloader or the traditional loader, you can ignore this
section. Otherwise, feel free to use any of the following snippets to
Expand Down Expand Up @@ -134,41 +134,11 @@
</p>
<pre><code class="language-js">import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
</sl-tab-panel>
</sl-tab-group>

{# Slots #}
{% if component.slots.length %}
<h2>Slots</h2>

<table>
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
</tr>
</thead>
<tbody>
{% for slot in component.slots %}
<tr>
<td class="nowrap">
{% if slot.name %}
<code>{{ slot.name }}</code>
{% else %} (default) {% endif %}
</td>
<td>{{ slot.description | markdownInline | safe }}</td>
</tr>
{% endfor %}
</tbody>
</table>

<p>
<em>Learn more about <a href="{{ rootUrl('/getting-started/usage#slots') }}">using slots</a>.</em>
</p>
{% endif %}
</sl-tab-group> #}

{# Properties #}
{% if component.properties.length %}
<h2>Properties</h2>
<h2>Component Props</h2>
{% if unusedProperties.length %}
<div role="alert" class="callout callout--warning">
<p>
Expand All @@ -179,28 +149,27 @@
{{ unusedProperties | markdown | safe }}
</div>
{% endif %}
<div role="alert" class="callout callout--tip">
<p>Scroll right to see the entire table</p>
</div>

<table>
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-reflects">Reflects</th>
<th class="table-type">Type</th>
<th class="table-name">Property</th>
<th class="table-default">Default</th>
<th class="table-description">Details</th>
</tr>
</thead>
<tbody>
{% for prop in component.properties %}
<tr>
<td>
<code class="nowrap">{{ prop.name }}</code>
<td class="table-name">
<code class="nowrap prop">{{ prop.name }}</code>
{% if prop.attribute | length > 0 %}
{% if prop.attribute != prop.name
%}
{% if prop.reflects %}
<sl-tooltip content="Property reflects">
<sl-icon library="fa" label="yes" name="fas-star" style="color: var(--sl-color-teal-500);"></sl-icon>
</sl-tooltip>
{% endif %}
{% if prop.attribute != prop.name %}
<br/>
<sl-tooltip content="This attribute is different from its property">
<small>
Expand All @@ -212,34 +181,29 @@
{% endif %}
{% endif %}
</td>
<td>{{ prop.description | markdownInline | safe }}</td>
<td style="text-align: center">
{% if prop.reflects %}
<sl-icon label="yes" name="check-lg"></sl-icon>
{% endif %}
</td>
<td>
{% if prop.type.text %}
<code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
{% else %} - {% endif %}
</td>
<td>
<td class="table-default">
{% if prop.default %}
<code>{{ prop.default | markdownInline | safe }}</code>
{% else %} - {% endif %}
<code class="nowrap">{{ prop.default | markdownInline | safe }}</code>
{% else %} &mdash; {% endif %}
</td>
<td class="table-description">
<p>
{% if prop.type.text %}
<code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
{% else %} &mdash; {% endif %}
</p>
<p>{{ prop.description | markdownInline | safe }}</p>
</td>
</tr>
{% endfor %}
<tr>
<td class="nowrap">
<code>updateComplete</code>
<td class="table-name">
<code class="prop">updateComplete</code>
</td>
<td></td>
<td>
A read-only promise that resolves when the component has <a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Expand All @@ -249,6 +213,36 @@
</p>
{% endif %}

{# Slots #}
{% if component.slots.length %}
<h2>Slots</h2>

<table>
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Details</th>
</tr>
</thead>
<tbody>
{% for slot in component.slots %}
<tr>
<td class="nowrap">
{% if slot.name %}
<code>{{ slot.name }}</code>
{% else %} (default) {% endif %}
</td>
<td>{{ slot.description | markdownInline | safe }}</td>
</tr>
{% endfor %}
</tbody>
</table>

<p>
<em>Learn more about <a href="{{ rootUrl('/getting-started/usage#slots') }}">using slots</a>.</em>
</p>
{% endif %}

{# Events #}
{% if component.events.length %}
<h2>Events</h2>
Expand All @@ -257,9 +251,9 @@
<thead>
<tr>
<th class="table-name" data-flavor="html">Name</th>
<th class="table-name" data-flavor="slim">Name</th>
<th class="table-name" data-flavor="react">React Event</th>
<th class="table-description">Description</th>
<th class="table-event-detail">Event Detail</th>
<th class="table-description">Details</th>
</tr>
</thead>
<tbody>
Expand All @@ -268,15 +262,21 @@
<td data-flavor="html">
<code class="nowrap">{{ event.name }}</code>
</td>
<td data-flavor="slim">
<code class="nowrap">{{ event.name }}</code>
</td>
<td data-flavor="react">
<code class="nowrap">{{ event.reactName }}</code>
</td>
<td>{{ event.description | markdownInline | safe }}</td>
<td>
{% if event.type.text %}
<code>{{ event.type.text | trimPipes }}</code>
{% else %} - {% endif %}
<p>
<code>{{ event.type.text | trimPipes }}</code>
</p>
{% endif %}
<p>{{ event.description | markdownInline | safe }}</p>
</td>
<td></td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -295,8 +295,7 @@
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-arguments">Arguments</th>
<th class="table-description">Details</th>
</tr>
</thead>
<tbody>
Expand All @@ -305,16 +304,18 @@
<td class="nowrap">
<code>{{ method.name }}()</code>
</td>
<td>{{ method.description | markdownInline | safe }}</td>
<td>
{% if method.parameters.length %}
<code>
{% for param in method.parameters %}
{{ param.name }}: {{ param.type.text | trimPipes }}
{% if not loop.last %},{% endif %}
{% endfor %}
</code>
{% else %} - {% endif %}
<p>
<code>
{% for param in method.parameters %}
{{ param.name }}: {{ param.type.text | trimPipes }}
{% if not loop.last %},{% endif %}
{% endfor %}
</code>
</p>
{% endif %}
<p>{{ method.description | markdownInline | safe }}</p>
</td>
</tr>
{% endfor %}
Expand All @@ -334,8 +335,7 @@
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-default">Default</th>
<th class="table-description">Details</th>
</tr>
</thead>
<tbody>
Expand All @@ -344,8 +344,12 @@
<td class="nowrap">
<code>{{ cssProperty.name }}</code>
</td>
<td>{{ cssProperty.description | markdownInline | safe }}</td>
<td>{{ cssProperty.default }}</td>
<td>
{% if cssProperty.default.length %}
<p>{{ cssProperty.default }}</p>
{% endif %}
<p>{{ cssProperty.description | markdownInline | safe }}</p>
</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -358,7 +362,7 @@

{# CSS Parts #}
{% if component.cssParts.length %}
<h2>Parts</h2>
<h2>CSS Parts</h2>

<table>
<thead>
Expand Down
13 changes: 8 additions & 5 deletions docs/_includes/sidebar.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,19 @@
<h2>Tutorials</h2>
<ul>
<li>
<a href="/teamshares/recipes/protips">Protips</a>
<a href="/teamshares/recipes/protips">Shoelace Protips</a>
</li>
<li>
<a href="/teamshares/view-components/wrapping">View Components</a>
<a href="/teamshares/recipes/rails-ujs">Shoelace &amp; Rails UJS</a>
</li>
<li>
<a href="/getting-started/form-controls">Form Controls</a>
<a href="/teamshares/recipes/cypress">Shoelace &amp; Cypress</a>
</li>
<li>
<a href="/teamshares/recipes/rails-ujs">Rails UJS</a>
<a href="/teamshares/view-components/wrapping">View Components</a>
</li>
<li>
<a href="/teamshares/recipes/cypress">Cypress</a>
<a href="/getting-started/form-controls">Form Controls</a>
</li>
</ul>
</li>
Expand Down Expand Up @@ -141,6 +141,9 @@
<li>
<a href="/components/input">Input</a>
</li>
<li>
<a href="/teamshares/link">Link</a>
</li>
<li>
<a href="/components/menu">Menu</a>
</li>
Expand Down
Loading
Loading