Merge pull request #58017 from code-dot-org/revert-53f1501

Revert "[DESIGN2-104] Dropdowns - Add thick and thin label type style…
code-dot-org · Apr 15, 2024 · 25d3003 · 25d3003
2 parents f71230d + b7975c6
commit 25d3003
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 265 deletions.
diff --git a/apps/src/componentLibrary/dropdown/_CustomDropdown.tsx b/apps/src/componentLibrary/dropdown/_CustomDropdown.tsx
@@ -32,8 +32,6 @@ export interface CustomDropdownProps {
   /** CustomDropdown label
    * The user-facing label of the dropdown */
   labelText: string;
-  /** CustomDropdown label style type*/
-  labelType?: 'thick' | 'thin';
   /** Does custom dropdown hase a selected value (Renders a checkmark icon in the dropdown button if true) */
   isSomeValueSelected?: boolean;
   /** Custom icon to show for the dropdown button*/
@@ -50,7 +48,6 @@ export interface CustomDropdownProps {
 const CustomDropdown: React.FunctionComponent<CustomDropdownProps> = ({
   name,
   labelText,
-  labelType = 'thick',
   children,
   isSomeValueSelected = false,
   icon,
@@ -136,14 +133,7 @@ const CustomDropdown: React.FunctionComponent<CustomDropdownProps> = ({
             className={icon.className}
           />
         )}
-        <span
-          className={classNames(
-            moduleStyles.dropdownLabel,
-            moduleStyles[`dropdownLabel-${labelType}`]
-          )}
-        >
-          {labelText}
-        </span>
+        <span className={moduleStyles.dropdownLabel}>{labelText}</span>
         <FontAwesomeV6Icon iconStyle="solid" iconName="chevron-down" />
       </button>
       {/** Dropdown menu content is rendered here as children props*/}

diff --git a/apps/src/componentLibrary/dropdown/checkboxDropdown/CHANGELOG.md b/apps/src/componentLibrary/dropdown/checkboxDropdown/CHANGELOG.md
@@ -2,10 +2,6 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.3.0](https://github.com/code-dot-org/code-dot-org/pull/57827)
-* added `thick` and `thin` label style types (`labelType` prop)
-* added black and white background color fill
-
 ## [0.2.0](https://github.com/code-dot-org/code-dot-org/pull/56683)
 * moved `CheckboxDropdown` to -> `dropdown/checkboxDropdown`
 * reworked `CheckboxDropdown` to use `_CustomDropdown` component

diff --git a/apps/src/componentLibrary/dropdown/checkboxDropdown/CheckboxDropdown.story.tsx b/apps/src/componentLibrary/dropdown/checkboxDropdown/CheckboxDropdown.story.tsx
@@ -108,7 +108,18 @@ const MultipleTemplate: StoryFn<{
             componentArg.onClearAll(e);
           };
 
-          return (
+          return componentArg.color === 'white' ? (
+            <div style={{background: 'black', padding: 10}}>
+              <CheckboxDropdown
+                key={`${componentArg.name}`}
+                {...componentArg}
+                checkedOptions={values[componentArg.name]}
+                onChange={onChange}
+                onSelectAll={onSelectAll}
+                onClearAll={onClearAll}
+              />
+            </div>
+          ) : (
             <CheckboxDropdown
               key={`${componentArg.name}`}
               {...componentArg}
@@ -178,42 +189,6 @@ WithDisabledOptionCheckboxDropdown.args = {
   size: 'm',
 };
 
-export const ThickAndThinCheckboxDropdowns = MultipleTemplate.bind({});
-ThickAndThinCheckboxDropdowns.args = {
-  components: [
-    {
-      name: 'thick-dropdown',
-      allOptions: [
-        {value: 'option-1', label: 'Option 1'},
-        {value: 'option-2', label: 'Option 2'},
-      ],
-      checkedOptions: ['option-1'],
-      labelText: 'Thick Dropdown',
-      labelType: 'thick',
-      onChange: args => null,
-      onSelectAll: args => null,
-      onClearAll: args => null,
-      size: 'm',
-      disabled: false,
-    },
-    {
-      name: 'thin-dropdown',
-      allOptions: [
-        {value: 'option-1', label: 'Option 1'},
-        {value: 'option-2', label: 'Option 2'},
-      ],
-      checkedOptions: ['option-1'],
-      labelText: 'Thin Dropdown',
-      labelType: 'thin',
-      onChange: args => null,
-      onSelectAll: args => null,
-      onClearAll: args => null,
-      size: 'm',
-      disabled: false,
-    },
-  ],
-};
-
 export const GroupOfCheckboxDropdownColors = MultipleTemplate.bind({});
 GroupOfCheckboxDropdownColors.args = {
   components: [

diff --git a/apps/src/componentLibrary/dropdown/checkboxDropdown/CheckboxDropdown.tsx b/apps/src/componentLibrary/dropdown/checkboxDropdown/CheckboxDropdown.tsx
@@ -40,8 +40,6 @@ export interface CheckboxDropdownProps {
   /** CheckboxDropdown label
    * The user-facing label of the dropdown */
   labelText: string;
-  /** CheckboxDropdown label style type*/
-  labelType?: 'thick' | 'thin';
   /** CheckboxDropdown options */
   allOptions: CheckboxOption[];
   /** CheckboxDropdown checked options */
@@ -70,7 +68,6 @@ export interface CheckboxDropdownProps {
 const CheckboxDropdown: React.FunctionComponent<CheckboxDropdownProps> = ({
   name,
   labelText,
-  labelType = 'thick',
   allOptions,
   checkedOptions = [],
   onChange,
@@ -84,7 +81,6 @@ const CheckboxDropdown: React.FunctionComponent<CheckboxDropdownProps> = ({
     <CustomDropdown
       name={name}
       labelText={labelText}
-      labelType={labelType}
       color={color}
       disabled={disabled}
       size={size}

diff --git a/apps/src/componentLibrary/dropdown/customDropdown.module.scss b/apps/src/componentLibrary/dropdown/customDropdown.module.scss
@@ -188,7 +188,6 @@
   .dropdownButton {
     color: $light_black;
     border-color: $light_black;
-    background-color: $light_white;
   }
 
   &:has(.dropdownButton:hover) {
@@ -226,7 +225,6 @@
   .dropdownButton {
     color: $light_white;
     border-color: $light_white;
-    background-color: $light_black;
   }
 
   &:has(.dropdownButton:hover) {
@@ -239,6 +237,7 @@
   &:has(.dropdownButton:active) {
     .dropdownButton:not(:disabled) {
       color: $light_white;
+      background-color: unset;
     }
   }
 
@@ -252,13 +251,8 @@
 
 // Sizes
 .dropdownContainer-l {
-  .dropdownLabel-thick {
-    @include button-one-text;
-    margin-bottom: 0;
-  }
-
-  .dropdownLabel-thin {
-    @include body-one;
+  .dropdownLabel {
+    @include label-one;
     margin-bottom: 0;
   }
 
@@ -312,13 +306,8 @@
 }
 
 .dropdownContainer-m {
-  .dropdownLabel-thick {
-    @include button-two-text;
-    margin-bottom: 0;
-  }
-
-  .dropdownLabel-thin {
-    @include body-two;
+  .dropdownLabel {
+    @include label-two;
     margin-bottom: 0;
   }
 
@@ -372,13 +361,8 @@
 }
 
 .dropdownContainer-s {
-  .dropdownLabel-thick {
-    @include button-three-text;
-    margin-bottom: 0;
-  }
-
-  .dropdownLabel-thin {
-    @include body-three;
+  .dropdownLabel {
+    @include label-three;
     margin-bottom: 0;
   }
 
@@ -432,13 +416,8 @@
 }
 
 .dropdownContainer-xs {
-  .dropdownLabel-thick {
-    @include button-four-text;
-    margin-bottom: 0;
-  }
-
-  .dropdownLabel-thin {
-    @include body-four;
+  .dropdownLabel {
+    @include label-four;
     margin-bottom: 0;
   }
 

diff --git a/apps/src/componentLibrary/dropdown/iconDropdown/CHANGELOG.md b/apps/src/componentLibrary/dropdown/iconDropdown/CHANGELOG.md
@@ -2,10 +2,6 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.2.0](https://github.com/code-dot-org/code-dot-org/pull/57827)
-* added `thick` and `thin` label style types (`labelType` prop)
-* added black and white background color fill
-
 ## [0.1.0](https://github.com/code-dot-org/code-dot-org/pull/56683)
 * Created `IconDropdown` component
 * created stories for  `IconDropdown` component

diff --git a/apps/src/componentLibrary/dropdown/iconDropdown/IconDropdown.story.tsx b/apps/src/componentLibrary/dropdown/iconDropdown/IconDropdown.story.tsx
@@ -65,7 +65,16 @@ const MultipleTemplate: StoryFn<{
             componentArg.onChange(option);
           };
 
-          return (
+          return componentArg.color === 'white' ? (
+            <div style={{background: 'black', padding: 10}}>
+              <IconDropdown
+                key={`${componentArg.name}`}
+                {...componentArg}
+                selectedOption={values[componentArg.name]}
+                onChange={onChange}
+              />
+            </div>
+          ) : (
             <IconDropdown
               key={`${componentArg.name}`}
               {...componentArg}
@@ -166,62 +175,6 @@ WithDisabledOptionIconDropdown.args = {
   size: 'm',
 };
 
-export const ThickAndThinIconDropdowns = MultipleTemplate.bind({});
-ThickAndThinIconDropdowns.args = {
-  components: [
-    {
-      name: 'thick-iconDropdown',
-      options: [
-        {
-          value: 'option-1',
-          label: 'Option 1',
-          icon: {iconName: 'check', iconStyle: 'solid'},
-        },
-        {
-          value: 'option-2',
-          label: 'Option 2',
-          icon: {iconName: 'xmark', iconStyle: 'solid'},
-        },
-      ],
-      selectedOption: {
-        value: 'option-1',
-        label: 'Option 1',
-        icon: {iconName: 'check', iconStyle: 'solid'},
-      },
-      labelText: 'Thick Dropdown',
-      labelType: 'thick',
-      onChange: args => null,
-      size: 'm',
-      disabled: false,
-    },
-    {
-      name: 'thin-iconDropdown',
-      options: [
-        {
-          value: 'option-1',
-          label: 'Option 1',
-          icon: {iconName: 'check', iconStyle: 'solid'},
-        },
-        {
-          value: 'option-2',
-          label: 'Option 2',
-          icon: {iconName: 'xmark', iconStyle: 'solid'},
-        },
-      ],
-      selectedOption: {
-        value: 'option-1',
-        label: 'Option 1',
-        icon: {iconName: 'check', iconStyle: 'solid'},
-      },
-      labelText: 'Thin Dropdown',
-      labelType: 'thin',
-      onChange: args => null,
-      size: 'm',
-      disabled: false,
-    },
-  ],
-};
-
 export const GroupOfIconDropdownColors = MultipleTemplate.bind({});
 GroupOfIconDropdownColors.args = {
   components: [

diff --git a/apps/src/componentLibrary/dropdown/iconDropdown/IconDropdown.tsx b/apps/src/componentLibrary/dropdown/iconDropdown/IconDropdown.tsx
@@ -37,8 +37,6 @@ export interface IconDropdownProps {
   /** IconDropdown label
    * The user-facing label of the dropdown */
   labelText: string;
-  /** IconDropdown label style type*/
-  labelType?: 'thick' | 'thin';
   /** IconDropdown options */
   options: IconDropdownOption[];
   /** IconDropdown checked options */
@@ -50,7 +48,6 @@ export interface IconDropdownProps {
 const IconDropdown: React.FunctionComponent<IconDropdownProps> = ({
   name,
   labelText,
-  labelType = 'thick',
   options,
   selectedOption = {},
   onChange,
@@ -73,7 +70,6 @@ const IconDropdown: React.FunctionComponent<IconDropdownProps> = ({
     <CustomDropdown
       name={name}
       labelText={labelText}
-      labelType={labelType}
       disabled={disabled}
       color={color}
       icon={selectedOption?.icon}

diff --git a/apps/src/componentLibrary/dropdown/simpleDropdown/CHANGELOG.md b/apps/src/componentLibrary/dropdown/simpleDropdown/CHANGELOG.md
@@ -2,11 +2,6 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.5.0](https://github.com/code-dot-org/code-dot-org/pull/57827)
-* added dropdownTextThickness prop to allow for setting the font weight of the dropdown text
-* removed unnecessary margin-bottom that was fetched from typography styles
-* added black and white background color fill
-
 ## [0.4.0](https://github.com/code-dot-org/code-dot-org/pull/57105)
 * use `width: 100%` instead of `width: auto` as default when styling `select` element.
 * style select element with the use of `select` css selector instead of `.dropdown`