Added .button-secondary bicolor button-icon in styleguide and pattern library

- relates to #9198
- does not add any new styling for these types of button but instead
pull/9221/head
Adinapunyo Banerjee 2022-09-21 22:44:18 +05:30 zatwierdzone przez LB (Ben Johnston)
rodzic 61a5e197cd
commit f5200dab64
5 zmienionych plików z 84 dodań i 0 usunięć

Wyświetl plik

@ -35,6 +35,7 @@ Changelog
* Adopt `wagtail.admin.views.generic.CreateView` for the User creation view (Mehrdad Moradizadeh)
* Adopt `wagtail.admin.views.generic.DeleteView` for the User delete view (Mehrdad Moradizadeh)
* Adopt `wagtail.admin.views.generic.EditView` for the User edit view (Mehrdad Moradizadeh)
* Add `button-secondary bicolor` variants to the pattern library and styleguide (Adinapunyo Banerjee)
* Fix: Prevent `PageQuerySet.not_public` from returning all pages when no page restrictions exist (Mehrdad Moradizadeh)
* Fix: Ensure that duplicate block ids are unique when duplicating stream blocks in the page editor (Joshua Munn)
* Fix: Revise colour usage so that privacy & locked indicators can be seen in Windows High Contrast mode (LB (Ben Johnston))

Wyświetl plik

@ -627,6 +627,7 @@ Contributors
* Nicholas Johnson
* Shohan Dutta Roy
* Alex (sashashura)
* Adinapunyo Banerjee
Translators

Wyświetl plik

@ -50,6 +50,7 @@ Snippet models that inherit from `DraftStateMixin` can now be assigned go-live a
* Render `help_text` when set on `FieldPanel`, `MultiFieldPanel`, `FieldRowPanel`, and other panel APIs where it previously worked without official support (Matt Westcott)
* Consolidate usage of Excel libraries to a single library `openpyxl`, removing usage of `XlsxWriter`, `tablib`, `xlrd` and `xlwt` (Jaap Roes)
* Adopt generic class based views for the create User create view, User edit view, user delete view and Users index listing / search results (Mehrdad Moradizadeh)
* Add `button-secondary bicolor` variants to the pattern library and styleguide (Adinapunyo Banerjee)
### Bug fixes

Wyświetl plik

@ -104,6 +104,39 @@ const Template = ({ url }) => (
button disabled
</button>
<h4>Bi-color secondary icon buttons with text</h4>
<a href={url} className="button bicolor button--icon button-secondary">
<span className="icon-wrapper">
<svg className="icon icon-plus icon" aria-hidden="true">
<use href="#icon-plus" />
</svg>
</span>
button link
</a>
<button
type="button"
className="button bicolor button--icon button-secondary"
>
<span className="icon-wrapper">
<svg className="icon icon-plus icon" aria-hidden="true">
<use href="#icon-plus" />
</svg>
</span>
button element
</button>
<button
type="button"
className="button bicolor button--icon button-secondary"
disabled
>
<span className="icon-wrapper">
<svg className="icon icon-plus icon" aria-hidden="true">
<use href="#icon-plus" />
</svg>
</span>
button disabled
</button>
<h4>
Bi-color icon buttons with text <small>(small)</small>
</h4>
@ -136,6 +169,44 @@ const Template = ({ url }) => (
button disabled
</button>
<h4>
Bi-color secondary icon buttons with text <small>(small)</small>
</h4>
<a
href={url}
className="button button-small bicolor button--icon button-secondary"
>
<span className="icon-wrapper">
<svg className="icon icon-plus icon" aria-hidden="true">
<use href="#icon-plus" />
</svg>
</span>
button link
</a>
<button
type="button"
className="button button-small bicolor button--icon button-secondary"
>
<span className="icon-wrapper">
<svg className="icon icon-plus icon" aria-hidden="true">
<use href="#icon-plus" />
</svg>
</span>
button element
</button>
<button
type="button"
className="button button-small bicolor button--icon button-secondary"
disabled
>
<span className="icon-wrapper">
<svg className="icon icon-plus icon" aria-hidden="true">
<use href="#icon-plus" />
</svg>
</span>
button disabled
</button>
<h3>Icon buttons without text</h3>
<a href={url} className="button text-replace button--icon">
<svg className="icon icon-cog icon" aria-hidden="true">

Wyświetl plik

@ -244,12 +244,22 @@
<button class="button bicolor button--icon" type="button">{% icon name="plus" wrapped=1 %}button element</button>
<button class="button bicolor button--icon" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>
<h4>Bi-color secondary icon buttons with text</h4>
<a href="#" class="button bicolor button--icon button-secondary">{% icon name="plus" wrapped=1 %}button link</a>
<button class="button bicolor button--icon button-secondary" type="button">{% icon name="plus" wrapped=1 %}button element</button>
<button class="button bicolor button--icon button-secondary" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>
<h4>Bi-color icon buttons with text <small>(small)</small></h4>
<a href="#" class="button button-small bicolor button--icon">{% icon name="plus" wrapped=1 %}button link</a>
<button class="button button-small bicolor button--icon" type="button">{% icon name="plus" wrapped=1 %}button element</button>
<button class="button button-small bicolor button--icon" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>
<h4>Bi-color secondary icon buttons with text <small>(small)</small></h4>
<a href="#" class="button button-small bicolor button--icon button-secondary">{% icon name="plus" wrapped=1 %}button link</a>
<button class="button button-small bicolor button--icon button-secondary" type="button">{% icon name="plus" wrapped=1 %}button element</button>
<button class="button button-small bicolor button--icon button-secondary" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>
<h3>Icon buttons without text</h3>
<a href="#" class="button text-replace button--icon">{% icon name="cog" %}button link</a>