Switch component style fixed: selector specificity increased by adding additional class. (#2179)

This commit is contained in:
kamre 2022-02-21 17:59:20 +03:00 committed by GitHub
parent a428c7553a
commit c388a8df4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 41 additions and 41 deletions

View file

@ -239,7 +239,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu imports menu open should ma
Random icons
</div>
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -710,7 +710,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
Random icons
</div>
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -872,7 +872,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
Random icons
</div>
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"

View file

@ -53,7 +53,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
</div>
<div>
<div
class="Switch size--medium on"
class="Switch override-main size--medium on"
>
<div
class="octo-switch-inner"
@ -163,7 +163,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
</div>
<div>
<div
class="Switch size--medium on"
class="Switch override-main size--medium on"
>
<div
class="octo-switch-inner"
@ -273,7 +273,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
</div>
<div>
<div
class="Switch size--medium on"
class="Switch override-main size--medium on"
>
<div
class="octo-switch-inner"
@ -383,7 +383,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
</div>
<div>
<div
class="Switch size--medium on"
class="Switch override-main size--medium on"
>
<div
class="octo-switch-inner"
@ -493,7 +493,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
</div>
<div>
<div
class="Switch size--medium on"
class="Switch override-main size--medium on"
>
<div
class="octo-switch-inner"
@ -603,7 +603,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
</div>
<div>
<div
class="Switch size--medium"
class="Switch override-main size--medium"
>
<div
class="octo-switch-inner"
@ -672,7 +672,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
</div>
<div>
<div
class="Switch size--medium on"
class="Switch override-main size--medium on"
>
<div
class="octo-switch-inner"
@ -782,7 +782,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
</div>
<div>
<div
class="Switch size--medium on"
class="Switch override-main size--medium on"
>
<div
class="octo-switch-inner"
@ -892,7 +892,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
</div>
<div>
<div
class="Switch size--medium on"
class="Switch override-main size--medium on"
>
<div
class="octo-switch-inner"

View file

@ -259,7 +259,7 @@ exports[`components/sidebar/SidebarSettingsMenu imports menu open should match s
Random icons
</div>
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -750,7 +750,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
Random icons
</div>
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -930,7 +930,7 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
Random icons
</div>
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -1200,7 +1200,7 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
Random icons
</div>
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"

View file

@ -38,7 +38,7 @@ exports[`components/viewHeader/filterValue return filterValue 1`] = `
Status
</div>
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"

View file

@ -38,7 +38,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1
Status
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -59,7 +59,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1
Property 1
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -80,7 +80,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1
Property 2
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -101,7 +101,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1
Property 3
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -122,7 +122,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1
Comments and Description
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -198,7 +198,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w
Title
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -219,7 +219,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w
Status
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -240,7 +240,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w
Property 1
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -261,7 +261,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w
Property 2
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -282,7 +282,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w
Property 3
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"
@ -303,7 +303,7 @@ exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu w
Comments and Description
</div>
<div
class="Switch size--small"
class="Switch override-main size--small"
>
<div
class="octo-switch-inner"

View file

@ -18,7 +18,7 @@ exports[`pages/dashboard/CenterContent base case - find all workspaces 1`] = `
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -184,7 +184,7 @@ exports[`pages/dashboard/CenterContent search filter - 5 matching workspaces 1`]
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -308,7 +308,7 @@ exports[`pages/dashboard/CenterContent search filter - number search 1`] = `
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -390,7 +390,7 @@ exports[`pages/dashboard/CenterContent search filter - search for all workspaces
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -486,7 +486,7 @@ exports[`pages/dashboard/CenterContent search filter - search for amount of boar
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -568,7 +568,7 @@ exports[`pages/dashboard/CenterContent search filter - search for foo baz 1`] =
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -636,7 +636,7 @@ exports[`pages/dashboard/CenterContent search filter - search for workspace name
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -732,7 +732,7 @@ exports[`pages/dashboard/CenterContent search filter - search for workspace name
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -884,7 +884,7 @@ exports[`pages/dashboard/CenterContent search filter - search for workspace with
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"
@ -952,7 +952,7 @@ exports[`pages/dashboard/CenterContent search filter - search non-existing works
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"

View file

@ -333,7 +333,7 @@ exports[`pages/dashboard/DashboardPage base case 1`] = `
>
Show empty
<div
class="Switch size--small on"
class="Switch override-main size--small on"
>
<div
class="octo-switch-inner"

View file

@ -1,4 +1,4 @@
.Switch {
.Switch.override-main {
display: flex;
flex-shrink: 0;
align-items: center;

View file

@ -18,7 +18,7 @@ function Switch(props: Props): JSX.Element {
switchSize = 'size--medium'
}
const className = props.isOn ? `Switch ${switchSize} on` : `Switch ${switchSize}`
const className = `Switch override-main ${switchSize}${props.isOn ? ' on' : ''}`
return (
<div
className={className}