feat(GlSorting): add CSS class related props
What does this MR do?
Adds dropdownClass
, dropdownToggleClass
and sortDirectionToggleClass
props to GlSorting
to allow for more customization. More specifically dropdownClass
prop will allow me to make GlSorting
span 100% on mobile. I added dropdownToggleClass
and sortDirectionToggleClass
because I thought they may be useful for other customizations in the future.
Without the ability to use these props
With the ability to use these props
<gl-sorting
class="gl-display-flex"
dropdown-class="gl-w-100"
:text="activeOptionLabel"
:is-ascending="isAscending"
:sort-direction-tool-tip="__('Sort direction')"
@sortDirectionChange="handleSortDirectionChange"
>
<gl-sorting-item
v-for="option in filteredOptions"
:key="option.key"
:href="option.href"
:active="isActive(option.key)"
>
{{ option.label }}
</gl-sorting-item>
</gl-sorting>
Added prop knobs
Integration MR
The integration MR was failing due to an unrelated MR that was merged a few days ago. I have fixed the specs in it so once this is merged we should be able to update the @gitlab/ui
dependency in package.json
and merge gitlab!49414 (merged).
Does this MR meet the acceptance criteria?
Conformity
-
Code review guidelines. -
GitLab UI's contributing guidlines. - [-] If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
- [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
-
If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui
package can be upgraded quickly after the changes are released:-
GitLab: gitlab!49414 (merged) -
CustomersDot: GlSorting
not used -
Status Page: GlSorting
not used
-
-
Added the ~"component:*"
label(s) if applicable.
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
- [-] Label as security and @ mention
@gitlab-com/gl-security/appsec
- [-] Security reports checked/validated by a reviewer from the AppSec team