Wrap all styles and use more specific name

Automattic · Oct 23, 2020 · e1d2ca7 · e1d2ca7
1 parent 212a8b9
commit e1d2ca7
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 48 deletions.
diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
 /**
  * External dependencies
  */
@@ -76,7 +77,7 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props
 
 			return (
 				<div key={ languageGroup.id }>
-					<Button onClick={ onClick } className="language-picker__language-group">
+					<Button onClick={ onClick } className="language-picker-component__language-group">
 						<span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name() }</span>
 					</Button>
 				</div>
@@ -85,14 +86,16 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props
 	};
 
 	return (
-		<>
-			<div className="language-picker__regions-label">{ __( 'regions' ) }</div>
-			<div className="language-picker__content">
-				<div className="language-picker__category-filters">{ renderCategoryButtons() }</div>
-				<div className="language-picker__language-buttons">
+		<div className="language-picker-component">
+			<div className="language-picker-component__regions-label">{ __( 'regions' ) }</div>
+			<div className="language-picker-component__content">
+				<div className="language-picker-component__category-filters">
+					{ renderCategoryButtons() }
+				</div>
+				<div className="language-picker-component__language-buttons">
 					{ getFilteredLanguages().map( ( language ) => (
 						<Button
-							className="language-picker__language-button"
+							className="language-picker-component__language-button"
 							key={ language.langSlug }
 							onClick={ () => onSelectLanguage( language ) }
 							title={ language.name }
@@ -102,7 +105,7 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props
 					) ) }
 				</div>
 			</div>
-		</>
+		</div>
 	);
 };
 

diff --git a/packages/language-picker/src/style.scss b/packages/language-picker/src/style.scss
@@ -2,46 +2,48 @@
 @import '~@wordpress/base-styles/mixins';
 @import '~@wordpress/base-styles/variables';
 
-.language-picker__language-group {
-	width: 100%;
-}
-
-.language-picker__language-group > span {
-	padding-bottom: 4px;
-	&.is-selected {
-		padding-bottom: 2px;
-		border-bottom: 2px solid #3582c4;
+.language-picker-component {
+	.language-picker-component__language-group {
+		width: 100%;
 	}
-}
-
-.language-picker__regions-label {
-	font-family: $default-font;
-	margin: 6px 12px;
-	color: $gray-600;
-	/* stylelint-disable-next-line scales/font-size */
-	font-size: 13px;
-	text-transform: uppercase;
-}
-
-.language-picker__content {
-	display: flex;
-}
-
-.language-picker__category-filters {
-	min-width: 170px;
-
-	@include break-small {
-		min-width: 220px;
-		margin-right: 60px;
+
+	.language-picker-component__language-group > span {
+		padding-bottom: 4px;
+		&.is-selected {
+			padding-bottom: 2px;
+			border-bottom: 2px solid #3582c4;
+		}
+	}
+
+	.language-picker-component__regions-label {
+		font-family: $default-font;
+		margin: 6px 12px;
+		color: $gray-600;
+		/* stylelint-disable-next-line scales/font-size */
+		font-size: 13px;
+		text-transform: uppercase;
+	}
+
+	.language-picker-component__content {
+		display: flex;
+	}
+
+	.language-picker-component__category-filters {
+		min-width: 170px;
+
+		@include break-small {
+			min-width: 220px;
+			margin-right: 60px;
+		}
+	}
+
+	.language-picker-component__language-buttons {
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+	}
+
+	.language-picker-component__language-button {
+		width: 165px;
 	}
-}
-
-.language-picker__language-buttons {
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-}
-
-.language-picker__language-button {
-	width: 165px;
 }