fix(css): Update pill components in modals (#1745)

Stephanie A. Higa · web-flow · commit 25fd95a46332 · 2019-11-20T17:25:35.000-08:00
diff --git a/examples/src/ContentExplorerMultiSelectExamples.scss b/examples/src/ContentExplorerMultiSelectExamples.scss
@@ -3,7 +3,7 @@
         top: 7px;
     }
 
-    .pill-selector-wrapper div.pill-selector-input-wrapper {
+    .bdl-PillSelectorDropdown div.bdl-PillSelector {
         width: 160px;
     }
 }
diff --git a/examples/src/ContentExplorerMultiSelectModalContainerExamples.scss b/examples/src/ContentExplorerMultiSelectModalContainerExamples.scss
@@ -3,7 +3,7 @@
         top: 7px;
     }
 
-    .pill-selector-wrapper div.pill-selector-input-wrapper {
+    .bdl-PillSelectorDropdown div.bdl-PillSelector {
         width: 160px;
     }
 }
diff --git a/examples/styles/PillSelectorExamples.scss b/examples/styles/PillSelectorExamples.scss
@@ -1,5 +1,5 @@
-.pill-selector-wrapper {
-    div.pill-selector-input-wrapper {
+.bdl-PillSelectorDropdown {
+    div.bdl-PillSelector {
         width: 360px;
     }
 
@@ -8,7 +8,7 @@
     }
 }
 
-.pill.pill-cloud-button.is-selected {
-    background-color: #0061d5;
+.bdl-Pill.bdl-PillCloud-button.is-selected {
     color: #fff;
+    background-color: #0061d5;
 }
diff --git a/scripts/utils/bdlClassnameManager b/scripts/utils/bdlClassnameManager
@@ -37,11 +37,11 @@ const conversionMap = {
     'pill-cloud-button': 'bdl-PillCloud-button',
     'pill-cloud-container': 'bdl-PillCloud',
     'pill-error': 'bdl-Pill--error',
-    'pill-selector-dropdown': 'bdl-PillSelectorDropdown',
     'pill-selector-hidden-input': 'bdl-PillSelector-input--hidden',
     'pill-selector-input': 'bdl-PillSelector-input',
     'pill-selector-input-wrapper': 'bdl-PillSelector',
     'pill-selector-suggestions-enabled': 'bdl-PillSelector--suggestionsEnabled',
+    'pill-selector-wrapper': 'bdl-PillSelectorDropdown',
     'pill-text': 'bdl-Pill-text',
     'pill-warning': 'bdl-Pill-warning',
     'pills-list': 'bdl-PillsList',
diff --git a/src/elements/content-sidebar/activity-feed/task-form/TaskForm.scss b/src/elements/content-sidebar/activity-feed/task-form/TaskForm.scss
@@ -50,15 +50,15 @@ $assignee-dropdown-height: 215px;
             margin-bottom: 15px;
         }
 
-        input.pill-selector-hidden-input {
+        input.bdl-PillSelector-input--hidden {
             width: 1px;
         }
 
-        .pill-selector-wrapper {
+        .bdl-PillSelectorDropdown {
             width: 100%;
             margin-left: 0;
 
-            .pill-selector-input-wrapper {
+            .bdl-PillSelector {
                 width: auto;
             }
 
diff --git a/src/elements/content-sidebar/skills/keywords/EditableKeywords.js b/src/elements/content-sidebar/skills/keywords/EditableKeywords.js
@@ -154,7 +154,7 @@ class EditableKeywords extends React.PureComponent<Props, State> {
         const { onSave, onCancel }: Props = this.props;
         const { pills, keyword }: State = this.state;
         return (
-            <span className="pill-selector-wrapper">
+            <span className="bdl-EditableKeywords">
                 <PillSelector
                     onBlur={this.onBlur}
                     onCompositionEnd={this.onCompositionEnd}
diff --git a/src/elements/content-sidebar/skills/keywords/EditableKeywords.scss b/src/elements/content-sidebar/skills/keywords/EditableKeywords.scss
@@ -10,14 +10,14 @@
         }
     }
 
-    .pill-selector-wrapper {
+    .bdl-EditableKeywords {
         margin: 0;
 
-        .pill-selector-input-wrapper {
+        .bdl-PillSelector {
             width: 100%;
             margin: 0;
 
-            input[type='text'].pill-selector-input {
+            input[type='text'].bdl-PillSelector-input {
                 min-width: 97%;
                 height: 24px;
                 margin: 2px 0 0 2px;
diff --git a/src/elements/content-sidebar/skills/keywords/__tests__/__snapshots__/EditableKeywords.test.js.snap b/src/elements/content-sidebar/skills/keywords/__tests__/__snapshots__/EditableKeywords.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`elements/content-sidebar/Skills/Keywords/EditableKeywords should correctly render 1`] = `
 <span
-  className="pill-selector-wrapper"
+  className="bdl-EditableKeywords"
 >
   <PillSelector
     allowInvalidPills={false}
diff --git a/src/features/invite-collaborators-modal/InviteCollaboratorsModal.scss b/src/features/invite-collaborators-modal/InviteCollaboratorsModal.scss
@@ -47,7 +47,7 @@
             overflow: auto;
         }
 
-        .pill-selector-input-wrapper {
+        .bdl-PillSelector {
             width: 100%;
             height: 60px;
         }
diff --git a/src/features/shared-link-modal/EmailSharedLink.scss b/src/features/shared-link-modal/EmailSharedLink.scss
@@ -1,5 +1,5 @@
 .email-shared-link {
-    .pill-selector-wrapper {
+    .bdl-PillSelectorDropdown {
         margin: 0;
     }
 
@@ -14,21 +14,21 @@
         transition: height .2s;
     }
 
-    .pill-selector-input-wrapper,
+    .bdl-PillSelector,
     textarea {
         width: 100%;
     }
 
     &.is-expanded {
-        .pill-selector-wrapper {
+        .bdl-PillSelectorDropdown {
             margin-bottom: 20px;
         }
 
         .text-area-container {
             height: 100px;
         }
 
-        .pill-selector-input-wrapper {
+        .bdl-PillSelector {
             height: 58px;
         }
     }
diff --git a/src/features/unified-share-modal/UnifiedShareModal.js b/src/features/unified-share-modal/UnifiedShareModal.js
@@ -692,7 +692,7 @@ class UnifiedShareModal extends React.Component<Props, State> {
         // focus logic at modal level
         const extendedModalProps = {
             focusElementSelector: canInvite
-                ? '.pill-selector-input' // focus on invite collabs field
+                ? '.bdl-PillSelector-input' // focus on invite collabs field
                 : '.toggle-simple', // focus on shared link toggle
             ...modalProps,
         };
diff --git a/src/features/unified-share-modal/UnifiedShareModal.scss b/src/features/unified-share-modal/UnifiedShareModal.scss
@@ -91,17 +91,17 @@
         margin-bottom: 20px;
     }
 
-    .pill-selector-wrapper .pill-selector-input-wrapper, // need both selectors for specificity
+    .bdl-PillSelectorDropdown .bdl-PillSelector, // need both selectors for specificity
     textarea {
         /* override for DOM element in `TextArea` which provides no id/class for targeting */
         width: 100%;
     }
 
-    .pill-selector-wrapper {
+    .bdl-PillSelectorDropdown {
         margin-bottom: 10px;
     }
 
-    .pill-selector-wrapper.scrollable {
+    .bdl-PillSelectorDropdown.scrollable {
         .overlay-wrapper {
             position: absolute;
             height: 280px;
@@ -124,16 +124,16 @@
             color: $bdl-gray-50;
         }
 
-        .pill-selector-input-wrapper {
+        .bdl-PillSelector {
             min-height: 68px;
         }
     }
 
-    .pill-selector-input-wrapper {
+    .bdl-PillSelector {
         margin-top: 10px;
         border: 1px solid $bdl-gray-20;
 
-        .pill-selector-input::placeholder {
+        .bdl-PillSelector-input::placeholder {
             color: $bdl-gray-50;
         }
 
@@ -142,7 +142,7 @@
             background-color: $bdl-gray-02;
             box-shadow: none;
 
-            .pill-selector-input::placeholder {
+            .bdl-PillSelector-input::placeholder {
                 color: $bdl-gray-50;
             }
 
diff --git a/src/features/unified-share-modal/__tests__/__snapshots__/UnifiedShareModal.test.js.snap b/src/features/unified-share-modal/__tests__/__snapshots__/UnifiedShareModal.test.js.snap
@@ -1707,7 +1707,7 @@ exports[`features/unified-share-modal/UnifiedShareModal render() should render a
 <div>
   <Modal
     className="unified-share-modal"
-    focusElementSelector=".pill-selector-input"
+    focusElementSelector=".bdl-PillSelector-input"
     style={
       Object {
         "backdrop": Object {},
@@ -1893,7 +1893,7 @@ exports[`features/unified-share-modal/UnifiedShareModal render() should render a
 <div>
   <Modal
     className="unified-share-modal"
-    focusElementSelector=".pill-selector-input"
+    focusElementSelector=".bdl-PillSelector-input"
     style={
       Object {
         "backdrop": Object {},
@@ -2681,7 +2681,7 @@ exports[`features/unified-share-modal/UnifiedShareModal render() should render a
 <div>
   <Modal
     className="unified-share-modal"
-    focusElementSelector=".pill-selector-input"
+    focusElementSelector=".bdl-PillSelector-input"
     style={
       Object {
         "backdrop": Object {},
@@ -2865,7 +2865,7 @@ exports[`features/unified-share-modal/UnifiedShareModal render() should render a
 <div>
   <Modal
     className="unified-share-modal"
-    focusElementSelector=".pill-selector-input"
+    focusElementSelector=".bdl-PillSelector-input"
     style={
       Object {
         "backdrop": Object {},
@@ -3024,7 +3024,7 @@ exports[`features/unified-share-modal/UnifiedShareModal render() should render a
 <div>
   <Modal
     className="unified-share-modal"
-    focusElementSelector=".pill-selector-input"
+    focusElementSelector=".bdl-PillSelector-input"
     style={
       Object {
         "backdrop": Object {},

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`top: 7px;`
`4`	`4`	`}`
`5`	`5`
`6`		`- .pill-selector-wrapper div.pill-selector-input-wrapper {`
	`6`	`+ .bdl-PillSelectorDropdown div.bdl-PillSelector {`
`7`	`7`	`width: 160px;`
`8`	`8`	`}`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-.pill-selector-wrapper {`
`2`		`- div.pill-selector-input-wrapper {`
	`1`	`+.bdl-PillSelectorDropdown {`
	`2`	`+ div.bdl-PillSelector {`
`3`	`3`	`width: 360px;`
`4`	`4`	`}`
`5`	`5`
`@@ -8,7 +8,7 @@`
`8`	`8`	`}`
`9`	`9`	`}`
`10`	`10`
`11`		`-.pill.pill-cloud-button.is-selected {`
`12`		`- background-color: #0061d5;`
	`11`	`+.bdl-Pill.bdl-PillCloud-button.is-selected {`
`13`	`12`	`color: #fff;`
	`13`	`+ background-color: #0061d5;`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,15 +50,15 @@ $assignee-dropdown-height: 215px;`
`50`	`50`	`margin-bottom: 15px;`
`51`	`51`	`}`
`52`	`52`
`53`		`- input.pill-selector-hidden-input {`
	`53`	`+ input.bdl-PillSelector-input--hidden {`
`54`	`54`	`width: 1px;`
`55`	`55`	`}`
`56`	`56`
`57`		`- .pill-selector-wrapper {`
	`57`	`+ .bdl-PillSelectorDropdown {`
`58`	`58`	`width: 100%;`
`59`	`59`	`margin-left: 0;`
`60`	`60`
`61`		`- .pill-selector-input-wrapper {`
	`61`	`+ .bdl-PillSelector {`
`62`	`62`	`width: auto;`
`63`	`63`	`}`
`64`	`64`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	exports[`elements/content-sidebar/Skills/Keywords/EditableKeywords should correctly render 1`] = `
`4`	`4`	`<span`
`5`		`- className="pill-selector-wrapper"`
	`5`	`+ className="bdl-EditableKeywords"`
`6`	`6`	`>`
`7`	`7`	`<PillSelector`
`8`	`8`	`allowInvalidPills={false}`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@`
`47`	`47`	`overflow: auto;`
`48`	`48`	`}`
`49`	`49`
`50`		`- .pill-selector-input-wrapper {`
	`50`	`+ .bdl-PillSelector {`
`51`	`51`	`width: 100%;`
`52`	`52`	`height: 60px;`
`53`	`53`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.email-shared-link {`
`2`		`- .pill-selector-wrapper {`
	`2`	`+ .bdl-PillSelectorDropdown {`
`3`	`3`	`margin: 0;`
`4`	`4`	`}`
`5`	`5`
`@@ -14,21 +14,21 @@`
`14`	`14`	`transition: height .2s;`
`15`	`15`	`}`
`16`	`16`
`17`		`- .pill-selector-input-wrapper,`
	`17`	`+ .bdl-PillSelector,`
`18`	`18`	`textarea {`
`19`	`19`	`width: 100%;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`&.is-expanded {`
`23`		`- .pill-selector-wrapper {`
	`23`	`+ .bdl-PillSelectorDropdown {`
`24`	`24`	`margin-bottom: 20px;`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.text-area-container {`
`28`	`28`	`height: 100px;`
`29`	`29`	`}`
`30`	`30`
`31`		`- .pill-selector-input-wrapper {`
	`31`	`+ .bdl-PillSelector {`
`32`	`32`	`height: 58px;`
`33`	`33`	`}`
`34`	`34`	`}`