Remove CSS utilities from Blankslate
* Remove CSS utilities from Blankslate
Also change the HTML structure and tweak styles to better match
Primer CSS.
This is part of the effort to remove all usages of utility classes to
improve consistency and prevent specificity bugs.
MODIFY
CHANGELOG.md
CHANGELOG.md
@@ -30,6 +30,12 @@ The category for changes related to documentation, testing and tooling. Also, fo
## main
+### Updates
+
+- Remove CSS utilities from Blankslate
+
+ _Hector Garcia_
+
## 0.0.68
### Updates

MODIFY
app/components/primer/beta/blankslate.html.erb
app/components/primer/beta/blankslate.html.erb
<%= heading %>
<%= description %>
+ <% if primary_action.present? %>
+ <div class="blankslate-action">
<%= primary_action %>
+ </div>
+ <% end %>
<% if secondary_action.present? %>
- <div class="mt-3">
+ <div class="blankslate-action">
<%= secondary_action %>
</div>
<% end %>

MODIFY
app/components/primer/beta/blankslate.rb
app/components/primer/beta/blankslate.rb
@@ -26,20 +26,19 @@ module Primer
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
renders_one :visual, types: {
icon: lambda { |**system_arguments|
- system_arguments[:mb] = 3
system_arguments[:size] ||= :medium
system_arguments[:classes] = class_names("blankslate-icon", system_arguments[:classes])
Primer::OcticonComponent.new(**system_arguments)
},
spinner: lambda { |**system_arguments|
- system_arguments[:mb] = 3
+ system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
Primer::SpinnerComponent.new(**system_arguments)
},
image: lambda { |**system_arguments|
- system_arguments[:mb] = 3
system_arguments[:size] = "56x56"
+ system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
Primer::Image.new(**system_arguments)
}
@@ -52,8 +51,7 @@ module Primer
renders_one :heading, lambda { |tag:, **system_arguments|
deny_tag_argument(**system_arguments)
system_arguments[:tag] = tag
- system_arguments[:mb] = 1
- system_arguments[:classes] = class_names("h2", system_arguments[:classes])
+ system_arguments[:classes] = class_names("blankslate-heading", system_arguments[:classes])
Primer::HeadingComponent.new(**system_arguments)
}
@@ -66,7 +64,7 @@ module Primer
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
renders_one :description, lambda { |**system_arguments|
deny_tag_argument(**system_arguments)
- system_arguments[:tag] = :div
+ system_arguments[:tag] = :p
Primer::BaseComponent.new(**system_arguments)
}
@@ -82,7 +80,6 @@ module Primer
deny_tag_argument(**system_arguments)
system_arguments[:tag] = :a
system_arguments[:href] = href
- system_arguments[:mt] = 5
system_arguments[:size] = :medium
system_arguments[:scheme] ||= :primary
@@ -98,8 +95,6 @@ module Primer
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
renders_one :secondary_action, lambda { |href:, **system_arguments|
system_arguments[:href] = href
- # Padding is needed to increase touch area.
- system_arguments[:p] = 3
Primer::LinkComponent.new(**system_arguments)
}

MODIFY
docs/content/components/beta/blankslate.md
docs/content/components/beta/blankslate.md
@@ -93,7 +93,7 @@ The `secondary_action` slot renders a normal anchor link, which can be used to r
### Basic
-<Example src=" <div data-view-component='true' class='blankslate'> <h2 data-view-component='true' class='h2 mb-1'>Title</h2> <div data-view-component='true'>Description</div> </div>" />
+<Example src=" <div data-view-component='true' class='blankslate'> <h2 data-view-component='true' class='blankslate-heading'>Title</h2> <p data-view-component='true'>Description</p></div>" />
```erb
<%= render Primer::Beta::Blankslate.new do |c| %>
@@ -106,7 +106,7 @@ The `secondary_action` slot renders a normal anchor link, which can be used to r
Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-<Example src=" <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-globe blankslate-icon mb-3'> <path fill-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.513 11.5h4.745c.1-3.037 1.1-5.49 2.093-7.204.39-.672.78-1.233 1.119-1.673C6.11 3.329 2.746 7 2.513 11.5zm4.77 1.5H2.552a9.505 9.505 0 007.918 8.377 15.698 15.698 0 01-1.119-1.673C8.413 18.085 7.47 15.807 7.283 13zm1.504 0h6.426c-.183 2.48-1.02 4.5-1.862 5.951-.476.82-.95 1.455-1.304 1.88L12 20.89l-.047-.057a13.888 13.888 0 01-1.304-1.88C9.807 17.5 8.969 15.478 8.787 13zm6.454-1.5H8.759c.1-2.708.992-4.904 1.89-6.451.476-.82.95-1.455 1.304-1.88L12 3.11l.047.057c.353.426.828 1.06 1.304 1.88.898 1.548 1.79 3.744 1.89 6.452zm1.476 1.5c-.186 2.807-1.13 5.085-2.068 6.704-.39.672-.78 1.233-1.118 1.673A9.505 9.505 0 0021.447 13h-4.731zm4.77-1.5h-4.745c-.1-3.037-1.1-5.49-2.093-7.204-.39-.672-.78-1.233-1.119-1.673 4.36.706 7.724 4.377 7.957 8.877z'></path></svg> <h2 data-view-component='true' class='h2 mb-1'>Title</h2> <div data-view-component='true'>Description</div> </div>" />
+<Example src=" <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-globe blankslate-icon'> <path fill-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.513 11.5h4.745c.1-3.037 1.1-5.49 2.093-7.204.39-.672.78-1.233 1.119-1.673C6.11 3.329 2.746 7 2.513 11.5zm4.77 1.5H2.552a9.505 9.505 0 007.918 8.377 15.698 15.698 0 01-1.119-1.673C8.413 18.085 7.47 15.807 7.283 13zm1.504 0h6.426c-.183 2.48-1.02 4.5-1.862 5.951-.476.82-.95 1.455-1.304 1.88L12 20.89l-.047-.057a13.888 13.888 0 01-1.304-1.88C9.807 17.5 8.969 15.478 8.787 13zm6.454-1.5H8.759c.1-2.708.992-4.904 1.89-6.451.476-.82.95-1.455 1.304-1.88L12 3.11l.047.057c.353.426.828 1.06 1.304 1.88.898 1.548 1.79 3.744 1.89 6.452zm1.476 1.5c-.186 2.807-1.13 5.085-2.068 6.704-.39.672-.78 1.233-1.118 1.673A9.505 9.505 0 0021.447 13h-4.731zm4.77-1.5h-4.745c-.1-3.037-1.1-5.49-2.093-7.204-.39-.672-.78-1.233-1.119-1.673 4.36.706 7.724 4.377 7.957 8.877z'></path></svg> <h2 data-view-component='true' class='blankslate-heading'>Title</h2> <p data-view-component='true'>Description</p></div>" />
```erb
<%= render Primer::Beta::Blankslate.new do |c| %>
@@ -120,7 +120,7 @@ Add an `icon` to give additional context. Refer to the [Octicons](https://primer
Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-<Example src=" <div data-view-component='true' class='blankslate'> <svg style='box-sizing: content-box; color: var(--color-icon-primary);' width='64' height='64' viewBox='0 0 16 16' fill='none' data-view-component='true' class='mb-3 anim-rotate'> <circle cx='8' cy='8' r='7' stroke='currentColor' stroke-opacity='0.25' stroke-width='2' vector-effect='non-scaling-stroke' /> <path d='M15 8a7.002 7.002 0 00-7-7' stroke='currentColor' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke' /></svg> <h2 data-view-component='true' class='h2 mb-1'>Title</h2> <div data-view-component='true'>Description</div> </div>" />
+<Example src=" <div data-view-component='true' class='blankslate'> <svg style='box-sizing: content-box; color: var(--color-icon-primary);' width='64' height='64' viewBox='0 0 16 16' fill='none' data-view-component='true' class='blankslate-image anim-rotate'> <circle cx='8' cy='8' r='7' stroke='currentColor' stroke-opacity='0.25' stroke-width='2' vector-effect='non-scaling-stroke' /> <path d='M15 8a7.002 7.002 0 00-7-7' stroke='currentColor' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke' /></svg> <h2 data-view-component='true' class='blankslate-heading'>Title</h2> <p data-view-component='true'>Description</p></div>" />
```erb
<%= render Primer::Beta::Blankslate.new do |c| %>
@@ -134,7 +134,7 @@ Add a [SpinnerComponent](https://primer.style/view-components/components/spinner
Add an `image` to give context that an Octicon couldn't.
-<Example src=" <div data-view-component='true' class='blankslate'> <img src='https://github.githubassets.com/images/modules/site/features/security-icon.svg' size='56x56' alt='Security - secure vault' data-view-component='true' class='mb-3' /> <h2 data-view-component='true' class='h2 mb-1'>Title</h2> <div data-view-component='true'>Description</div> </div>" />
+<Example src=" <div data-view-component='true' class='blankslate'> <img src='https://github.githubassets.com/images/modules/site/features/security-icon.svg' size='56x56' alt='Security - secure vault' data-view-component='true' class='blankslate-image' /> <h2 data-view-component='true' class='blankslate-heading'>Title</h2> <p data-view-component='true'>Description</p></div>" />
```erb
<%= render Primer::Beta::Blankslate.new do |c| %>
@@ -148,7 +148,7 @@ Add an `image` to give context that an Octicon couldn't.
Pass custom content to `description`.
-<Example src=" <div data-view-component='true' class='blankslate'> <h2 data-view-component='true' class='h2 mb-1'>Title</h2> <div data-view-component='true'> <em>Your custom content here</em></div> </div>" />
+<Example src=" <div data-view-component='true' class='blankslate'> <h2 data-view-component='true' class='blankslate-heading'>Title</h2> <p data-view-component='true'> <em>Your custom content here</em></p></div>" />
```erb
<%= render Primer::Beta::Blankslate.new do |c| %>
@@ -163,7 +163,7 @@ Pass custom content to `description`.
Provide a `primary_action` to guide users to take action from the blankslate. The `primary_action` appears below the description and custom content.
-<Example src=" <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon mb-3'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='h2 mb-1'>Welcome to the mona wiki!</h2> <div data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</div> <a href='https://github.com/monalisa/mona/wiki/_new' data-view-component='true' class='btn-primary btn mt-5'> Create the first page</a></div>" />
+<Example src=" <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='blankslate-heading'>Welcome to the mona wiki!</h2> <p data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</p> <div class='blankslate-action'> <a href='https://github.com/monalisa/mona/wiki/_new' data-view-component='true' class='btn-primary btn'> Create the first page</a> </div></div>" />
```erb
<%= render Primer::Beta::Blankslate.new do |c| %>
@@ -178,7 +178,7 @@ Provide a `primary_action` to guide users to take action from the blankslate. Th
Add an additional `secondary_action` to help users learn more about a feature. See [Accessibility](#accessibility). `secondary_action` will be shown at the very bottom:
-<Example src=" <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon mb-3'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='h2 mb-1'>Welcome to the mona wiki!</h2> <div data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</div> <div class='mt-3'> <a href='https://docs.github.com/en/github/building-a-strong-community/about-wikis' data-view-component='true' class='p-3'>Learn more about wikis</a> </div></div>" />
+<Example src=" <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='blankslate-heading'>Welcome to the mona wiki!</h2> <p data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</p> <div class='blankslate-action'> <a href='https://docs.github.com/en/github/building-a-strong-community/about-wikis' data-view-component='true'>Learn more about wikis</a> </div></div>" />
```erb
<%= render Primer::Beta::Blankslate.new do |c| %>
@@ -193,7 +193,7 @@ Add an additional `secondary_action` to help users learn more about a feature. S
`primary_action` and `secondary_action` can also be used together. The `primary_action` will always be rendered before the `secondary_action`:
-<Example src=" <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon mb-3'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='h2 mb-1'>Welcome to the mona wiki!</h2> <div data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</div> <a href='https://github.com/monalisa/mona/wiki/_new' data-view-component='true' class='btn-primary btn mt-5'> Create the first page</a> <div class='mt-3'> <a href='https://docs.github.com/en/github/building-a-strong-community/about-wikis' data-view-component='true' class='p-3'>Learn more about wikis</a> </div></div>" />
+<Example src=" <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='blankslate-heading'>Welcome to the mona wiki!</h2> <p data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</p> <div class='blankslate-action'> <a href='https://github.com/monalisa/mona/wiki/_new' data-view-component='true' class='btn-primary btn'> Create the first page</a> </div> <div class='blankslate-action'> <a href='https://docs.github.com/en/github/building-a-strong-community/about-wikis' data-view-component='true'>Learn more about wikis</a> </div></div>" />
```erb
<%= render Primer::Beta::Blankslate.new do |c| %>
@@ -209,7 +209,7 @@ Add an additional `secondary_action` to help users learn more about a feature. S
There are a few variations of how the Blankslate appears: `narrow` adds a maximum width of `485px`, and `spacious` increases the padding from `32px` to `80px 40px`.
-<Example src=" <div data-view-component='true' class='blankslate blankslate-narrow blankslate-spacious'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon mb-3'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='h2 mb-1'>Welcome to the mona wiki!</h2> <div data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</div> </div>" />
+<Example src=" <div data-view-component='true' class='blankslate blankslate-narrow blankslate-spacious'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='blankslate-heading'>Welcome to the mona wiki!</h2> <p data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</p></div>" />
```erb
<%= render Primer::Beta::Blankslate.new(
@@ -226,7 +226,7 @@ There are a few variations of how the Blankslate appears: `narrow` adds a maximu
It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.
-<Example src="<div class='Box'> <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon mb-3'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='h2 mb-1'>Welcome to the mona wiki!</h2> <div data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</div> </div></div>" />
+<Example src="<div class='Box'> <div data-view-component='true' class='blankslate'> <svg aria-hidden='true' height='24' viewBox='0 0 24 24' version='1.1' width='24' data-view-component='true' class='octicon octicon-book blankslate-icon'> <path fill-rule='evenodd' d='M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.496 4.496 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.75.75 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a3 3 0 00-2.121-.879H.75a.75.75 0 01-.75-.75v-15zm11.247 3.747a3 3 0 00-3-2.997H1.5V18h6.947a4.5 4.5 0 012.803.98l-.003-11.483zm1.503 11.485V7.5a3 3 0 013-3h6.75v13.558l-6.927-.047a4.5 4.5 0 00-2.823.971z'></path></svg> <h2 data-view-component='true' class='blankslate-heading'>Welcome to the mona wiki!</h2> <p data-view-component='true'>Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.</p></div></div>" />
```erb
<%= render Primer::Beta::Blankslate.new(border: true) do |c| %>

MODIFY
static/classes.yml
static/classes.yml
- ".avatar-more"
- ".avatar-small"
- ".blankslate"
+- ".blankslate-action"
+- ".blankslate-heading"
- ".blankslate-icon"
+- ".blankslate-image"
- ".blankslate-narrow"
- ".blankslate-spacious"
- ".border"
- ".form-control"
- ".gutter-condensed"
- ".gutter-lg"
-- ".h2"
- ".hidden-text-expander"
- ".inline"
- ".left-0"
- ".list-style-none"
- ".markdown-body"
- ".mb-0"
-- ".mb-1"
- ".mb-2"
-- ".mb-3"
- ".menu"
- ".menu-heading"
- ".menu-item"
- ".mr-2"
- ".mr-n1"
- ".mt-2"
-- ".mt-3"
- ".mt-5"
- ".mx-auto"
- ".no-underline"

MODIFY
test/components/beta/blankslate_test.rb
test/components/beta/blankslate_test.rb
@@ -11,7 +11,7 @@ class PrimerBetaBlankslateTest < Minitest::Test
end
assert_selector("div.blankslate")
- assert_selector("h3.h2", text: "Title")
+ assert_selector("h3.blankslate-heading", text: "Title")
refute_selector(".blankslate-narrow")
refute_selector(".blankslate-spacious")
end

Remove CSS utilities from Blankslate (#1000)

* Remove CSS utilities from Blankslate

Also change the HTML structure and tweak styles to better match
Primer CSS.
This is part of the effort to remove all usages of utility classes to
improve consistency and prevent specificity bugs.