Switch component style fixed: selector specificity increased by adding additional class. (#2179)
This commit is contained in:
parent
a428c7553a
commit
c388a8df4a
9 changed files with 41 additions and 41 deletions
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.Switch {
|
||||
.Switch.override-main {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue