From 39c2c8f8369cfa3f68dfee5e50b4c274718cc23a Mon Sep 17 00:00:00 2001
From: Sami Korpela <ketsappi@users.noreply.github.com>
Date: Tue, 5 Nov 2019 15:34:18 +0200
Subject: [PATCH 1/2] 'disabledCursor' css-util created

---
 src/components/utils/css.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/components/utils/css.ts

diff --git a/src/components/utils/css.ts b/src/components/utils/css.ts
new file mode 100644
index 000000000..681f9936b
--- /dev/null
+++ b/src/components/utils/css.ts
@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export const disabledCursor = css`
+  cursor: not-allowed;
+`;

From 605c643ca0bc626814ce63ff69dc2cf1afb80501 Mon Sep 17 00:00:00 2001
From: Sami Korpela <ketsappi@users.noreply.github.com>
Date: Wed, 6 Nov 2019 15:04:14 +0200
Subject: [PATCH 2/2] Disabled cursor to use for Button

Snapshots updated; PanelExpansion uses Button so therefore the other snapshots were also updated
---
 src/components/Button/Button.tsx              | 12 ++-
 .../Button/__snapshots__/Button.test.tsx.snap | 18 ++--
 src/core/Button/Button.baseStyles.tsx         |  6 +-
 .../Button/__snapshots__/Button.test.tsx.snap | 24 +++--
 .../PanelExpansion.test.tsx.snap              | 26 +++---
 .../theme/__snapshots__/tokens.test.tsx.snap  | 92 ++++++++++---------
 6 files changed, 106 insertions(+), 72 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index d14cd8bd6..20ce82f7b 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -8,6 +8,8 @@ import React, {
 import { HtmlButton, HtmlButtonProps } from '../../reset';
 import { VisuallyHidden } from '../Visually-hidden/Visually-hidden';
 import classnames from 'classnames';
+import styled from 'styled-components';
+import { disabledCursor } from '../utils/css';
 
 const baseClassName = 'fi-button';
 const disabledClassName = `${baseClassName}--disabled`;
@@ -102,6 +104,14 @@ export class Assertive extends Component<AssertiveProps> {
   }
 }
 
+const StyledHtmlButton = styled((props: ButtonProps) => (
+  <HtmlButton {...props} />
+))`
+  &.${disabledClassName} {
+    ${disabledCursor}
+  }
+`;
+
 export class Button extends Component<ButtonProps> {
   render() {
     const {
@@ -126,7 +136,7 @@ export class Button extends Component<ButtonProps> {
     const onClickProps = !!disabled ? {} : ifMouseNoFocus();
     return (
       <Fragment>
-        <HtmlButton
+        <StyledHtmlButton
           {...passProps}
           {...onClickProps}
           aria-disabled={disabled}
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
index 022a5a2c7..144edae69 100644
--- a/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`calling render with the same component on the same container does not remount 1`] = `
-.c0 {
+.c1 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -27,31 +27,35 @@ exports[`calling render with the same component on the same container does not r
   cursor: pointer;
 }
 
-.c0:-moz-focusring {
+.c1:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
-.c0::-moz-focus-inner {
+.c1::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c0::-webkit-file-upload-button {
+.c1::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
-.c0::-webkit-inner-spin-button {
+.c1::-webkit-inner-spin-button {
   height: auto;
 }
 
-.c0::-webkit-outer-spin-button {
+.c1::-webkit-outer-spin-button {
   height: auto;
 }
 
+.c0.fi-button--disabled {
+  cursor: not-allowed;
+}
+
 <button
   aria-disabled="false"
-  class="fi-button c0"
+  class="fi-button c0 c1"
   data-testid="button"
   tabindex="0"
   type="button"
diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx
index 01c08de60..5197b1029 100644
--- a/src/core/Button/Button.baseStyles.tsx
+++ b/src/core/Button/Button.baseStyles.tsx
@@ -109,10 +109,14 @@ export const baseStyles = withSuomifiTheme(
   &:disabled {
     text-shadow: 0 1px 1px ${theme.colors.blackBase};
     background: ${theme.gradients.depthBase};
-    pointer-events: none;
     user-select: none;
   }
 
+  &.fi-button--disabled::after {
+    border: none;
+    box-shadow: none;
+  }
+
   &.fi-button--fullwidth {
     display: block;
     width: 100%;
diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap
index cbf8aedaa..80da72484 100644
--- a/src/core/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/core/Button/__snapshots__/Button.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`calling render with the same component on the same container does not remount 1`] = `
-.c1 {
+.c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -27,28 +27,32 @@ exports[`calling render with the same component on the same container does not r
   cursor: pointer;
 }
 
-.c1:-moz-focusring {
+.c2:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
-.c1::-moz-focus-inner {
+.c2::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c1::-webkit-file-upload-button {
+.c2::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
-.c1::-webkit-inner-spin-button {
+.c2::-webkit-inner-spin-button {
   height: auto;
 }
 
-.c1::-webkit-outer-spin-button {
+.c2::-webkit-outer-spin-button {
   height: auto;
 }
 
+.c1.fi-button--disabled {
+  cursor: not-allowed;
+}
+
 .c0 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
@@ -112,13 +116,17 @@ exports[`calling render with the same component on the same container does not r
 .c0:disabled {
   text-shadow: 0 1px 1px hsl(0,0%,16%);
   background: linear-gradient(0deg,hsl(202,7%,67%) 0%,#c0c5c9 100%);
-  pointer-events: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
+.c0.fi-button--disabled::after {
+  border: none;
+  box-shadow: none;
+}
+
 .c0.fi-button--fullwidth {
   display: block;
   width: 100%;
@@ -256,7 +264,7 @@ exports[`calling render with the same component on the same container does not r
 
 <button
   aria-disabled="false"
-  class="fi-button c0 c1"
+  class="fi-button c0 c1 c2"
   data-testid="button"
   tabindex="0"
   type="button"
diff --git a/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap b/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap
index bb107bddb..add15b253 100644
--- a/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap
+++ b/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`calling render with the same component on the same container does not remount 1`] = `
-.c4 {
+.c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -27,25 +27,25 @@ exports[`calling render with the same component on the same container does not r
   cursor: pointer;
 }
 
-.c4:-moz-focusring {
+.c5:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
-.c4::-moz-focus-inner {
+.c5::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c4::-webkit-file-upload-button {
+.c5::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
-.c4::-webkit-inner-spin-button {
+.c5::-webkit-inner-spin-button {
   height: auto;
 }
 
-.c4::-webkit-outer-spin-button {
+.c5::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -79,7 +79,11 @@ exports[`calling render with the same component on the same container does not r
   max-width: 100%;
 }
 
-.c6 {
+.c4.fi-button--disabled {
+  cursor: not-allowed;
+}
+
+.c7 {
   display: none;
 }
 
@@ -95,7 +99,7 @@ exports[`calling render with the same component on the same container does not r
   cursor: pointer;
 }
 
-.c5 {
+.c6 {
   display: inline-block;
   vertical-align: baseline;
 }
@@ -253,7 +257,7 @@ exports[`calling render with the same component on the same container does not r
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="fi-button fi-panel-expansion_title fi-panel-expansion_title--no-tag c3 c4"
+    class="fi-button fi-panel-expansion_title fi-panel-expansion_title--no-tag c3 c4 c5"
     data-testid="panel-expansion-title"
     tabindex="0"
     type="button"
@@ -261,7 +265,7 @@ exports[`calling render with the same component on the same container does not r
     Test expansion
     <svg
       aria-hidden="true"
-      class="fi-panel-expansion_title-icon c5"
+      class="fi-panel-expansion_title-icon c6"
       focusable="false"
       height="1em"
       style="fill: hsl(202, 7%, 40%);"
@@ -275,7 +279,7 @@ exports[`calling render with the same component on the same container does not r
   </button>
   <div
     aria-hidden="true"
-    class="fi-panel-expansion_content c6 fi-panel c1 c2"
+    class="fi-panel-expansion_content c7 fi-panel c1 c2"
     hidden=""
   >
     Test expansion content
diff --git a/src/core/theme/__snapshots__/tokens.test.tsx.snap b/src/core/theme/__snapshots__/tokens.test.tsx.snap
index b431675a7..a0229d8c9 100644
--- a/src/core/theme/__snapshots__/tokens.test.tsx.snap
+++ b/src/core/theme/__snapshots__/tokens.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`snapshot testing 1`] = `
-.c4 {
+.c5 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -27,25 +27,25 @@ exports[`snapshot testing 1`] = `
   cursor: pointer;
 }
 
-.c4:-moz-focusring {
+.c5:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
-.c4::-moz-focus-inner {
+.c5::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c4::-webkit-file-upload-button {
+.c5::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
-.c4::-webkit-inner-spin-button {
+.c5::-webkit-inner-spin-button {
   height: auto;
 }
 
-.c4::-webkit-outer-spin-button {
+.c5::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -73,12 +73,16 @@ exports[`snapshot testing 1`] = `
   white-space: normal;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
   vertical-align: baseline;
 }
 
-.c6 {
+.c4.fi-button--disabled {
+  cursor: not-allowed;
+}
+
+.c7 {
   display: block;
   width: 100%;
   max-width: 100%;
@@ -90,19 +94,19 @@ exports[`snapshot testing 1`] = `
   max-width: 100%;
 }
 
-.c9 {
+.c10 {
   display: none;
 }
 
-.c7,
-.c7 * {
+.c8,
+.c8 * {
   cursor: pointer;
 }
 
-.c7:hover,
-.c7:active,
-.c7:focus,
-.c7:focus-within {
+.c8:hover,
+.c8:active,
+.c8:focus,
+.c8:focus-within {
   cursor: pointer;
 }
 
@@ -136,7 +140,7 @@ exports[`snapshot testing 1`] = `
   content: none;
 }
 
-.c5 {
+.c6 {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -160,7 +164,7 @@ exports[`snapshot testing 1`] = `
   box-shadow: 0 1px 2px 0 rgba(41,41,41,0.14),0 1px 5px 0 rgba(41,41,41,0.12);
 }
 
-.c5:before {
+.c6:before {
   content: '';
   position: absolute;
   top: 0;
@@ -171,18 +175,18 @@ exports[`snapshot testing 1`] = `
   height: 100%;
 }
 
-.c5:before {
+.c6:before {
   background-color: hsl(212,63%,98%);
   opacity: 0;
 }
 
-.c5.fi-panel-expansion--open:before {
+.c6.fi-panel-expansion--open:before {
   opacity: 1;
   -webkit-transition: opacity 50ms cubic-bezier(0.28,0.84,0.42,1);
   transition: opacity 50ms cubic-bezier(0.28,0.84,0.42,1);
 }
 
-.c5 .fi-panel-expansion_title {
+.c6 .fi-panel-expansion_title {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -203,12 +207,12 @@ exports[`snapshot testing 1`] = `
   width: 100%;
 }
 
-.c5 .fi-panel-expansion_title:focus {
+.c6 .fi-panel-expansion_title:focus {
   outline: 0;
   position: relative;
 }
 
-.c5 .fi-panel-expansion_title:focus:after {
+.c6 .fi-panel-expansion_title:focus:after {
   content: '';
   position: absolute;
   top: -4px;
@@ -223,11 +227,11 @@ exports[`snapshot testing 1`] = `
   z-index: 9999;
 }
 
-.c5 .fi-panel-expansion_title:focus:not(:focus-visible):after {
+.c6 .fi-panel-expansion_title:focus:not(:focus-visible):after {
   content: none;
 }
 
-.c5 .fi-panel-expansion_title--no-tag {
+.c6 .fi-panel-expansion_title--no-tag {
   padding-top: 16px;
   padding-right: 64px;
   padding-bottom: 16px;
@@ -235,21 +239,21 @@ exports[`snapshot testing 1`] = `
   color: hsl(212,63%,45%);
 }
 
-.c5 .fi-panel-expansion_title-icon {
+.c6 .fi-panel-expansion_title-icon {
   position: absolute;
   top: 0;
   right: 0;
   margin: 16px;
 }
 
-.c5 .fi-panel-expansion_title--open .fi-panel-expansion_title-icon,
-.c5 .fi-panel-expansion_title-icon--open {
+.c6 .fi-panel-expansion_title--open .fi-panel-expansion_title-icon,
+.c6 .fi-panel-expansion_title-icon--open {
   -webkit-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
 
-.c5 > .fi-panel-expansion_content {
+.c6 > .fi-panel-expansion_content {
   position: relative;
   display: block;
   height: 0;
@@ -265,18 +269,18 @@ exports[`snapshot testing 1`] = `
   will-change: transition,height;
 }
 
-.c5 > .fi-panel-expansion_content:not(.fi-panel-expansion_content--no-padding) {
+.c6 > .fi-panel-expansion_content:not(.fi-panel-expansion_content--no-padding) {
   padding: 0 16px;
 }
 
-.c5 > .fi-panel-expansion_content.fi-panel-expansion_content--open {
+.c6 > .fi-panel-expansion_content.fi-panel-expansion_content--open {
   height: 10%;
   overflow: visible;
   -webkit-animation: fi-panel-expansion_content-anim 50ms cubic-bezier(0.28,0.84,0.42,1) 1 forwards;
   animation: fi-panel-expansion_content-anim 50ms cubic-bezier(0.28,0.84,0.42,1) 1 forwards;
 }
 
-.c5 > .fi-panel-expansion_content.fi-panel-expansion_content--open:not(.fi-panel-expansion_content--no-padding) {
+.c6 > .fi-panel-expansion_content.fi-panel-expansion_content--open:not(.fi-panel-expansion_content--no-padding) {
   padding-top: 0;
   padding-right: 16px;
   padding-bottom: 16px;
@@ -372,7 +376,7 @@ exports[`snapshot testing 1`] = `
 >
   <button
     aria-disabled="false"
-    class="fi-button fi-panel-expansion-group_all-button c3 fi-button c4"
+    class="fi-button fi-panel-expansion-group_all-button c3 fi-button c4 c5"
     tabindex="0"
     tokens="[object Object]"
     type="button"
@@ -383,19 +387,19 @@ exports[`snapshot testing 1`] = `
     class="fi-panel-expansion-group_panels c2"
   >
     <div
-      class="c5 fi-panel-expansion c6 c2"
+      class="c6 fi-panel-expansion c7 c2"
     >
       <button
         aria-disabled="false"
         aria-expanded="false"
-        class="fi-button fi-panel-expansion_title fi-panel-expansion_title--no-tag c7 c4"
+        class="fi-button fi-panel-expansion_title fi-panel-expansion_title--no-tag c8 c4 c5"
         tabindex="0"
         type="button"
       >
         Test expansion 1
         <svg
           aria-hidden="true"
-          class="fi-panel-expansion_title-icon c8"
+          class="fi-panel-expansion_title-icon c9"
           focusable="false"
           height="1em"
           style="fill: hsl(202, 7%, 40%);"
@@ -409,26 +413,26 @@ exports[`snapshot testing 1`] = `
       </button>
       <div
         aria-hidden="true"
-        class="fi-panel-expansion_content c9 fi-panel c6 c2"
+        class="fi-panel-expansion_content c10 fi-panel c7 c2"
         hidden=""
       >
         Test expansion content 1
       </div>
     </div>
     <div
-      class="c5 fi-panel-expansion c6 c2"
+      class="c6 fi-panel-expansion c7 c2"
     >
       <button
         aria-disabled="false"
         aria-expanded="false"
-        class="fi-button fi-panel-expansion_title fi-panel-expansion_title--no-tag c7 c4"
+        class="fi-button fi-panel-expansion_title fi-panel-expansion_title--no-tag c8 c4 c5"
         tabindex="0"
         type="button"
       >
         Test expansion 2
         <svg
           aria-hidden="true"
-          class="fi-panel-expansion_title-icon c8"
+          class="fi-panel-expansion_title-icon c9"
           focusable="false"
           height="1em"
           style="fill: hsl(202, 7%, 40%);"
@@ -442,26 +446,26 @@ exports[`snapshot testing 1`] = `
       </button>
       <div
         aria-hidden="true"
-        class="fi-panel-expansion_content c9 fi-panel c6 c2"
+        class="fi-panel-expansion_content c10 fi-panel c7 c2"
         hidden=""
       >
         Test expansion content 2
       </div>
     </div>
     <div
-      class="c5 fi-panel-expansion c6 c2"
+      class="c6 fi-panel-expansion c7 c2"
     >
       <button
         aria-disabled="false"
         aria-expanded="false"
-        class="fi-button fi-panel-expansion_title fi-panel-expansion_title--no-tag c7 c4"
+        class="fi-button fi-panel-expansion_title fi-panel-expansion_title--no-tag c8 c4 c5"
         tabindex="0"
         type="button"
       >
         Test expansion 3
         <svg
           aria-hidden="true"
-          class="fi-panel-expansion_title-icon c8"
+          class="fi-panel-expansion_title-icon c9"
           focusable="false"
           height="1em"
           style="fill: hsl(202, 7%, 40%);"
@@ -475,7 +479,7 @@ exports[`snapshot testing 1`] = `
       </button>
       <div
         aria-hidden="true"
-        class="fi-panel-expansion_content c9 fi-panel c6 c2"
+        class="fi-panel-expansion_content c10 fi-panel c7 c2"
         hidden=""
       >
         Test expansion content 3