Skip to content

Commit

Permalink
chore(lookups): Use new combobox component (#3081)
Browse files Browse the repository at this point in the history 
* chore(lookups): Use new combobox component

* chore(lookups): Use new combobox component

* Fix id and restriction rules

* Update aria-activedescendant

* Update restriction rules
  • Loading branch information
@brandonferrua
brandonferrua authored Mar 22, 2018
1 parent c55fb4c commit 2dbe619
Show file tree
Hide file tree
Showing 7 changed files with 553 additions and 440 deletions.
12 changes: 3 additions & 9 deletions ui/components/combobox/base/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,10 +405,8 @@
/**
* @summary Container for a combobox group
*
* @name combobox-group
* @selector .slds-combobox-group
* @restrict div
* @variant
*/
.slds-combobox-group {
display: flex;
Expand Down Expand Up @@ -466,8 +464,7 @@
/**
* @summary The container of pill selections found inside of a combobox group
* @selector .slds-listbox_selection-group
* @restrict .slds-listbox
* @modifier
* @restrict .slds-combobox-group ~ div
*/
.slds-listbox_selection-group {
padding: 0;
Expand All @@ -479,7 +476,6 @@
* @summary Expanded state of a selection group
* @selector .slds-is-expanded
* @restrict .slds-listbox_selection-group
* @modifier
*/
&.slds-is-expanded {
height: auto;
Expand Down Expand Up @@ -509,9 +505,8 @@

/**
* @summary The first combobox in the combobox group
* @selector .sldss-combobox-addon_start
* @selector .slds-combobox-addon_start
* @restrict .slds-combobox-group div
* @modifier
*/
.slds-combobox-addon_start .slds-combobox__input {
border-top-right-radius: 0;
Expand All @@ -522,9 +517,8 @@

/**
* @summary The last combobox in the combobox group
* @selector .sldss-combobox-addon_end
* @selector .slds-combobox-addon_end
* @restrict .slds-combobox-group div
* @modifier
*/
.slds-combobox-addon_end .slds-combobox__input {
border-top-right-radius: 4px;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/lookups/_doc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
*
* @base
* @name lookups
* @selector .slds-combobox-lookup
* @selector .slds-combobox, .slds-combobox-group
* @support dev-ready
* @category experience
* @type user-input
Expand Down
224 changes: 224 additions & 0 deletions ui/components/lookups/base/_deprecate.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@include deprecate('4.0.0', '.slds-lookup has been replaced with .slds-combobox and .slds-combobox-group') {

.slds-lookup {
position: relative;
width: 100%; // Fill up parent container

/**
* Initializes lookup results list
*
* @selector .slds-lookup__list
* @restrict .slds-lookup ul
*/
&__list {
// crazy calc - line height of primary text + line height of meta text - the offset to bring the meta up a bit + the top/bottom padding multipied by how many items I want to show
max-height: calc((((#{$line-height-text} * #{$font-size-medium}) + (#{$line-height-text} * #{$font-size-small}) - #{$spacing-xx-small}) + (#{$spacing-xx-small} * 2)) * 8);
overflow-y: auto;
}

/**
* Initializes lookup results list container
*
* @selector .slds-lookup__menu
* @restrict .slds-lookup div
* @notes Applies positioning and container styles
* @required
*/
&__menu {
background: $color-background-alt;
border: $border-width-thin solid $color-border;
border-radius: $border-radius-medium;
z-index: $z-index-dropdown;
position: absolute;
width: 100%;
padding: $spacing-x-small 0;
display: none;
}

&__item {

> a,
> span,
> button {
display: block;
padding: $spacing-x-small;
color: $color-text-default;
text-align: left;
width: 100%;
line-height: $line-height-text;
border-radius: 0;

&:hover,
&:focus {
outline: 0;
background-color: $color-background-row-hover;
color: $color-text-default;
text-decoration: none;
}

.slds-icon {
margin-right: $spacing-x-small;
}
}
}

/**
* Non-actionable label inside of a lookup item
*
* @selector .slds-lookup__item_label
* @restrict .slds-lookup h3
*/
&__item_label,
&__item--label {
display: flex;
align-items: center;
padding: $spacing-x-small $spacing-medium;
}

/**
* Actionable element inside of a lookup item
*
* @selector .slds-lookup__item-action
* @restrict .slds-lookup a, .slds-lookup button, .slds-lookup span
*/
&__item-action {
font-size: $font-size-medium;
display: flex;
align-items: center;
padding: $spacing-xx-small $spacing-medium;
color: $color-text-default;
text-align: left;
width: 100%;
line-height: $line-height-text;
border-radius: 0;

/**
* Hover/focus state for actionable lookup item
*
* @selector .slds-has-focus
* @restrict .slds-lookup__item-action
* @modifier
*/
&:hover,
&:focus,
&.slds-has-focus {
outline: 0;
cursor: pointer;
background-color: $color-background-row-hover;
color: $color-text-default;
text-decoration: none;
}

// Icon in results, here so it doesn't need to be repeated in DOM
.slds-media__figure {
margin-right: $spacing-x-small;
margin-top: $spacing-xx-small;
}
}

/**
* Actionable element inside of a lookup item that's output is single line text
*
* @selector .slds-lookup__item-action_label
* @restrict .slds-lookup__item-action
*/
&__item-action_label,
&__item-action--label {
padding: $spacing-x-small $spacing-medium;

> .slds-icon {
margin-left: $spacing-xx-small;
margin-right: $spacing-small;
}
}

/**
* Search input inside of lookup
*
* @selector .slds-lookup__search-input
* @restrict .slds-lookup input
*/
&__search-input {
width: 100%;
}

/**
* Primary entity name within lookup item
*
* @selector .slds-lookup__result-text
* @restrict .slds-lookup__item-action span
*/
&__result-text {
@include truncate; // truncate mixin used so class wouldn't need to be repeated in DOM
display: block;
margin-bottom: $spacing-xxx-small;
}

/**
* Secondary info of primary entity name within lookup item
*
* @selector .slds-lookup__result-meta
* @restrict .slds-lookup__item-action span
*/
&__result-meta {
display: block;
margin-top: ($spacing-xx-small * -1); // Offset $line-height-text from result-text
color: $color-text-label;
}

&__pill-container {
padding: 0 $spacing-x-small $spacing-xx-small; // center aligns pills within selection area due to top padding on menu
}

// Typeahead bizness
mark {
font-weight: $font-weight-bold;
background-color: transparent;
color: inherit;
}

/**
* Deal with Lookup when user activates the lookup
*
* @selector .slds-is-open
* @restrict .slds-lookup
* @modifier
*/
&.slds-is-open {

// Show and remove border and border radius
.slds-lookup__menu {
display: block;
}
}

/**
* Deal with lookup if selection has been made
*
* @selector .slds-has-selection
* @restrict .slds-lookup
*/
&.slds-has-selection {

// If developer needs to keep the input in the DOM and not able to remove it
.slds-input,
.slds-input__icon,
.slds-lookup__search-input {
display: none;
}

// Stretch pill 100% of container
.slds-pill {
display: flex;
}

// Send close button to the end of the pill
.slds-pill__remove {
margin-left: auto;
}
}
}
}
Loading

0 comments on commit 2dbe619

Please sign in to comment.