Skip to content

Typography metadata fixes and deprecation bits #523

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

Merged
bernhard-adobe merged 7 commits into from
Feb 7, 2020
Merged

Typography metadata fixes and deprecation bits #523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0fa8611
docs: support hiding examples, disabling fastLoad
lazd Feb 6, 2020
0f3c1f3
docs: support changing Variants heading, enable Spectrum cards
lazd Feb 6, 2020
6a36e8b
docs: correct Typography example status, markup errors, and <h1> usage
lazd Feb 6, 2020
644d30c
docs: remove Tool from menu, fix ButtonGroup Spectrum link
lazd Feb 6, 2020
5554895
docs: correct Heading component description
lazd Feb 6, 2020
cf7c72c
docs: use the descriptions from the Spectrum site
lazd Feb 6, 2020
4a7c01a
docs: correct spelling mistake
lazd Feb 6, 2020
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
1 change: 1 addition & 0 deletions components/button/metadata/actionbutton.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,7 @@ examples:
</button>
- id: actionbutton-quiet
name: Quiet
description: The Quiet Action Button should be used where you previously used the [deprecated Tool component](tool.html).
markup: |
<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
Expand Down
3 changes: 2 additions & 1 deletion components/button/metadata/tool.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
name: Tool
status: Verified
dnaStatus: Deprecated
Copy link
Contributor

@bernhard-adobe bernhard-adobe Feb 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

status is now "dnaStatus"?

Copy link
Member Author

@lazd lazd Feb 6, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, they are two separate things, which work together in concert with the data from DNA in a very confusing fashion to display whether a component is deprecated or whatnot.

It's best to ignore this, otherwise we'll be reworking tons of unrelated stuff to untangle the mess ;)

Copy link
Contributor

@bernhard-adobe bernhard-adobe Feb 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for the clarification, all good!

description: The tool button.
SpectrumSiteSlug: https://spectrum.adobe.com/page/tool/
hide: true
examples:
- name: Standard
markup: |
Expand Down
2 changes: 1 addition & 1 deletion components/buttongroup/metadata/buttongroup.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: Button Group
SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/button/
SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
examples:
- id: buttongroup
name: Horizontal
Expand Down
2 changes: 1 addition & 1 deletion components/site/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,7 @@ governing permissions and limitations under the License.

.spectrum-CSSComponent-resource--adobe {
color: rgb(255, 2, 1) !important;
background-color: rgba(255, 2, 1, 0.1) !important;
background-color: var(--spectrum-global-color-gray-100) !important;
}

.spectrum-CSSComponent-resource--github {
Expand Down
22 changes: 9 additions & 13 deletions components/typography/metadata/typography-body.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
name: Typography Body
description: "Spectrum Typography Body."
SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/body/
id: body-m
description: Body is a typography component primarily used within Spectrum components and for blocks of text.
SpectrumSiteSlug: https://spectrum.adobe.com/page/body/
examples:
- id: body-1
- id: body-m
name: Body
status: Verified
description: Default body text sizes.
Expand All @@ -27,13 +28,12 @@ examples:
<p class="spectrum-Body spectrum-Body--XS spectrum-Body--serif">BodyXS Text Serif <em>BodyXS Emphasis Serif</em> <strong>BodyXS Strong Serif</strong>.</p>
</div>

- id: heading-body-1
- id: heading-m
name: Standard
status: Verified
description: Typography elements paired to display clear content hierarchies.
markup: |
<div class="spectrum-Typography">
<div style="max-width: 600px;">
<h1 class="spectrum-Heading spectrum-Heading--XXXL">Aliquet Mauris Eu</h1>
<p class="spectrum-Body spectrum-Body--XXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
<p class="spectrum-Body spectrum-Body--XXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Expand All @@ -49,23 +49,19 @@ examples:
<p class="spectrum-Body spectrum-Body--L">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
<p class="spectrum-Body spectrum-Body--L">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<h1 class="spectrum-Heading spectrum-Heading--L">Lorem Ipsum Dolor</h1>
<p class="spectrum-Body spectrum-Body--L">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
<p class="spectrum-Body spectrum-Body--L">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<h1 class="spectrum-Heading spectrum-Heading--M">Lorem Ipsum Dolor</h1>
<h3 class="spectrum-Heading spectrum-Heading--M">Lorem Ipsum Dolor</h3>
<p class="spectrum-Body spectrum-Body--M">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
<p class="spectrum-Body spectrum-Body--M">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<h1 class="spectrum-Heading spectrum-Heading--S">Lorem Ipsum Dolor</h1>
<h4 class="spectrum-Heading spectrum-Heading--S">Lorem Ipsum Dolor</h4>
<p class="spectrum-Body spectrum-Body--S">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
<p class="spectrum-Body spectrum-Body--S">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<h1 class="spectrum-Heading spectrum-Heading--XS">Lorem Ipsum Dolor</h1>
<h5 class="spectrum-Heading spectrum-Heading--XS">Lorem Ipsum Dolor</h5>
<p class="spectrum-Body spectrum-Body--XS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
<p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<h1 class="spectrum-Heading spectrum-Heading--XXS">Lorem Ipsum Dolor</h1>
<h6 class="spectrum-Heading spectrum-Heading--XXS">Lorem Ipsum Dolor</h6>
Copy link
Contributor

@bernhard-adobe bernhard-adobe Feb 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so this is all fine and good but I am wondering if this matters as XXXL & XXL are also h1-s and if we want to encourage that. I thought the idea of t-shirt sizing was to remove the link between numeric title sizes and heading sizes.

Copy link
Member Author

@lazd lazd Feb 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basically, <h1>-<h6> correspond to semantic heading levels. The top-level heading on a page must be a <h1>, but depending on the design intent, it could be XL, XXL, or XXXL. For instance, once could use a <h1> that is XXL (formerly display) as the top-level heading on the main site landing page, but could use a <h1> that is a XL elsewhere for the top-level heading. This all depends on the design.

Since there is no such thing as a <h7> tag, and because of the way the sizing plays out, the 3 largest sizes (XXXL, XXL, XL) are all shown with <h1> tags.

Copy link
Contributor

@bernhard-adobe bernhard-adobe Feb 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for explaining your reasoning. this is good to me

<p class="spectrum-Body spectrum-Body--XS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
<p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
8 changes: 5 additions & 3 deletions components/typography/metadata/typography-code.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
name: Typography Code
description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples."
id: code-m
description: Code is a typography component used for text that represents code.
SpectrumSiteSlug: https://spectrum.adobe.com/page/code/
examples:
- id: code-1
- id: code-m
name: Typography - Code
status: Verified
description: Typographic styles for computer code.
Expand All @@ -12,7 +13,8 @@ examples:
<code class="spectrum-Code spectrum-Code--M">CodeM Text <strong>Strong</strong> <em>Emphasis</em> </code>
<code class="spectrum-Code spectrum-Code--S">CodeS Text <strong>Strong</strong> <em>Emphasis</em> </code>
<code class="spectrum-Code spectrum-Code--XS">CodeXS Text <strong>Strong</strong> <em>Emphasis</em> </code>
<pre><code class="spectrum-Code spectrum-Code--M">CodeM Text Wrapped in:
<pre><code class="spectrum-Code spectrum-Code--M">CodeM text
wrapped in
pre tags for
multiline
goodness</code></pre>
Loading