Add .is-disabled state to Dropdown component

[iamtiagogalvao]

This is an improvement.

• Add a disabled state to the .dropdown-item of the dropdown component (As stated in issue Feature request: Add style rules for disabled dropdown links #3682)

Proposed solution

Add a .is-disabled class to the .dropdown-item element

.dropdown-item
  color: $dropdown-item-color
  display: block
  font-size: 0.875rem
  line-height: 1.5
  padding: 0.375rem 1rem
  position: relative
  &.is-disabled
    color: $grey
    cursor: default
    pointer-events: none

Tradeoffs

None

Testing Done

Yes, I created a test environment where I used a Dropdown component and added a .is-disabled class to a .dropdown-item element. The results can be seen in the screenshot and GIF below:

A dropdown with a disabled item:

A GIF Showing the disabled behavior on :hover

Changelog updated?

No.

[jgthms]

Could you use $text-disabled instead?