@@ -1760,7 +1760,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
align-items: center;
}
-.emotion-20 {
+.emotion-28 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -1781,44 +1781,44 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
align-items: stretch;
}
-.emotion-20 > button:first-child,
-.emotion-20 > div:first-child {
+.emotion-28 > button:first-child,
+.emotion-28 > div:first-child {
margin-top: 0;
}
-.emotion-20 > button:last-child,
-.emotion-20 > div:last-child {
+.emotion-28 > button:last-child,
+.emotion-28 > div:last-child {
margin-bottom: 0;
}
-.emotion-20 > div {
+.emotion-28 > div {
margin: 0 0 8px;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
-.emotion-20 > div button {
+.emotion-28 > div button {
width: 100%;
}
-.emotion-20 > div button:nth-child(2) {
+.emotion-28 > div button:nth-child(2) {
width: 40px;
}
-.emotion-20 > button {
+.emotion-28 > button {
margin: 0 0 8px;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
-.emotion-11 {
+.emotion-14 {
display: inline-block;
position: relative;
}
-.emotion-7 {
+.emotion-9 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -1867,19 +1867,19 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
padding-right: 8px;
}
-.emotion-7:not(:disabled):focus {
+.emotion-9:not(:disabled):focus {
outline: 2px solid #0074B7;
outline-offset: 2px;
z-index: 1;
}
-.emotion-7:not(:disabled):hover,
-.emotion-7:not(:disabled):focus {
+.emotion-9:not(:disabled):hover,
+.emotion-9:not(:disabled):focus {
background: #292F7C;
color: #FFFFFF;
}
-.emotion-7:not(:disabled):after {
+.emotion-9:not(:disabled):after {
background: #FFFFFF;
border-radius: 50%;
content: '';
@@ -1898,12 +1898,12 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
width: 28px;
}
-.emotion-7:not(:disabled):active {
+.emotion-9:not(:disabled):active {
background: #1A1E51;
color: #FFFFFF;
}
-.emotion-7:not(:disabled):active:after {
+.emotion-9:not(:disabled):active:after {
opacity: 0.4;
-webkit-transform: translate(-50%,-50%) scale(0);
-ms-transform: translate(-50%,-50%) scale(0);
@@ -1913,7 +1913,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
transition: transform 0s;
}
-.emotion-7 svg {
+.emotion-9 svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -1923,7 +1923,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
padding-right: 8px;
}
-.emotion-10 {
+.emotion-13 {
background: #FFFFFF;
border: 1px solid #D4D4D4;
border-radius: 8px;
@@ -1958,11 +1958,11 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
outline-offset: 0;
}
-.emotion-10:focus {
+.emotion-13:focus {
outline: 2px solid #0074B7;
}
-.emotion-9 {
+.emotion-11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -1981,17 +1981,17 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
white-space: nowrap;
}
-.emotion-9:hover,
-.emotion-9:focus {
+.emotion-11:hover,
+.emotion-11:focus {
background: #F5F5F5;
}
-.emotion-9:focus {
+.emotion-11:focus {
outline-color: #0074B7;
outline-offset: -2px;
}
-.emotion-9:active {
+.emotion-11:active {
outline-color: #0074B7;
}
@@ -2107,7 +2107,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
align-items: center;
}
-.emotion-20 {
+.emotion-28 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -2128,44 +2128,44 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
align-items: stretch;
}
-.emotion-20 > button:first-child,
-.emotion-20 > div:first-child {
+.emotion-28 > button:first-child,
+.emotion-28 > div:first-child {
margin-top: 0;
}
-.emotion-20 > button:last-child,
-.emotion-20 > div:last-child {
+.emotion-28 > button:last-child,
+.emotion-28 > div:last-child {
margin-bottom: 0;
}
-.emotion-20 > div {
+.emotion-28 > div {
margin: 0 0 8px;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
-.emotion-20 > div button {
+.emotion-28 > div button {
width: 100%;
}
-.emotion-20 > div button:nth-child(2) {
+.emotion-28 > div button:nth-child(2) {
width: 40px;
}
-.emotion-20 > button {
+.emotion-28 > button {
margin: 0 0 8px;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
-.emotion-11 {
+.emotion-14 {
display: inline-block;
position: relative;
}
-.emotion-7 {
+.emotion-9 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -2214,19 +2214,19 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
padding-right: 8px;
}
-.emotion-7:not(:disabled):focus {
+.emotion-9:not(:disabled):focus {
outline: 2px solid #0074B7;
outline-offset: 2px;
z-index: 1;
}
-.emotion-7:not(:disabled):hover,
-.emotion-7:not(:disabled):focus {
+.emotion-9:not(:disabled):hover,
+.emotion-9:not(:disabled):focus {
background: #292F7C;
color: #FFFFFF;
}
-.emotion-7:not(:disabled):after {
+.emotion-9:not(:disabled):after {
background: #FFFFFF;
border-radius: 50%;
content: '';
@@ -2245,12 +2245,12 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
width: 28px;
}
-.emotion-7:not(:disabled):active {
+.emotion-9:not(:disabled):active {
background: #1A1E51;
color: #FFFFFF;
}
-.emotion-7:not(:disabled):active:after {
+.emotion-9:not(:disabled):active:after {
opacity: 0.4;
-webkit-transform: translate(-50%,-50%) scale(0);
-ms-transform: translate(-50%,-50%) scale(0);
@@ -2260,7 +2260,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
transition: transform 0s;
}
-.emotion-7 svg {
+.emotion-9 svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -2270,7 +2270,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
padding-right: 8px;
}
-.emotion-10 {
+.emotion-13 {
background: #FFFFFF;
border: 1px solid #D4D4D4;
border-radius: 8px;
@@ -2305,11 +2305,11 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
outline-offset: 0;
}
-.emotion-10:focus {
+.emotion-13:focus {
outline: 2px solid #0074B7;
}
-.emotion-9 {
+.emotion-11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -2328,23 +2328,23 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
white-space: nowrap;
}
-.emotion-9:hover,
-.emotion-9:focus {
+.emotion-11:hover,
+.emotion-11:focus {
background: #F5F5F5;
}
-.emotion-9:focus {
+.emotion-11:focus {
outline-color: #0074B7;
outline-offset: -2px;
}
-.emotion-9:active {
+.emotion-11:active {
outline-color: #0074B7;
}
@@ -2361,12 +2361,12 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
@@ -2417,12 +2417,12 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
@@ -2589,7 +2589,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
align-items: center;
}
-.emotion-20 {
+.emotion-28 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -2607,86 +2607,86 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
row-gap: 8px;
}
-.emotion-20 > button:first-child,
-.emotion-20 > div:first-child {
+.emotion-28 > button:first-child,
+.emotion-28 > div:first-child {
margin-left: 0;
}
-.emotion-20 > button:last-child,
-.emotion-20 > div:last-child {
+.emotion-28 > button:last-child,
+.emotion-28 > div:last-child {
margin-right: 0;
}
-.emotion-20 > div {
+.emotion-28 > div {
margin: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
-.emotion-20 > div button:nth-child(2) {
+.emotion-28 > div button:nth-child(2) {
width: 40px;
}
-.emotion-20 > div:first-child:not(:only-child) button {
+.emotion-28 > div:first-child:not(:only-child) button {
border-radius: 8px 0 0 8px;
border-right: 0;
}
-.emotion-20 > div:nth-child(2) button {
+.emotion-28 > div:nth-child(2) button {
border-left: 1px solid #FFFFFF;
}
-.emotion-20 > div:not(:first-child) button {
+.emotion-28 > div:not(:first-child) button {
border-radius: 0;
border-right: 1px solid #FFFFFF;
}
-.emotion-20 > div:not(:first-child).emotion-20 > div:not(:last-child) button {
+.emotion-28 > div:not(:first-child).emotion-28 > div:not(:last-child) button {
border-right: 0;
}
-.emotion-20 > div:last-child:not(:only-child) button {
+.emotion-28 > div:last-child:not(:only-child) button {
border-radius: 0 8px 8px 0;
border-right: 1px solid #FFFFFF;
}
-.emotion-20 > button {
+.emotion-28 > button {
margin: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
-.emotion-20 > button:first-child:not(:only-child) {
+.emotion-28 > button:first-child:not(:only-child) {
border-radius: 8px 0 0 8px;
border-right: 0;
}
-.emotion-20 > button:nth-child(2) {
+.emotion-28 > button:nth-child(2) {
border-left: 1px solid #FFFFFF;
}
-.emotion-20 > button:not(:first-child) {
+.emotion-28 > button:not(:first-child) {
border-radius: 0;
border-right: 1px solid #FFFFFF;
}
-.emotion-20 > button:not(:first-child).emotion-20 > button:not(:last-child) {
+.emotion-28 > button:not(:first-child).emotion-28 > button:not(:last-child) {
border-right: 0;
}
-.emotion-20 > button:last-child:not(:only-child) {
+.emotion-28 > button:last-child:not(:only-child) {
border-radius: 0 8px 8px 0;
border-right: 1px solid #FFFFFF;
}
-.emotion-11 {
+.emotion-14 {
display: inline-block;
position: relative;
}
-.emotion-7 {
+.emotion-9 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -2735,19 +2735,19 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
padding-right: 8px;
}
-.emotion-7:not(:disabled):focus {
+.emotion-9:not(:disabled):focus {
outline: 2px solid #0074B7;
outline-offset: 2px;
z-index: 1;
}
-.emotion-7:not(:disabled):hover,
-.emotion-7:not(:disabled):focus {
+.emotion-9:not(:disabled):hover,
+.emotion-9:not(:disabled):focus {
background: #292F7C;
color: #FFFFFF;
}
-.emotion-7:not(:disabled):after {
+.emotion-9:not(:disabled):after {
background: #FFFFFF;
border-radius: 50%;
content: '';
@@ -2766,12 +2766,12 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
width: 28px;
}
-.emotion-7:not(:disabled):active {
+.emotion-9:not(:disabled):active {
background: #1A1E51;
color: #FFFFFF;
}
-.emotion-7:not(:disabled):active:after {
+.emotion-9:not(:disabled):active:after {
opacity: 0.4;
-webkit-transform: translate(-50%,-50%) scale(0);
-ms-transform: translate(-50%,-50%) scale(0);
@@ -2781,7 +2781,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
transition: transform 0s;
}
-.emotion-7 svg {
+.emotion-9 svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -2791,7 +2791,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
padding-right: 8px;
}
-.emotion-10 {
+.emotion-13 {
background: #FFFFFF;
border: 1px solid #D4D4D4;
border-radius: 8px;
@@ -2826,11 +2826,11 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
outline-offset: 0;
}
-.emotion-10:focus {
+.emotion-13:focus {
outline: 2px solid #0074B7;
}
-.emotion-9 {
+.emotion-11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -2849,17 +2849,17 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
white-space: nowrap;
}
-.emotion-9:hover,
-.emotion-9:focus {
+.emotion-11:hover,
+.emotion-11:focus {
background: #F5F5F5;
}
-.emotion-9:focus {
+.emotion-11:focus {
outline-color: #0074B7;
outline-offset: -2px;
}
-.emotion-9:active {
+.emotion-11:active {
outline-color: #0074B7;
}
@@ -2975,7 +2975,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
align-items: center;
}
-.emotion-20 {
+.emotion-28 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -2993,86 +2993,86 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
row-gap: 8px;
}
-.emotion-20 > button:first-child,
-.emotion-20 > div:first-child {
+.emotion-28 > button:first-child,
+.emotion-28 > div:first-child {
margin-left: 0;
}
-.emotion-20 > button:last-child,
-.emotion-20 > div:last-child {
+.emotion-28 > button:last-child,
+.emotion-28 > div:last-child {
margin-right: 0;
}
-.emotion-20 > div {
+.emotion-28 > div {
margin: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
-.emotion-20 > div button:nth-child(2) {
+.emotion-28 > div button:nth-child(2) {
width: 40px;
}
-.emotion-20 > div:first-child:not(:only-child) button {
+.emotion-28 > div:first-child:not(:only-child) button {
border-radius: 8px 0 0 8px;
border-right: 0;
}
-.emotion-20 > div:nth-child(2) button {
+.emotion-28 > div:nth-child(2) button {
border-left: 1px solid #FFFFFF;
}
-.emotion-20 > div:not(:first-child) button {
+.emotion-28 > div:not(:first-child) button {
border-radius: 0;
border-right: 1px solid #FFFFFF;
}
-.emotion-20 > div:not(:first-child).emotion-20 > div:not(:last-child) button {
+.emotion-28 > div:not(:first-child).emotion-28 > div:not(:last-child) button {
border-right: 0;
}
-.emotion-20 > div:last-child:not(:only-child) button {
+.emotion-28 > div:last-child:not(:only-child) button {
border-radius: 0 8px 8px 0;
border-right: 1px solid #FFFFFF;
}
-.emotion-20 > button {
+.emotion-28 > button {
margin: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
-.emotion-20 > button:first-child:not(:only-child) {
+.emotion-28 > button:first-child:not(:only-child) {
border-radius: 8px 0 0 8px;
border-right: 0;
}
-.emotion-20 > button:nth-child(2) {
+.emotion-28 > button:nth-child(2) {
border-left: 1px solid #FFFFFF;
}
-.emotion-20 > button:not(:first-child) {
+.emotion-28 > button:not(:first-child) {
border-radius: 0;
border-right: 1px solid #FFFFFF;
}
-.emotion-20 > button:not(:first-child).emotion-20 > button:not(:last-child) {
+.emotion-28 > button:not(:first-child).emotion-28 > button:not(:last-child) {
border-right: 0;
}
-.emotion-20 > button:last-child:not(:only-child) {
+.emotion-28 > button:last-child:not(:only-child) {
border-radius: 0 8px 8px 0;
border-right: 1px solid #FFFFFF;
}
-.emotion-11 {
+.emotion-14 {
display: inline-block;
position: relative;
}
-.emotion-7 {
+.emotion-9 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -3121,19 +3121,19 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
padding-right: 8px;
}
-.emotion-7:not(:disabled):focus {
+.emotion-9:not(:disabled):focus {
outline: 2px solid #0074B7;
outline-offset: 2px;
z-index: 1;
}
-.emotion-7:not(:disabled):hover,
-.emotion-7:not(:disabled):focus {
+.emotion-9:not(:disabled):hover,
+.emotion-9:not(:disabled):focus {
background: #292F7C;
color: #FFFFFF;
}
-.emotion-7:not(:disabled):after {
+.emotion-9:not(:disabled):after {
background: #FFFFFF;
border-radius: 50%;
content: '';
@@ -3152,12 +3152,12 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
width: 28px;
}
-.emotion-7:not(:disabled):active {
+.emotion-9:not(:disabled):active {
background: #1A1E51;
color: #FFFFFF;
}
-.emotion-7:not(:disabled):active:after {
+.emotion-9:not(:disabled):active:after {
opacity: 0.4;
-webkit-transform: translate(-50%,-50%) scale(0);
-ms-transform: translate(-50%,-50%) scale(0);
@@ -3167,7 +3167,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
transition: transform 0s;
}
-.emotion-7 svg {
+.emotion-9 svg {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -3177,7 +3177,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
padding-right: 8px;
}
-.emotion-10 {
+.emotion-13 {
background: #FFFFFF;
border: 1px solid #D4D4D4;
border-radius: 8px;
@@ -3212,11 +3212,11 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
outline-offset: 0;
}
-.emotion-10:focus {
+.emotion-13:focus {
outline: 2px solid #0074B7;
}
-.emotion-9 {
+.emotion-11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -3235,23 +3235,23 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
white-space: nowrap;
}
-.emotion-9:hover,
-.emotion-9:focus {
+.emotion-11:hover,
+.emotion-11:focus {
background: #F5F5F5;
}
-.emotion-9:focus {
+.emotion-11:focus {
outline-color: #0074B7;
outline-offset: -2px;
}
-.emotion-9:active {
+.emotion-11:active {
outline-color: #0074B7;
}
@@ -3268,12 +3268,12 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
@@ -3324,12 +3324,12 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
diff --git a/packages/react-magma-dom/src/components/ButtonGroup/index.tsx b/packages/react-magma-dom/src/components/ButtonGroup/index.tsx
index 182a85bf3..36b60ed4e 100644
--- a/packages/react-magma-dom/src/components/ButtonGroup/index.tsx
+++ b/packages/react-magma-dom/src/components/ButtonGroup/index.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import styled from '../../theme/styled';
+import styled, { CreateStyled } from '@emotion/styled';
import { ThemeContext } from '../../theme/ThemeContext';
import { ThemeInterface } from '../../theme/magma';
@@ -83,6 +83,9 @@ export interface ButtonGroupContextInterface {
isInverse?: boolean;
}
+const typedStyled = styled as CreateStyled
;
+
+
export const ButtonGroupContext =
React.createContext({});
@@ -138,7 +141,7 @@ function buildNoSpaceBorderColor(props) {
return props.theme.colors.neutral100;
}
-const StyledButtonGroup = styled.div<{
+const StyledButtonGroup = typedStyled.div<{
alignment?: ButtonGroupAlignment;
color?: ButtonColor;
isInverse?: Boolean;
diff --git a/packages/react-magma-dom/src/components/Card/Card.tsx b/packages/react-magma-dom/src/components/Card/Card.tsx
index e389dd990..7cc8e2474 100644
--- a/packages/react-magma-dom/src/components/Card/Card.tsx
+++ b/packages/react-magma-dom/src/components/Card/Card.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { css } from '@emotion/core';
-import styled from '../../theme/styled';
+import styled, { CreateStyled } from '@emotion/styled';
import { ThemeContext } from '../../theme/ThemeContext';
import { ThemeInterface } from '../../theme/magma';
import { useIsInverse } from '../../inverse';
@@ -54,6 +54,8 @@ export enum CardCalloutType {
info = 'info',
}
+const typedStyled = styled as CreateStyled;
+
export function buildCalloutBackground(
props: CardProps & { theme: ThemeInterface }
) {
@@ -86,7 +88,7 @@ export function buildCalloutBackground(
}
}
-const StyledCard = styled.div`
+const StyledCard = typedStyled.div`
background: ${props =>
props.background
? props.background
diff --git a/packages/react-magma-dom/src/components/Card/CardBody.tsx b/packages/react-magma-dom/src/components/Card/CardBody.tsx
index 4510788ea..f74831370 100644
--- a/packages/react-magma-dom/src/components/Card/CardBody.tsx
+++ b/packages/react-magma-dom/src/components/Card/CardBody.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import styled from '../../theme/styled';
+import styled, { CreateStyled } from '@emotion/styled';
import { CardProps } from '../Card';
import { ThemeContext } from '../../theme/ThemeContext';
+import { ThemeInterface } from '../../theme/magma';
/**
* @children required
@@ -14,7 +15,9 @@ export interface CardBodyProps
testId?: string;
}
-const StyledCardBody = styled.div`
+const typedStyled = styled as CreateStyled;
+
+const StyledCardBody = typedStyled.div`
padding: ${props => props.theme.spaceScale.spacing05};
text-align: ${props => props.align};
font-family: ${props => props.theme.bodyFont};
diff --git a/packages/react-magma-dom/src/components/Card/CardHeading.tsx b/packages/react-magma-dom/src/components/Card/CardHeading.tsx
index c4b016725..ced76be77 100644
--- a/packages/react-magma-dom/src/components/Card/CardHeading.tsx
+++ b/packages/react-magma-dom/src/components/Card/CardHeading.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import styled from '../../theme/styled';
+import styled from '@emotion/styled';
import { CardContext } from './Card';
import { Heading } from '../Heading';
import { TypographyColor, TypographyVisualStyle } from '../Typography';
diff --git a/packages/react-magma-dom/src/components/CharacterCounter/CharacterCounter.tsx b/packages/react-magma-dom/src/components/CharacterCounter/CharacterCounter.tsx
index 21dd02788..9dce8579c 100644
--- a/packages/react-magma-dom/src/components/CharacterCounter/CharacterCounter.tsx
+++ b/packages/react-magma-dom/src/components/CharacterCounter/CharacterCounter.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
-import styled from '../../theme/styled';
import { InputMessage } from '../Input/InputMessage';
-import { magma } from '../../theme/magma';
+import { ThemeInterface, magma } from '../../theme/magma';
import { I18nContext } from '../../i18n';
+import styled, { CreateStyled } from '@emotion/styled';
export interface CharacterCounterProps
extends React.HTMLAttributes {
@@ -37,6 +37,8 @@ export interface CharacterCounterProps
testId?: string;
}
+const typedStyled = styled as CreateStyled;
+
// Changes the font weight to bold based on maxCount.
function buildFontWeight(props: Omit) {
if (
@@ -48,7 +50,7 @@ function buildFontWeight(props: Omit) {
return 'inherit';
}
-const StyledInputMessage = styled(InputMessage)<{
+const StyledInputMessage = typedStyled(InputMessage)<{
hasCharacterCounter?: boolean;
inputLength: number;
maxLength: number;
diff --git a/packages/react-magma-dom/src/components/Checkbox/index.tsx b/packages/react-magma-dom/src/components/Checkbox/index.tsx
index 7d94781ba..02031b4cb 100644
--- a/packages/react-magma-dom/src/components/Checkbox/index.tsx
+++ b/packages/react-magma-dom/src/components/Checkbox/index.tsx
@@ -77,7 +77,7 @@ export interface CheckboxProps
/**
* Action that fires when selected value of the checkbox changes
*/
- onChange?: (event: React.ChangeEvent) => void;
+ onChange?: (event: React.ChangeEvent) => void;
/**
* @internal
*/
@@ -87,6 +87,10 @@ export interface CheckboxProps
* @default CheckboxTextPosition.right
*/
textPosition?: CheckboxTextPosition;
+ /**
+ * @internal
+ */
+ hideFocus?: boolean;
}
export const HiddenLabelText = styled.span`
@@ -120,6 +124,7 @@ export const StyledFakeInput = styled.span<{
isIndeterminate?: boolean;
isInverse?: boolean;
hasError?: boolean;
+ hideFocus?: boolean;
textPosition?: CheckboxTextPosition;
theme?: any;
}>`
@@ -141,7 +146,7 @@ export const StyledFakeInput = styled.span<{
${HiddenInput}:focus + label & {
&:before {
- ${props => buildDisplayInputFocusStyles(props)};
+ ${props => !props.hideFocus && buildDisplayInputFocusStyles(props)};
}
}
@@ -244,6 +249,7 @@ export const Checkbox = React.forwardRef(
color={color}
disabled={disabled}
hasError={hasError}
+ hideFocus={props.hideFocus}
isInverse={isInverse}
style={inputStyle}
textPosition={textPosition}
diff --git a/packages/react-magma-dom/src/components/Combobox/Combobox.tsx b/packages/react-magma-dom/src/components/Combobox/Combobox.tsx
index 4cf478143..8dbf8ed47 100644
--- a/packages/react-magma-dom/src/components/Combobox/Combobox.tsx
+++ b/packages/react-magma-dom/src/components/Combobox/Combobox.tsx
@@ -247,7 +247,7 @@ export function InternalCombobox(props: ComboboxProps) {
.replace(/\{labelText\}/g, labelText)
.replace(/\{selectedItem\}/g, itemToString(selectedItem));
- function handleOnKeyDown(event: React.KeyboardEvent) {
+ function handleOnKeyDown(event: any) {
const count = document.querySelectorAll('[aria-modal="true"]').length;
if (event.key === 'Escape') {
@@ -258,8 +258,8 @@ export function InternalCombobox(props: ComboboxProps) {
}
onInputKeyDown &&
- typeof onInputKeyDown === 'function' &&
- onInputKeyDown(event);
+ typeof onInputKeyDown === 'function' &&
+ onInputKeyDown(event);
}
return (
diff --git a/packages/react-magma-dom/src/components/Combobox/ComboboxInput.tsx b/packages/react-magma-dom/src/components/Combobox/ComboboxInput.tsx
index 29f88a427..43419eb84 100644
--- a/packages/react-magma-dom/src/components/Combobox/ComboboxInput.tsx
+++ b/packages/react-magma-dom/src/components/Combobox/ComboboxInput.tsx
@@ -115,9 +115,9 @@ interface ComboboxInputProps {
isTypeahead?: boolean;
onInputBlur?: (event: React.FocusEvent) => void;
onInputFocus?: (event: React.FocusEvent) => void;
- onInputKeyDown?: (event: React.KeyboardEvent) => void;
- onInputKeyPress?: (event: React.KeyboardEvent) => void;
- onInputKeyUp?: (event: React.KeyboardEvent) => void;
+ onInputKeyDown?: (event: any) => void;
+ onInputKeyPress?: (event: any) => void;
+ onInputKeyUp?: (event: any) => void;
placeholder?: string;
selectedItems?: React.ReactNode;
toggleButtonRef?: React.Ref;
diff --git a/packages/react-magma-dom/src/components/Combobox/MultiCombobox.tsx b/packages/react-magma-dom/src/components/Combobox/MultiCombobox.tsx
index 316ae2a76..154456390 100644
--- a/packages/react-magma-dom/src/components/Combobox/MultiCombobox.tsx
+++ b/packages/react-magma-dom/src/components/Combobox/MultiCombobox.tsx
@@ -345,7 +345,7 @@ export function MultiCombobox(props: MultiComboboxProps) {
) : null;
- function handleOnKeyDown(event: React.KeyboardEvent) {
+ function handleOnKeyDown(event: any) {
const count = document.querySelectorAll('[aria-modal="true"]').length;
if (event.key === 'Escape') {
diff --git a/packages/react-magma-dom/src/components/Datagrid/Datagrid.test.js b/packages/react-magma-dom/src/components/Datagrid/Datagrid.test.js
index 703066f90..d1f91b718 100644
--- a/packages/react-magma-dom/src/components/Datagrid/Datagrid.test.js
+++ b/packages/react-magma-dom/src/components/Datagrid/Datagrid.test.js
@@ -4,7 +4,7 @@ import { Datagrid } from '.';
import { TableRowColor } from '../Table';
import { Button } from '../Button';
import { usePagination } from '../Pagination/usePagination';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
import { magma } from '../../theme/magma';
const columns = [
@@ -722,7 +722,15 @@ describe('Datagrid', () => {
/>
);
- fireEvent.change(getByTestId('rowPerPageSelect'), { target: { value: 20 }});
+ fireEvent.change(getByTestId('rowPerPageSelect'), {
+ target: { value: 20 },
+ });
+
+ const appliedSelection = document.querySelector(
+ 'select[data-testid=rowPerPageSelect]'
+ );
+
+ expect(appliedSelection).toHaveDisplayValue('20');
expect(onRowsPerPageChange).toBeCalledWith(
pagination.rowsPerPageValues[1].toString()
diff --git a/packages/react-magma-dom/src/components/Datagrid/Datagrid.tsx b/packages/react-magma-dom/src/components/Datagrid/Datagrid.tsx
index 7c1e12dfd..45ff098f9 100644
--- a/packages/react-magma-dom/src/components/Datagrid/Datagrid.tsx
+++ b/packages/react-magma-dom/src/components/Datagrid/Datagrid.tsx
@@ -187,14 +187,14 @@ export const Datagrid = React.forwardRef(
default: paginationProps.defaultPage || 1,
});
- React.useEffect(() => {
- setRowsToShow(hasPagination ? getPageItems(currentPage) : rows);
- }, [currentPage, rowsPerPage]);
-
React.useEffect(() => {
setRowsToShow(rows);
}, [rows]);
+ React.useEffect(() => {
+ setRowsToShow(hasPagination ? getPageItems(currentPage) : rows);
+ }, [currentPage, rowsPerPage]);
+
const { Pagination } = defaultComponents({
...customComponents,
});
diff --git a/packages/react-magma-dom/src/components/DatePicker/CalendarDay.tsx b/packages/react-magma-dom/src/components/DatePicker/CalendarDay.tsx
index 38bafaae7..2d654c939 100644
--- a/packages/react-magma-dom/src/components/DatePicker/CalendarDay.tsx
+++ b/packages/react-magma-dom/src/components/DatePicker/CalendarDay.tsx
@@ -1,12 +1,13 @@
import * as React from 'react';
import { ThemeContext } from '../../theme/ThemeContext';
-import styled from '../../theme/styled';
import { isAfter, isBefore, isSameDay } from 'date-fns';
import { enUS } from 'date-fns/locale';
import { CalendarContext } from './CalendarContext';
import { I18nContext } from '../../i18n';
import { i18nFormat as format } from './utils';
import { transparentize } from 'polished';
+import styled, { CreateStyled } from '@emotion/styled';
+import { ThemeInterface } from '../../theme/magma';
interface CalendarDayProps {
day: Date;
@@ -15,6 +16,8 @@ interface CalendarDayProps {
onDateChange?: (day: Date, event: React.SyntheticEvent) => void;
}
+const typedStyled = styled as CreateStyled;
+
function buildCalendarDayBackground(props) {
if (props.isInverse) {
if (props.isChosen) {
@@ -48,7 +51,7 @@ function buildCalendarDayColor(props) {
return props.theme.colors.neutral;
}
-const CalendarDayCell = styled.td<{
+const CalendarDayCell = typedStyled.td<{
isInverse?: boolean;
}>`
border: 1px solid
@@ -68,7 +71,7 @@ const CalendarDayCell = styled.td<{
width: ${props => props.theme.spaceScale.spacing09};
`;
-const CalendarDayInner = styled.button<{
+const CalendarDayInner = typedStyled.button<{
isChosen?: boolean;
isFocused?: boolean;
isInverse?: boolean;
@@ -120,12 +123,12 @@ const CalendarDayInner = styled.button<{
}
`;
-const EmptyCell = styled.td`
+const EmptyCell = typedStyled.td`
border: 0;
padding: 0;
`;
-const TodayIndicator = styled.span<{
+const TodayIndicator = typedStyled.span<{
isInverse?: boolean;
}>`
border-left: 8px solid
diff --git a/packages/react-magma-dom/src/components/DatePicker/CalendarHeader.tsx b/packages/react-magma-dom/src/components/DatePicker/CalendarHeader.tsx
index 217aae829..977f9df0e 100644
--- a/packages/react-magma-dom/src/components/DatePicker/CalendarHeader.tsx
+++ b/packages/react-magma-dom/src/components/DatePicker/CalendarHeader.tsx
@@ -7,17 +7,20 @@ import { IconButton } from '../IconButton';
import { ThemeContext } from '../../theme/ThemeContext';
import { addMonths, subMonths } from 'date-fns';
import { enUS } from 'date-fns/locale';
-import styled from '../../theme/styled';
import { useForkedRef, usePrevious } from '../../utils';
import { i18nFormat as format } from './utils';
import { I18nContext } from '../../i18n';
+import styled, { CreateStyled } from '@emotion/styled';
+import { ThemeInterface } from '../../theme/magma';
interface CalendarHeaderProps {
focusHeader?: boolean;
isInverse?: boolean;
}
-const CalendarHeaderContainer = styled.div`
+const typedStyled = styled as CreateStyled;
+
+const CalendarHeaderContainer = typedStyled.div`
align-items: center;
display: flex;
padding: ${props => props.theme.spaceScale.spacing10} 0
@@ -25,14 +28,14 @@ const CalendarHeaderContainer = styled.div`
margin-top: -${props => props.theme.spaceScale.spacing01};
`;
-const CalendarIconButton = styled.div<{ next?: boolean }>`
+const CalendarIconButton = typedStyled.div<{ next?: boolean }>`
flex-grow: 0;
flex-width: 10%;
flex-basis: 10%;
order: ${props => (props.next ? 2 : 0)};
`;
-const CalendarHeaderText = styled.div<{ isInverse?: boolean }>`
+const CalendarHeaderText = typedStyled.div<{ isInverse?: boolean }>`
caption-side: initial;
color: ${props =>
props.isInverse
diff --git a/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx b/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx
index f9963f26f..ad4c4aff0 100644
--- a/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx
+++ b/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx
@@ -7,11 +7,12 @@ import { CalendarContext } from './CalendarContext';
import { CalendarHeader } from './CalendarHeader';
import { CalendarDay } from './CalendarDay';
import { ThemeContext } from '../../theme/ThemeContext';
-import styled from '../../theme/styled';
import { HelperInformation } from './HelperInformation';
import { usePrevious } from '../../utils';
import { I18nContext } from '../../i18n';
import { useFocusLock } from '../../hooks/useFocusLock';
+import styled, { CreateStyled } from '@emotion/styled';
+import { ThemeInterface } from '../../theme/magma';
interface CalendarMonthProps {
calendarOpened?: boolean;
@@ -21,7 +22,9 @@ interface CalendarMonthProps {
setDateFocused?: (value: boolean) => void;
}
-const CalendarContainer = styled.div<{ isInverse?: boolean }>`
+const typedStyled = styled as CreateStyled;
+
+const CalendarContainer = typedStyled.div<{ isInverse?: boolean }>`
background: ${props =>
props.isInverse
? props.theme.colors.primary500
@@ -31,7 +34,7 @@ const CalendarContainer = styled.div<{ isInverse?: boolean }>`
overflow: visible;
`;
-const MonthContainer = styled.div<{ isInverse?: boolean }>`
+const MonthContainer = typedStyled.div<{ isInverse?: boolean }>`
background: ${props =>
props.isInverse
? props.theme.colors.primary500
@@ -42,13 +45,13 @@ const MonthContainer = styled.div<{ isInverse?: boolean }>`
vertical-align: top;
`;
-const Table = styled.table`
+const Table = typedStyled.table`
border-collapse: collapse;
border-spacing: 0;
margin-bottom: ${props => props.theme.spaceScale.spacing03};
`;
-const Th = styled.th<{ isInverse?: boolean }>`
+const Th = typedStyled.th<{ isInverse?: boolean }>`
border: 0;
color: ${props =>
props.isInverse
diff --git a/packages/react-magma-dom/src/components/DatePicker/DatePicker.stories.tsx b/packages/react-magma-dom/src/components/DatePicker/DatePicker.stories.tsx
index 6bcb696a2..c6816fa62 100644
--- a/packages/react-magma-dom/src/components/DatePicker/DatePicker.stories.tsx
+++ b/packages/react-magma-dom/src/components/DatePicker/DatePicker.stories.tsx
@@ -5,6 +5,8 @@ import { defaultI18n } from '../../i18n/default';
import { magma } from '../../theme/magma';
import { LabelPosition } from '../Label';
import { Meta } from '@storybook/react/types-6-0';
+import { isValid } from 'date-fns';
+import { getDateFromString, inDateRange } from './utils';
const today: Date = new Date();
@@ -103,3 +105,54 @@ Inverse.args = {
...Default.args,
isInverse: true,
};
+
+export const Events = args => {
+ const [chosenDate, setChosenDate] = React.useState(
+ undefined
+ );
+
+ function handleDateChange(newChosenDate: Date) {
+ setChosenDate(newChosenDate);
+ }
+
+ function hasErrorMessage() {
+ const convertedMinDate = getDateFromString(args.minDate);
+ const convertedMaxDate = getDateFromString(args.maxDate);
+
+ if (!chosenDate) {
+ return;
+ } else if (!inDateRange(chosenDate, convertedMinDate, convertedMaxDate)) {
+ return `Please enter a date within the range ${args.minDate} - ${args.maxDate}`;
+ } else if (!isValid(chosenDate)) {
+ return 'Please enter a valid date';
+ }
+
+ return;
+ }
+
+ return (
+
+
+ Chosen Date:
+ {chosenDate && (
+
+ {`${
+ chosenDate.getMonth() + 1
+ }/${chosenDate.getDate()}/${chosenDate.getFullYear()}`}
+
+ )}
+
+
+