fix(dropdown): added missing props to control the value Tag(s)

These include the StyledValueItemTagContainer, props object, ref, and adding the base ValueItemTag along to the exported Dropdown module
Headstorm · Apr 6, 2022 · 7f5e053 · 7f5e053
1 parent f7d5309
commit 7f5e053
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 22 deletions.
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -190,7 +190,7 @@ const PlaceholderContainer = styled(Div)`
   opacity: 0.8;
 `;
 
-const StyledTagContainer = styled(Tag.Container)`
+const ValueItemTagContainer = styled(Tag.Container)`
   ${({
     dropdownVariant,
     tagVariant,
@@ -225,6 +225,7 @@ export interface DropdownProps {
   StyledContainer?: StyledSubcomponentType;
   StyledValueContainer?: StyledSubcomponentType;
   StyledValueItem?: StyledSubcomponentType;
+  StyledValueItemTagContainer?: StyledSubcomponentType;
   StyledOptionsContainer?: StyledSubcomponentType;
   StyledHiddenOptionsContainer?: StyledSubcomponentType;
   StyledOptionItem?: StyledSubcomponentType;
@@ -236,20 +237,21 @@ export interface DropdownProps {
   containerProps?: SubcomponentPropsType;
   valueContainerProps?: SubcomponentPropsType;
   valueItemProps?: SubcomponentPropsType;
+  valueItemTagProps?: TagProps;
   optionsContainerProps?: SubcomponentPropsType;
   optionItemProps?: SubcomponentPropsType;
   checkContainerProps?: SubcomponentPropsType;
   placeholderProps?: SubcomponentPropsType;
   closeIconProps?: SubcomponentPropsType;
   arrowIconProps?: SubcomponentPropsType;
-  valueItemTagProps?: TagProps;
 
   containerRef?: React.RefObject<HTMLElement>;
   optionsContainerRef?: React.RefObject<HTMLElement>;
   hiddenOptionsContainerRef?: React.RefObject<HTMLElement>;
   optionItemRef?: React.RefObject<HTMLElement>;
   valueContainerRef?: React.RefObject<HTMLButtonElement>;
   valueItemRef?: React.RefObject<HTMLElement>;
+  valueItemTagRef?: React.RefObject<HTMLElement>;
   checkContainerRef?: React.RefObject<HTMLElement>;
   placeholderRef?: React.RefObject<HTMLElement>;
   closeIconRef?: React.RefObject<HTMLElement>;
@@ -295,6 +297,7 @@ const Dropdown = ({
   StyledContainer = Container,
   StyledValueContainer = ValueContainer,
   StyledValueItem = ValueItem,
+  StyledValueItemTagContainer = ValueItemTagContainer,
   StyledOptionsContainer = OptionsContainer,
   StyledHiddenOptionsContainer = HiddenOptionsContainer,
   StyledOptionItem = OptionItem,
@@ -320,6 +323,7 @@ const Dropdown = ({
   optionItemRef,
   valueContainerRef,
   valueItemRef,
+  valueItemTagRef,
   checkContainerRef,
   placeholderRef,
   closeIconRef,
@@ -408,8 +412,6 @@ const Dropdown = ({
     ...placeholderProps,
   };
 
-  const tagContainerItemProps = valueItemTagProps.containerProps || {};
-
   // effect to determine if user is scrolling up or down
   useEffect(() => {
     if (isOpen && shouldStayInView) {
@@ -874,15 +876,15 @@ const Dropdown = ({
             .map((val, i, arr) =>
               optionsHash[val] !== undefined ? (
                 <Tag
-                  StyledContainer={StyledTagContainer}
+                  StyledContainer={StyledValueItemTagContainer}
                   variant={valueVariant}
+                  containerRef={valueItemTagRef}
                   {...valueItemTagProps}
                   containerProps={{
                     dropdownVariant: variant,
                     tagVariant: valueVariant,
                     dropdownColor: defaultedColor,
                     transparentColor: colors.transparent,
-                    ...tagContainerItemProps,
                   }}
                   key={val}
                 >
@@ -1001,6 +1003,7 @@ Dropdown.HiddenOptionsContainer = HiddenOptionsContainer;
 Dropdown.OptionItem = OptionItem;
 Dropdown.ValueContainer = ValueContainer;
 Dropdown.ValueItem = ValueItem;
+Dropdown.ValueItemTagContainer = ValueItemTagContainer;
 Dropdown.Placeholder = PlaceholderContainer;
 
 export default Dropdown;
diff --git a/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap b/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap
@@ -3,8 +3,7 @@
 exports[`Label should have asterisk icon if isRequired is true 1`] = `
 Object {
   "asFragment": [Function],
-  "baseElement": <body>
-    .c0 {
+  "baseElement": .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -22,7 +21,8 @@ Object {
   margin-left: 0.25em;
 }
 
-<div>
+<body>
+    <div>
       <div
         class=" "
       >
@@ -56,15 +56,33 @@ Object {
       </div>
     </div>
   </body>,
-  "container": <div>
+  "container": .c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  color: #9FA2A5;
+  margin-bottom: .25em;
+  font-size: .75em;
+}
+
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin-left: 0.25em;
+}
+
+<div>
     <div
-      class="sc-bdnxRM sc-gtsrHT  kHfwcl sc-iwajpm"
+      class=" "
     >
       <div
-        class="sc-bdnxRM sc-gtsrHT  kHfwcl sc-bCwfaz"
+        class=" "
       >
         <label
-          class="sc-fujyAs sc-pNWdM  gA-dQZb sc-fKgJPI KHjYR"
+          class=" c0"
           color="#9FA2A5"
           for="default"
           id="label"
@@ -73,7 +91,7 @@ Object {
         </label>
         <span
           aria-hidden="true"
-          class="sc-dlnjwi sc-hKFxyN  drTWVl sc-cxNHIi fDVdMr"
+          class=" c1"
         >
           <svg
             role="presentation"
@@ -199,15 +217,33 @@ Object {
       </div>
     </div>
   </body>,
-  "container": <div>
+  "container": .c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  color: #FF4500;
+  margin-bottom: .25em;
+  font-size: .75em;
+}
+
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin-left: 0.25em;
+}
+
+<div>
     <div
-      class="sc-bdnxRM sc-gtsrHT  kHfwcl sc-iwajpm"
+      class=" "
     >
       <div
-        class="sc-bdnxRM sc-gtsrHT  kHfwcl sc-bCwfaz"
+        class=" "
       >
         <label
-          class="sc-fujyAs sc-pNWdM  gA-dQZb sc-fKgJPI cPoeDw"
+          class=" c0"
           color="#FF4500"
           for="default"
           id="label"
@@ -216,7 +252,7 @@ Object {
         </label>
         <span
           aria-hidden="true"
-          class="sc-dlnjwi sc-hKFxyN  drTWVl sc-cxNHIi fDVdMr"
+          class=" c1"
         >
           <svg
             role="presentation"

diff --git a/src/components/Spotlight/__tests__/__snapshots__/Spotlight.test.tsx.snap b/src/components/Spotlight/__tests__/__snapshots__/Spotlight.test.tsx.snap
@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spotlight Should match previous snapshot with a targetElement 1`] = `
-<body>
-  .c9 {
+.c9 {
   opacity: 0;
   background: linear-gradient( 90deg, rgba(0,0,0,0.75), rgba(0,0,0,0.25), rgba(0,0,0,0.75) ) repeat;
   color: transparent;
@@ -126,7 +125,8 @@ exports[`Spotlight Should match previous snapshot with a targetElement 1`] = `
   max-width: 50vw;
 }
 
-<div>
+<body>
+  <div>
     <div
       class=" c0"
       globalstyles="