Update keyboard shortcuts menu button & dialog icon to a new 'keyboard' icon

[rohitsrma]

Fixes #11767

After :

[squash-labs]

Manage this branch in Squash

Test this branch here: https://rohitsrmaadd-keyboard-icon-ypkie.squash.io

[lb-]

I think another step is still needed.

Go to the styleguide and copy the Wagtail icons table according to instructions in the template, pasting the result in wagtail_icons_table.txt.

https://docs.wagtail.org/en/stable/contributing/ui_guidelines.html#adding-icons

The rest of the code looks good, thank you. I'll do a proper review with the code checked out locally soon.

[rohitsrma]

Done!

[lb-]

Looking good thank you!

Thanks for the screenshots also, I have done a few small fixes (as per comments) & will push, check the docs and merge.

Really appreciate this.

[lb-]

Suggested change

	<td><code>wagtailadmin/icons/keyboard.svg</code></td> </tr>
	<td><code>wagtailadmin/icons/keyboard.svg</code></td>
	</tr>

[lb-]

Suggested change

<svg id="icon-keyboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! keyboard (solid): Font Awesome Pro 6.4.0 --><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z"/></svg>

<svg id="icon-keyboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><!--! keyboard (solid): Font Awesome Free 6.5.1--><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z"/></svg>

Just a note, we should clean up the viewbox as per the docs and this icon is not from the Pro font set but the free one.

[lb-]

ignore this, I had it wrong. Looks like the viewbox was needed as is sorry.

[lb-]

@rohitsrma could you get the browser script working for you?

wagtail/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

Line 507 in 24f5a4a

<!-- In DevTools: copy($$('[data-icons-table^="wagtailadmin"]')[0].innerHTML.replace(/\s+/g, ' ').replace(/<t/g, '\n<t')) -->

When I ran that I did not get the actual SVG content, only the svg use references.

I tried Firefox & Chrome, e.g.

<tr> 
<td><svg class="icon icon-keyboard w-w-8 w-h-8" aria-hidden="true"><use href="#icon-keyboard"></use></svg></td> 
<td><code>keyboard</code></td> 
<td> keyboard (solid): Font Awesome Free 6.5.1</td> 
<td><code>wagtailadmin/icons/keyboard.svg</code></td> </tr> 

Observe the use href= is there but not the actual SVG content.

[lb-]

Docs are working now (from when I broke it in the last push)

[lb-]

CI issues are not related this PR, merging as it all ran fine just before.

[rohitsrma]

@rohitsrma could you get the browser script working for you?

wagtail/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

Line 507 in 24f5a4a

<!-- In DevTools: copy($$('[data-icons-table^="wagtailadmin"]')[0].innerHTML.replace(/\s+/g, ' ').replace(/<t/g, '\n<t')) -->

When I ran that I did not get the actual SVG content, only the svg use references.

I tried Firefox & Chrome, e.g.

<tr> 
<td><svg class="icon icon-keyboard w-w-8 w-h-8" aria-hidden="true"><use href="#icon-keyboard"></use></svg></td> 
<td><code>keyboard</code></td> 
<td> keyboard (solid): Font Awesome Free 6.5.1</td> 
<td><code>wagtailadmin/icons/keyboard.svg</code></td> </tr> 

Observe the use href= is there but not the actual SVG content.

Thanks @lb- , Should I check this, or is it all sorted?.

[rohitsrma]

@lb- Yes i am also getting similar results for all icons.

<tr> 
<td><svg class="icon icon-folder-inverse w-w-8 w-h-8" aria-hidden="true"><use href="#icon-folder-inverse"></use></svg></td> 
<td><code>folder-inverse</code></td> 
<td> folder (solid): Font Awesome Pro 6.4.0 </td> 
<td><code>wagtailadmin/icons/folder-inverse.svg</code></td> </tr> 
<tr> 

[lb-]

Thanks @rohitsrma - I have raised an issue for this #11771

No need to worry about it for now though, it's easy-ish enough to manually get the SVG content.