diff --git a/packages/annotations/src/AnnotationLink.tsx b/packages/annotations/src/AnnotationLink.tsx
index f48e4c1a1a..75601e043a 100644
--- a/packages/annotations/src/AnnotationLink.tsx
+++ b/packages/annotations/src/AnnotationLink.tsx
@@ -32,6 +32,7 @@ export const AnnotationLink = ({
style.strokeWidth =
theme.annotations.link.strokeWidth + theme.annotations.link.outlineWidth * 2
style.stroke = theme.annotations.link.outlineColor
+ style.opacity = theme.annotations.link.outlineOpacity
}
return
diff --git a/packages/annotations/src/CircleAnnotationOutline.tsx b/packages/annotations/src/CircleAnnotationOutline.tsx
index 51f6f129c1..e045375bfa 100644
--- a/packages/annotations/src/CircleAnnotationOutline.tsx
+++ b/packages/annotations/src/CircleAnnotationOutline.tsx
@@ -27,6 +27,7 @@ export const CircleAnnotationOutline = ({ x, y, size }: { x: number; y: number;
theme.annotations.outline.strokeWidth +
theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
+ opacity: theme.annotations.outline.outlineOpacity,
}}
/>
)}
diff --git a/packages/annotations/src/DotAnnotationOutline.tsx b/packages/annotations/src/DotAnnotationOutline.tsx
index b07f1b37ff..9abfe85203 100644
--- a/packages/annotations/src/DotAnnotationOutline.tsx
+++ b/packages/annotations/src/DotAnnotationOutline.tsx
@@ -34,6 +34,7 @@ export const DotAnnotationOutline = ({
fill: 'none',
strokeWidth: theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
+ opacity: theme.annotations.outline.outlineOpacity,
}}
/>
)}
diff --git a/packages/annotations/src/RectAnnotationOutline.tsx b/packages/annotations/src/RectAnnotationOutline.tsx
index 10f5f6b204..0f742ec8df 100644
--- a/packages/annotations/src/RectAnnotationOutline.tsx
+++ b/packages/annotations/src/RectAnnotationOutline.tsx
@@ -43,6 +43,7 @@ export const RectAnnotationOutline = ({
theme.annotations.outline.strokeWidth +
theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
+ opacity: theme.annotations.outline.outlineOpacity,
}}
/>
)}
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
index 9057c0c6e6..61a5dd995c 100644
--- a/packages/core/index.d.ts
+++ b/packages/core/index.d.ts
@@ -114,23 +114,27 @@ declare module '@nivo/core' {
fill: string
outlineWidth: number
outlineColor: string
+ outlineOpacity: number
} & Partial>
link: {
stroke: string
strokeWidth: number
outlineWidth: number
outlineColor: string
+ outlineOpacity: number
} & Partial>
outline: {
stroke: string
strokeWidth: number
outlineWidth: number
outlineColor: string
+ outlineOpacity: number
} & Partial>
symbol: {
fill: string
outlineWidth: number
outlineColor: string
+ outlineOpacity: number
} & Partial>
}
}
diff --git a/packages/core/src/theming/defaultTheme.js b/packages/core/src/theming/defaultTheme.js
index 6fab13331c..37ddd46baa 100644
--- a/packages/core/src/theming/defaultTheme.js
+++ b/packages/core/src/theming/defaultTheme.js
@@ -99,12 +99,14 @@ export const defaultTheme = {
fontSize: 13,
outlineWidth: 2,
outlineColor: '#ffffff',
+ outlineOpacity: 1,
},
link: {
stroke: '#000000',
strokeWidth: 1,
outlineWidth: 2,
outlineColor: '#ffffff',
+ outlineOpacity: 1,
},
outline: {
fill: 'none',
@@ -112,11 +114,13 @@ export const defaultTheme = {
strokeWidth: 2,
outlineWidth: 2,
outlineColor: '#ffffff',
+ outlineOpacity: 1,
},
symbol: {
fill: '#000000',
outlineWidth: 2,
outlineColor: '#ffffff',
+ outlineOpacity: 1,
},
},
}
diff --git a/website/src/components/components/api-client/ApiTabs.tsx b/website/src/components/components/api-client/ApiTabs.tsx
index f971073bee..9dc129255e 100644
--- a/website/src/components/components/api-client/ApiTabs.tsx
+++ b/website/src/components/components/api-client/ApiTabs.tsx
@@ -1,5 +1,4 @@
import React, { useState } from 'react'
-import PropTypes from 'prop-types'
import styled, { keyframes } from 'styled-components'
import media from '../../../theming/mediaQueries'
import { useTheme } from '../../../theming/context'
@@ -9,7 +8,7 @@ import { ApiPreview } from './ApiPreview'
const tabs = ['preview', 'body', 'data'] as const
type Tab = typeof tabs[number]
-interface ApiTabsProps {
+interface ApiTabsProps {
chartClass: string
data: Data
body: Body
@@ -25,7 +24,7 @@ export function ApiTabs({
isLoading,
responseStatus,
chartUrl,
-}: ApiTabsProps) {
+}: ApiTabsProps) {
const theme = useTheme()
const [currentTab, setCurrentTab] = useState('preview')
@@ -66,11 +65,6 @@ export function ApiTabs({
)
}
-ApiTabs.propTypes = {
- chartClass: PropTypes.string.isRequired,
- data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
-}
-
const Wrapper = styled.div`
position: fixed;
top: ${({ theme }) => theme.dimensions.headerHeight}px;
diff --git a/website/src/components/controls/Control.tsx b/website/src/components/controls/Control.tsx
index 0120766530..04a7c33526 100644
--- a/website/src/components/controls/Control.tsx
+++ b/website/src/components/controls/Control.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, ReactNode, PropsWithChildren } from 'react'
+import React, { useState, useCallback, PropsWithChildren } from 'react'
import intersection from 'lodash/intersection'
import styled from 'styled-components'
import { MdKeyboardArrowRight, MdKeyboardArrowDown } from 'react-icons/md'
@@ -9,10 +9,10 @@ import { Cell } from './styled'
interface ControlProps {
id: string
- description?: ReactNode
+ description?: string
flavors: Flavor[]
currentFlavor: Flavor
- supportedFlavors: Flavor[]
+ supportedFlavors?: Flavor[]
}
export const Control = ({
@@ -47,9 +47,9 @@ export const Control = ({
)}
{children}
{showFlavors && (
-
+
)}
- {showDescription && }
+ {description && showDescription && }
)
}
diff --git a/website/src/components/controls/OpacityControl.tsx b/website/src/components/controls/OpacityControl.tsx
index b5fff36a9d..4ca15fa1cc 100644
--- a/website/src/components/controls/OpacityControl.tsx
+++ b/website/src/components/controls/OpacityControl.tsx
@@ -29,6 +29,7 @@ export const OpacityControl = ({
currentFlavor,
value,
onChange,
+ context,
}: OpacityControlProps) => {
const theme = useTheme()
const handleChange = useCallback(
@@ -46,7 +47,7 @@ export const OpacityControl = ({
currentFlavor={currentFlavor}
supportedFlavors={property.flavors}
>
-
+