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/uipackage can be upgraded quickly after the changes are released:-
GitLab: gitlab!49414 (merged) -
CustomersDot: GlSortingnot used -
Status Page: GlSortingnot 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


