Skip to content

feat(GlSorting): add CSS class related props

Peter Hegman requested to merge pgh-add-class-related-props-to-gl-sorting into master

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

Screen_Shot_2020-12-07_at_11.25.42_AM

With the ability to use these props

Screen_Shot_2020-12-07_at_11.42.01_AM

<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

Screen_Shot_2020-12-08_at_8.14.09_AM

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:
  • 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
Edited by Peter Hegman

Merge request reports