fix(ui-toolkit): disabled cursor on disabled input

fixes #963

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -154,6 +154,7 @@ exports[`renders <Rule/> without throwing 1`] = `
 .c9:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c9:disabled::-webkit-input-placeholder {
@@ -293,6 +294,7 @@ exports[`renders <Rule/> without throwing 1`] = `
 .c6:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c6:disabled::-webkit-input-placeholder {
@@ -620,6 +622,7 @@ exports[`renders <Rule/> without throwing 2`] = `
 .c9:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c9:disabled::-webkit-input-placeholder {
@@ -759,6 +762,7 @@ exports[`renders <Rule/> without throwing 2`] = `
 .c6:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c6:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.spec.js.snap

@@ -189,6 +189,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
 .c3:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c3:disabled::-webkit-input-placeholder {
@@ -473,6 +474,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
 .c3:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c3:disabled::-webkit-input-placeholder {
@@ -686,6 +688,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
   font-family: "Roboto Mono";
   width: 100%;
   font-size: 0.9375rem;
@@ -729,6 +732,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
 .c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c7:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap

@@ -432,10 +432,12 @@ exports[`renders <Images expanded /> without throwing 1`] = `
           <label
             className="c10"
             htmlFor="Y"
+            id="Y"
           />
           <label
             className="c7"
             htmlFor="Y"
+            id="Y"
           >
              
             Hardware Virtual Machine

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap

@@ -225,6 +225,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
 .c6:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c6:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap

@@ -423,6 +423,7 @@ exports[`renders <Network /> without throwing 1`] = `
 
 .c9:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c10 {
@@ -1457,6 +1458,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
 
 .c9:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c10 {
@@ -2504,6 +2506,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
 
 .c9:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c10 {
@@ -3690,6 +3693,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
 
 .c9:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c10 {
@@ -4853,6 +4857,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
 
 .c9:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c10 {
@@ -4974,6 +4979,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
 .c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c28:disabled::-webkit-input-placeholder {
@@ -6132,6 +6138,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
 
 .c9:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c10 {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -285,6 +285,7 @@ exports[`renders <Filters /> without throwing 1`] = `
 
 .c6:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c7 {
@@ -1287,6 +1288,7 @@ exports[`renders <Package /> without throwing 1`] = `
 
 .c5:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c6 {

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap

@@ -665,7 +665,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -696,6 +696,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -1816,7 +1817,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1847,6 +1848,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -2735,7 +2737,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2766,6 +2768,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -2829,6 +2832,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 .c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c16:disabled::-webkit-input-placeholder {
@@ -3777,7 +3781,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -3808,6 +3812,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -4716,7 +4721,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4747,6 +4752,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -5760,7 +5766,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -5791,6 +5797,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -6811,7 +6818,8 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 22.1875rem;
+  cursor: not-allowed;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6854,6 +6862,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -7808,7 +7817,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -7839,6 +7848,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -65,6 +65,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -598,6 +599,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -1131,6 +1133,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -1664,6 +1667,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -2197,6 +2201,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -2730,6 +2735,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -3287,6 +3293,7 @@ exports[`renders <Item /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -3779,6 +3786,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -4273,6 +4281,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -4807,6 +4816,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -664,6 +664,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -727,6 +728,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 .c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c16:disabled::-webkit-input-placeholder {
@@ -1672,6 +1674,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -1735,6 +1738,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 .c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c16:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap

@@ -65,6 +65,7 @@ exports[`renders <Actions /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -563,6 +564,7 @@ exports[`renders <Item /> without throwing 1`] = `
 
 .c8:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c9 {
@@ -972,6 +974,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 
 .c8:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c9 {
@@ -1577,6 +1580,7 @@ exports[`renders <SnapshotList /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -2070,6 +2074,7 @@ exports[`renders <SnapshotList allSelected /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -2563,6 +2568,7 @@ exports[`renders <SnapshotList sortBy /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -3056,6 +3062,7 @@ exports[`renders <SnapshotList sortBy sortOrder /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {
@@ -3549,6 +3556,7 @@ exports[`renders <SnapshotList submitting /> without throwing 1`] = `
 
 .c10:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c11 {

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -866,6 +866,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c29:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c29:disabled::-webkit-input-placeholder {
@@ -927,6 +928,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c31:disabled::-webkit-input-placeholder {
@@ -3030,6 +3032,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 .c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c31:disabled::-webkit-input-placeholder {
@@ -5364,6 +5367,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 .c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c31:disabled::-webkit-input-placeholder {
@@ -7585,6 +7589,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c33:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c33:disabled::-webkit-input-placeholder {
@@ -7646,6 +7651,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c35:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c35:disabled::-webkit-input-placeholder {
@@ -9642,6 +9648,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c31:disabled::-webkit-input-placeholder {
@@ -9703,6 +9710,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c33:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c33:disabled::-webkit-input-placeholder {
@@ -11807,6 +11815,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c31:disabled::-webkit-input-placeholder {
@@ -11868,6 +11877,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c33:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c33:disabled::-webkit-input-placeholder {
@@ -13806,6 +13816,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c29:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c29:disabled::-webkit-input-placeholder {
@@ -13867,6 +13878,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c31:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -657,6 +657,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -1630,6 +1631,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap

@@ -236,6 +236,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
 .c4:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c4:disabled::-webkit-input-placeholder {
@@ -599,6 +600,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
 .c4:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c4:disabled::-webkit-input-placeholder {
@@ -984,6 +986,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
 .c4:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c4:disabled::-webkit-input-placeholder {
@@ -1347,6 +1350,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
 .c4:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c4:disabled::-webkit-input-placeholder {
@@ -1710,6 +1714,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
 .c4:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c4:disabled::-webkit-input-placeholder {
@@ -2073,6 +2078,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
 .c4:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c4:disabled::-webkit-input-placeholder {
@@ -2429,6 +2435,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
   width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
@@ -2472,6 +2479,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
 .c4:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c4:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -1087,7 +1087,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1118,6 +1118,7 @@ Array [
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -1181,6 +1182,7 @@ Array [
 .c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c16:disabled::-webkit-input-placeholder {
@@ -2988,7 +2990,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -3019,6 +3021,7 @@ Array [
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -3082,6 +3085,7 @@ Array [
 .c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c16:disabled::-webkit-input-placeholder {
@@ -4021,7 +4025,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4052,6 +4056,7 @@ Array [
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -4115,6 +4120,7 @@ Array [
 .c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c16:disabled::-webkit-input-placeholder {
@@ -5336,7 +5342,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -5367,6 +5373,7 @@ Array [
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -5430,6 +5437,7 @@ Array [
 .c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c16:disabled::-webkit-input-placeholder {
@@ -6369,7 +6377,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
+  max-width: 18.75rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6400,6 +6408,7 @@ Array [
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {
@@ -6463,6 +6472,7 @@ Array [
 .c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c16:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap

@@ -2247,6 +2247,7 @@ Array [
 
 .c9:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c10 {

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -1101,6 +1101,7 @@ Array [
 .c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c12:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -260,6 +260,7 @@ exports[`renders <List /> without throwing 1`] = `
 
 .c23:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c24 {
@@ -420,6 +421,7 @@ exports[`renders <List /> without throwing 1`] = `
 .c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c7:disabled::-webkit-input-placeholder {
@@ -1266,6 +1268,7 @@ exports[`renders <List error /> without throwing 1`] = `
 
 .c29:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c30 {
@@ -1426,6 +1429,7 @@ exports[`renders <List error /> without throwing 1`] = `
 .c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c7:disabled::-webkit-input-placeholder {
@@ -2260,7 +2264,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c38 {
   width: 0.375rem;
   height: 0.375rem;
-  border-radius: 50%;
+  border-radius: 0.1875rem;
   background-color: rgb(0,152,88);
   display: inline-block;
   height: 0.6875rem;
@@ -2327,6 +2331,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 
 .c23:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c24 {
@@ -2487,6 +2492,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c7:disabled::-webkit-input-placeholder {
@@ -4338,7 +4344,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c38 {
   width: 0.375rem;
   height: 0.375rem;
-  border-radius: 50%;
+  border-radius: 0.1875rem;
   background-color: rgb(0,152,88);
   display: inline-block;
   height: 0.6875rem;
@@ -4405,6 +4411,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 
 .c23:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c24 {
@@ -4565,6 +4572,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c7:disabled::-webkit-input-placeholder {
@@ -6959,7 +6967,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c38 {
   width: 0.375rem;
   height: 0.375rem;
-  border-radius: 50%;
+  border-radius: 0.1875rem;
   background-color: rgb(0,152,88);
   display: inline-block;
   height: 0.6875rem;
@@ -7026,6 +7034,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 
 .c23:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c24 {
@@ -7186,6 +7195,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c7:disabled::-webkit-input-placeholder {
@@ -9789,7 +9799,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c38 {
   width: 0.375rem;
   height: 0.375rem;
-  border-radius: 50%;
+  border-radius: 0.1875rem;
   background-color: rgb(0,152,88);
   display: inline-block;
   height: 0.6875rem;
@@ -9856,6 +9866,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 
 .c23:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c24 {
@@ -10016,6 +10027,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c7:disabled::-webkit-input-placeholder {
@@ -11891,6 +11903,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
   width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
@@ -11934,6 +11947,7 @@ exports[`renders <List loading /> without throwing 1`] = `
 .c7:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c7:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -309,6 +309,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -1351,6 +1352,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -1413,6 +1415,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c24:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c24:disabled::-webkit-input-placeholder {
@@ -1476,6 +1479,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c28:disabled::-webkit-input-placeholder {
@@ -2266,6 +2270,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -2866,6 +2871,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
   width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
@@ -2909,6 +2915,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -4157,6 +4164,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -4219,6 +4227,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c26:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c26:disabled::-webkit-input-placeholder {
@@ -4282,6 +4291,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c30:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c30:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -1588,6 +1588,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c32:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c32:disabled::-webkit-input-placeholder {
@@ -3960,6 +3961,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c32:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c32:disabled::-webkit-input-placeholder {

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -309,6 +309,7 @@ exports[`renders <Tags /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -1360,6 +1361,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -1422,6 +1424,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 .c25:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c25:disabled::-webkit-input-placeholder {
@@ -2231,6 +2234,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -3284,6 +3288,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -3346,6 +3351,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 .c25:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c25:disabled::-webkit-input-placeholder {
@@ -4793,6 +4799,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -4855,6 +4862,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 .c25:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c25:disabled::-webkit-input-placeholder {
@@ -5676,6 +5684,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -6221,6 +6230,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
   width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
@@ -6264,6 +6274,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {
@@ -6777,6 +6788,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 .c5:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c5:disabled::-webkit-input-placeholder {

packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap

@@ -60,6 +60,7 @@ exports[`Form Checkbox 1`] = `
 
 .c2:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c3 {
@@ -334,6 +335,7 @@ exports[`Form Input 1`] = `
 .c0:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c0:disabled::-webkit-input-placeholder {
@@ -439,6 +441,7 @@ exports[`Form Radio 1`] = `
 
 .c2:disabled + label {
   background-color: rgb(249,249,249);
+  cursor: not-allowed;
 }
 
 .c3 {
@@ -624,6 +627,7 @@ exports[`Form Select 1`] = `
 .c2:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c2:disabled::-webkit-input-placeholder {
@@ -724,6 +728,7 @@ exports[`Form Textarea 1`] = `
 .c1:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
+  cursor: not-allowed;
 }
 
 .c1:disabled::-webkit-input-placeholder {
@@ -785,6 +790,7 @@ exports[`Form Toggle 1`] = `
   font-weight: bold;
   white-space: pre;
   font-size: 0.8125rem;
+  color: rgb(216,216,216);
 }
 
 .c1 {
@@ -840,6 +846,7 @@ exports[`Form Toggle 1`] = `
   transition: all 0.3s ease;
   border: 0.0625rem solid rgb(216,216,216);
   margin-right: 0.375rem;
+  cursor: not-allowed;
 }
 
 .c3::selection {
@@ -875,8 +882,8 @@ exports[`Form Toggle 1`] = `
   left: 0;
   border-radius: 2em;
   background: rgb(255,255,255);
-  -webkit-transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275), padding 0.3s ease,margin 0.3s ease,box-shadow 0.3s ease;
+  -webkit-transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease, margin 0.3s ease,box-shadow 0.3s ease;
-  transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275), padding 0.3s ease,margin 0.3s ease,box-shadow 0.3s ease;
+  transition: left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease, margin 0.3s ease,box-shadow 0.3s ease;
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
@@ -892,6 +899,31 @@ exports[`Form Toggle 1`] = `
   display: none;
 }
 
+.c3:active {
+  box-shadow: none;
+}
+
+.c3:active:after {
+  padding-right: 0;
+}
+
+.c3:before {
+  cursor: not-allowed;
+}
+
+.c3:after {
+  cursor: not-allowed;
+  background: rgb(230,230,230);
+}
+
+.c3:hover {
+  border: 0.0625rem solid rgb(216,216,216);
+}
+
+.c3:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
 <div
   className="c0"
   disabled={true}
@@ -912,11 +944,17 @@ exports[`Form Toggle 1`] = `
     />
     <label
       className="c3"
+      disabled={true}
       htmlFor="d"
+      id="d"
+      value="video"
     />
     <label
       className="c4"
+      disabled={true}
       htmlFor="d"
+      id="d"
+      value="video"
     >
        
       Video

packages/ui-toolkit/src/form/base/input.js

@@ -5,19 +5,15 @@ import remcalc from 'remcalc';
 import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';
 
-const colorWithDisabled = props =>
+const colorWithDisabled = props => (props.disabled ? props.theme.disabled : props.theme.text);
-  props.disabled ? props.theme.disabled : props.theme.text;
 
 const colorWithDefaultValue = props =>
-  props.value === props.defaultValue
+  props.value === props.defaultValue ? props.theme.disabled : colorWithDisabled(props);
-    ? props.theme.disabled
-    : colorWithDisabled(props);
 
 const color = props =>
   props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
 
-const height = props =>
+const height = props => (props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48));
-  props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
 
 const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
 
@@ -54,6 +50,7 @@ const style = css`
   ${is('disabled')`
     background-color: ${props => props.theme.disabled};
     color: ${props => props.theme.grey};
+    cursor: not-allowed;
 
     ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
       color: ${props => props.theme.grey};
@@ -71,6 +68,7 @@ const style = css`
   &:disabled {
     background-color: ${props => props.theme.disabled};
     color: ${props => props.theme.grey};
+    cursor: not-allowed;
 
     ::-webkit-input-placeholder {
       /* WebKit, Blink, Edge */
@@ -232,8 +230,7 @@ BaseInput.propTypes = {
 export default BaseInput;
 
 export const Stylable = Component => {
-  const stylable =
+  const stylable = typeof Component === 'string' ? styled[Component] : styled(Component);
-    typeof Component === 'string' ? styled[Component] : styled(Component);
 
   return stylable`
     ${style}

packages/ui-toolkit/src/form/base/toggle.js

@@ -32,6 +32,7 @@ const StyledInput = Input.extend`
 
   &:disabled + label {
     background-color: rgb(249, 249, 249);
+    cursor: not-allowed;
   }
 `;
 
@@ -162,12 +163,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
 
       const toggle = (
         <InnerContainer {...types} type={type} {...rest}>
-          <StyledInput
+          <StyledInput {...rest} id={newValue.id} type={type} checked={checked} />
-            {...rest}
-            id={newValue.id}
-            type={type}
-            checked={checked}
-          />
           <Label
             {...types}
             htmlFor={newValue.id}

packages/ui-toolkit/src/form/toggle.js

@@ -84,8 +84,8 @@ const InputLabel = styled.label`
     left: 0;
     border-radius: 2em;
     background: ${props => props.theme.white};
-    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease,
-      padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;
+      margin 0.3s ease, box-shadow 0.3s ease;
 
     box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
   }
@@ -101,13 +101,19 @@ const InputLabel = styled.label`
     display: none;
   }
   ${is('disabled')`
+      cursor: not-allowed;
+
       &:active {
         box-shadow: none;
         &:after {
           padding-right: 0;
         }
       }
+      &:before {
+        cursor: not-allowed;
+      }
       &:after {
+        cursor: not-allowed;
         background: ${props => props.theme.whiteActive};
       }
       &:hover {
@@ -131,12 +137,13 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
       <InputContainer>
         <Input {...rest} checked={checked} type="checkbox" />
         <InputLabel
+          {...rest}
           htmlFor={rest.id}
           error={rest.error}
           warning={rest.warning}
           success={rest.success}
         />
-        <Label> {children}</Label>
+        <Label {...rest}> {children}</Label>
       </InputContainer>
     );
   };
@@ -147,8 +154,6 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
 /**
  * @example ./usage-toggle.md
  */
-const Toggle = ({ children, ...rest }) => (
+const Toggle = ({ children, ...rest }) => <BaseToggle {...rest}>{children}</BaseToggle>;
-  <BaseToggle {...rest}>{children}</BaseToggle>
-);
 
 export default Toggle;