@artsy/palette 21.1.2 → 21.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
# v21.1.3 (Wed Jun 29 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(range): adds ability to label each slider [#1186](https://github.com/artsy/palette/pull/1186) ([@dzucconi](https://github.com/dzucconi))
|
|
6
|
+
- fix(range): adds ability to label each slider ([@dzucconi](https://github.com/dzucconi))
|
|
7
|
+
|
|
8
|
+
#### Authors: 1
|
|
9
|
+
|
|
10
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v21.1.2 (Thu Jun 23 2022)
|
|
2
15
|
|
|
3
16
|
#### 🐛 Bug Fix
|
|
@@ -21,7 +21,7 @@ var _Box = require("../Box");
|
|
|
21
21
|
|
|
22
22
|
var _Flex = require("../Flex");
|
|
23
23
|
|
|
24
|
-
var _excluded = ["min", "max", "step", "value", "onChange"];
|
|
24
|
+
var _excluded = ["ariaLabels", "min", "max", "step", "value", "onChange"];
|
|
25
25
|
|
|
26
26
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
27
|
|
|
@@ -47,7 +47,8 @@ var RANGE_HANDLE_SIZE = 24;
|
|
|
47
47
|
exports.RANGE_HANDLE_SIZE = RANGE_HANDLE_SIZE;
|
|
48
48
|
|
|
49
49
|
var Range = function Range(_ref) {
|
|
50
|
-
var
|
|
50
|
+
var ariaLabels = _ref.ariaLabels,
|
|
51
|
+
min = _ref.min,
|
|
51
52
|
max = _ref.max,
|
|
52
53
|
step = _ref.step,
|
|
53
54
|
_ref$value = _ref.value,
|
|
@@ -129,7 +130,8 @@ var Range = function Range(_ref) {
|
|
|
129
130
|
max: max,
|
|
130
131
|
step: step,
|
|
131
132
|
onInput: handleMinChange,
|
|
132
|
-
value: values[0]
|
|
133
|
+
value: values[0],
|
|
134
|
+
"aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels[0]
|
|
133
135
|
}), /*#__PURE__*/React.createElement(Slider, {
|
|
134
136
|
ref: maxRef,
|
|
135
137
|
min: min,
|
|
@@ -139,7 +141,8 @@ var Range = function Range(_ref) {
|
|
|
139
141
|
value: values[1],
|
|
140
142
|
style: {
|
|
141
143
|
clip: maxRectangle
|
|
142
|
-
}
|
|
144
|
+
},
|
|
145
|
+
"aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels[1]
|
|
143
146
|
}), /*#__PURE__*/React.createElement(Shadow, {
|
|
144
147
|
left: (0, _remapValue.remapValue)(values[1], {
|
|
145
148
|
min: min,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Range/Range.tsx"],"names":["RANGE_HANDLE_SIZE","Range","min","max","step","value","onChange","rest","minRef","maxRef","values","setValues","maxWidth","setMaxWidth","handleMinChange","target","valueAsNumber","handleMaxChange","current","offsetWidth","handleResize","window","addEventListener","passive","removeEventListener","selectionRectangle","maxRectangle","clip","Track","Flex","Shadow","Box","FLAT_SHADOW","Selection","railStyles","css","handleStyles","Slider","styled","input","defaultProps","type"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,iBAAiB,GAAG,EAA1B;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Range/Range.tsx"],"names":["RANGE_HANDLE_SIZE","Range","ariaLabels","min","max","step","value","onChange","rest","minRef","maxRef","values","setValues","maxWidth","setMaxWidth","handleMinChange","target","valueAsNumber","handleMaxChange","current","offsetWidth","handleResize","window","addEventListener","passive","removeEventListener","selectionRectangle","maxRectangle","clip","Track","Flex","Shadow","Box","FLAT_SHADOW","Selection","railStyles","css","handleStyles","Slider","styled","input","defaultProps","type"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n ariaLabels?: [string, string]\n min: number\n max: number\n step: number\n value?: number[]\n onChange?: (range: [min: number, max: number]) => void\n}\n\nexport const Range: React.FC<RangeProps> = ({\n ariaLabels,\n min,\n max,\n step,\n value = [0, max],\n onChange,\n ...rest\n}) => {\n const minRef = useRef<HTMLInputElement | null>(null)\n const maxRef = useRef<HTMLInputElement | null>(null)\n\n const [values, setValues] = useState(value)\n\n const [maxWidth, setMaxWidth] = useState(0)\n\n const handleMinChange = ({\n target: { valueAsNumber: value },\n }: React.ChangeEvent<HTMLInputElement>) => {\n if (value > values[1]) return\n setValues([value, values[1]])\n onChange?.([value, values[1]])\n }\n\n const handleMaxChange = ({\n target: { valueAsNumber: value },\n }: React.ChangeEvent<HTMLInputElement>) => {\n if (value < values[0]) return\n setValues([values[0], value])\n onChange?.([values[0], value])\n }\n\n useEffect(() => {\n if (!maxRef.current) return\n setMaxWidth(maxRef.current.offsetWidth)\n }, [])\n\n useEffect(() => {\n const handleResize = () => {\n if (!maxRef.current) return\n setMaxWidth(maxRef.current.offsetWidth)\n }\n\n window.addEventListener(\"resize\", handleResize, { passive: true })\n\n return () => {\n window.removeEventListener(\"resize\", handleResize)\n }\n }, [])\n\n const selectionRectangle = `rect(0, ${remapValue(\n values[1],\n { min, max },\n { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n )}px, 2px, ${remapValue(\n values[0],\n { min, max },\n { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n )}px)`\n\n const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n values[1],\n { min, max },\n { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n )}px)`\n\n return (\n <Track {...rest}>\n <Selection style={{ clip: selectionRectangle }} />\n\n <Slider\n ref={minRef as any}\n min={min}\n max={max}\n step={step}\n onInput={handleMinChange}\n value={values[0]}\n aria-label={ariaLabels?.[0]}\n />\n\n <Slider\n ref={maxRef as any}\n min={min}\n max={max}\n step={step}\n onInput={handleMaxChange}\n value={values[1]}\n style={{ clip: maxRectangle }}\n aria-label={ariaLabels?.[1]}\n />\n\n {/* Max slider is clipped so position a shadow independent of it */}\n <Shadow\n left={remapValue(\n values[1],\n { min, max },\n { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n )}\n />\n </Track>\n )\n}\n\nconst Track = styled(Flex)`\n align-items: center;\n position: relative;\n height: ${RANGE_HANDLE_SIZE}px;\n\n &:before {\n content: \"\";\n display: block;\n position: absolute;\n height: 2px;\n left: 0;\n right: 0;\n top: 50%;\n margin-top: -1px;\n background-color: ${themeGet(\"colors.black30\")};\n }\n`\n\nconst Shadow = styled(Box)`\n position: absolute;\n width: ${RANGE_HANDLE_SIZE}px;\n height: ${RANGE_HANDLE_SIZE}px;\n top: 50%;\n margin-top: -${RANGE_HANDLE_SIZE / 2}px;\n background-color: transparent;\n pointer-events: none;\n border-radius: 50%;\n box-shadow: ${FLAT_SHADOW};\n`\n\nconst Selection = styled(Box)`\n position: absolute;\n height: 2px;\n left: 0;\n right: 0;\n top: 50%;\n margin-top: -1px;\n background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n width: 100%;\n height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n user-select: none;\n cursor: grab;\n width: ${RANGE_HANDLE_SIZE}px;\n height: ${RANGE_HANDLE_SIZE}px;\n background-color: ${themeGet(\"colors.white100\")};\n border-radius: 50%;\n border: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nconst Slider = styled.input`\n appearance: none;\n background: transparent;\n position: relative;\n margin: 0;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n\n &::-webkit-slider-runnable-track {\n ${railStyles}\n }\n\n &::-moz-range-track {\n ${railStyles}\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n ${handleStyles}\n }\n\n &::-moz-range-thumb {\n ${handleStyles}\n }\n\n &:active {\n &::-webkit-slider-thumb {\n box-shadow: none;\n background-color: ${themeGet(\"colors.black5\")};\n }\n\n &::-moz-range-thumb {\n box-shadow: none;\n background-color: ${themeGet(\"colors.black5\")};\n }\n }\n\n &:first-of-type {\n &::-webkit-slider-thumb {\n box-shadow: ${FLAT_SHADOW};\n }\n\n &::-moz-range-thumb {\n box-shadow: ${FLAT_SHADOW};\n }\n }\n`\n\nSlider.defaultProps = {\n type: \"range\",\n}\n"],"file":"Range.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Range/Range.story.tsx"],"names":["title","Default","value","step","max","WithinModal","width","height","bg","InContext","min","setMinMax"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,KAAK,EAAE,CAAC,IAAD,EAAO,IAAP;AAAT,KAAL,EAA8B;AAAEC,MAAAA,IAAI,EAAE,CAAR;AAAWC,MAAAA,GAAG,EAAE;AAAhB,KAA9B;AADV,kBAGE,6BAAC,YAAD;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Range/Range.story.tsx"],"names":["title","Default","value","step","max","WithinModal","width","height","bg","InContext","min","setMinMax"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { ModalBase } from \"../Modal\"\nimport { Range, RangeProps } from \"./Range\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../..\"\nimport { Text } from \"../Text\"\n\nexport default {\n title: \"Components/Range\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<RangeProps>>\n states={[{}, { value: [1100, 3450] }, { step: 1, max: 10 }]}\n >\n <Range\n min={0}\n max={5000}\n step={10}\n onChange={action(\"onChange\")}\n ariaLabels={[\"Min price\", \"Max price\"]}\n />\n </States>\n )\n}\n\nexport const WithinModal = () => {\n return (\n <ModalBase\n width=\"100%\"\n height=\"100%\"\n dialogProps={{ width: 400, height: 400, bg: \"black5\" }}\n >\n <Box width={400} height={400}>\n <Range min={0} max={5000} step={10} onChange={action(\"onChange\")} />\n </Box>\n </ModalBase>\n )\n}\n\nexport const InContext = () => {\n const [[min, max], setMinMax] = useState<number[]>([0, 50000])\n\n return (\n <Box p={2} border=\"1px solid\" borderColor=\"black10\" width={375}>\n <Flex>\n <LabeledInput title=\"Min\" label=\"$USD\" flex={1} value={min} />\n\n <Spacer ml={1} />\n\n <LabeledInput title=\"Max\" label=\"$USD\" flex={1} value={max} />\n </Flex>\n\n <Spacer mt={1} />\n\n <Range\n min={0}\n max={50000}\n step={100}\n value={[min, max]}\n onChange={setMinMax}\n />\n\n <Spacer mt={0.5} />\n\n <Flex justifyContent=\"space-between\">\n <Text variant=\"xs\">$0</Text>\n\n <Text variant=\"xs\">$50000+</Text>\n </Flex>\n </Box>\n )\n}\n"],"file":"Range.story.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "21.1.
|
|
3
|
+
"version": "21.1.3",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -177,5 +177,5 @@
|
|
|
177
177
|
"<rootDir>/www/"
|
|
178
178
|
]
|
|
179
179
|
},
|
|
180
|
-
"gitHead": "
|
|
180
|
+
"gitHead": "dd8061414baf855bda804109d760e6ebea121e04"
|
|
181
181
|
}
|