@artsy/palette 24.5.0 → 24.5.1
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
|
+
# v24.5.1 (Tue Oct 18 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(shelf): adds label to scrollbar thumb [#1212](https://github.com/artsy/palette/pull/1212) ([@dzucconi](https://github.com/dzucconi))
|
|
6
|
+
- fix(shelf): adds label to scrollbar thumb ([@dzucconi](https://github.com/dzucconi))
|
|
7
|
+
|
|
8
|
+
#### Authors: 1
|
|
9
|
+
|
|
10
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v24.5.0 (Mon Oct 17 2022)
|
|
2
15
|
|
|
3
16
|
#### 🚀 Enhancement
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Shelf/ShelfScrollBar.tsx"],"names":["ShelfScrollBar","React","memo","viewport","rest","scrollLeft","scrollWidth","clientWidth","setScrollState","trackRef","thumbRef","trackWidth","current","buildScrollBar","progress","requiresScrolling","thumbOffset","thumbWidth","updateScrollState","addEventListener","passive","window","removeEventListener","element","onMutate","mutations","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","transform","backfaceVisibility","displayName","Track","Box","TrackHitArea","Thumb","HitArea","Clickable","percentageVisible","percentageOffset","normalizedThumbWidth","normalizedThumbOffset"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { useMutationObserver } from \"../../utils/useMutationObserver\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { useClickScroll } from \"./useClickScroll\"\nimport { useDragScroll } from \"./useDragScroll\"\n\ninterface ShelfScrollBarProps extends BoxProps {\n viewport?: HTMLDivElement | null\n}\n\n/**\n * A synthetic scrollbar\n */\nexport const ShelfScrollBar: React.FC<ShelfScrollBarProps> = React.memo(\n ({ viewport, ...rest }) => {\n const [\n { scrollLeft, scrollWidth, clientWidth },\n setScrollState,\n ] = useState<ScrollState>({\n scrollLeft: viewport?.scrollLeft ?? 0,\n scrollWidth: viewport?.scrollWidth ?? 1,\n clientWidth: viewport?.clientWidth ?? 1,\n })\n\n const trackRef = useRef<HTMLDivElement | null>(null)\n const thumbRef = useRef<HTMLButtonElement | null>(null)\n\n const trackWidth = trackRef.current?.clientWidth ?? 1\n\n const {\n progress,\n requiresScrolling,\n thumbOffset,\n thumbWidth,\n } = buildScrollBar({ trackWidth, scrollLeft, scrollWidth, clientWidth })\n\n // Update scrollState on scroll and resize\n useEffect(() => {\n if (!viewport) return\n\n const updateScrollState = () => {\n setScrollState({\n scrollLeft: viewport?.scrollLeft ?? 0,\n scrollWidth: viewport?.scrollWidth ?? 1,\n clientWidth: viewport?.clientWidth ?? 1,\n })\n }\n\n updateScrollState()\n\n viewport.addEventListener(\"scroll\", updateScrollState, { passive: true })\n window.addEventListener(\"resize\", updateScrollState)\n\n return () => {\n viewport.removeEventListener(\"scroll\", updateScrollState)\n window.removeEventListener(\"resize\", updateScrollState)\n }\n }, [viewport])\n\n useMutationObserver({\n element: viewport,\n onMutate: (mutations) => {\n // Check to see if any of the mutations has either added or removed nodes\n const hasMeaningfullyMutated = mutations.some((mutation) => {\n return (\n mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n )\n })\n\n // Only update scroll state if something was added or removed\n if (!hasMeaningfullyMutated) return\n\n setScrollState({\n scrollLeft: viewport?.scrollLeft ?? 0,\n scrollWidth: viewport?.scrollWidth ?? 1,\n clientWidth: viewport?.clientWidth ?? 1,\n })\n },\n })\n\n useDragScroll({\n viewport,\n thumbRef,\n clientWidth,\n scrollWidth,\n scrollLeft,\n trackWidth,\n })\n\n useClickScroll({\n viewport,\n thumbRef,\n trackRef,\n scrollWidth,\n trackWidth,\n })\n\n return (\n <Track\n ref={trackRef as any}\n bg=\"black15\"\n role=\"scrollbar\"\n aria-orientation=\"vertical\"\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={progress}\n {...rest}\n >\n {/* Pads out hit area. Click events will propagate to underlying trackRef */}\n <TrackHitArea />\n\n {requiresScrolling && (\n <Thumb\n position=\"relative\"\n bg=\"black60\"\n height=\"100%\"\n borderRadius={3}\n width={thumbWidth}\n style={{\n transform: `translateX(${thumbOffset}px)`,\n backfaceVisibility: \"hidden\",\n }}\n >\n <HitArea ref={thumbRef as any} tabIndex={-1} />\n </Thumb>\n )}\n </Track>\n )\n }\n)\n\nShelfScrollBar.displayName = \"ShelfScrollBar\"\n\nconst Track = styled(Box)`\n position: relative;\n height: 3px;\n width: 100%;\n`\n\nconst TrackHitArea = styled(Box)`\n position: absolute;\n top: -10px;\n bottom: -10px;\n right: 0;\n left: 0;\n width: 100%;\n`\n\nconst Thumb = styled(Box)``\n\nconst HitArea = styled(Clickable)`\n position: absolute;\n top: -10px;\n bottom: -10px;\n width: 100%;\n left: 0;\n opacity: 0;\n transition: opacity 250ms;\n\n &:hover {\n opacity: 1;\n }\n\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n left: 0;\n width: 100%;\n background-color: ${themeGet(\"colors.black100\")};\n /*\n * Positioning this using top/bottom and translate each have cross-browser\n * issues in Safari. Using a hard-coded height/negative margin works on all browsers.\n */\n top: 50%;\n margin-top: -1.5px;\n height: 3px;\n }\n`\n\ninterface ScrollState {\n /** Left most scroll edge */\n scrollLeft: number\n /** Width of the underlying rail */\n scrollWidth: number\n /** Width of the viewport */\n clientWidth: number\n}\n\nexport const buildScrollBar = ({\n trackWidth,\n scrollLeft,\n scrollWidth,\n clientWidth,\n}: ScrollState & {\n /** Width of the scrollbar track */\n trackWidth: number\n}) => {\n const progress = (scrollLeft / (scrollWidth - clientWidth || 1)) * 100\n\n // Sets up a scrollbar for viewport\n const percentageVisible = clientWidth / scrollWidth\n const thumbWidth = percentageVisible * clientWidth\n const percentageOffset = scrollLeft / (scrollWidth - clientWidth || 1)\n\n // Transform it down to whatever our actual track width is as\n // it's always smaller than the target viewport.\n const normalizedThumbWidth = (thumbWidth * trackWidth) / clientWidth\n const normalizedThumbOffset =\n percentageOffset * (trackWidth - normalizedThumbWidth)\n\n const requiresScrolling = percentageVisible < 1\n\n return {\n requiresScrolling,\n progress,\n percentageVisible,\n percentageOffset,\n thumbWidth: normalizedThumbWidth,\n thumbOffset: normalizedThumbOffset,\n }\n}\n"],"file":"ShelfScrollBar.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Shelf/ShelfScrollBar.tsx"],"names":["ShelfScrollBar","React","memo","viewport","rest","scrollLeft","scrollWidth","clientWidth","setScrollState","trackRef","thumbRef","trackWidth","current","buildScrollBar","progress","requiresScrolling","thumbOffset","thumbWidth","updateScrollState","addEventListener","passive","window","removeEventListener","element","onMutate","mutations","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","transform","backfaceVisibility","displayName","Track","Box","TrackHitArea","Thumb","HitArea","Clickable","percentageVisible","percentageOffset","normalizedThumbWidth","normalizedThumbOffset"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { useMutationObserver } from \"../../utils/useMutationObserver\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { useClickScroll } from \"./useClickScroll\"\nimport { useDragScroll } from \"./useDragScroll\"\n\ninterface ShelfScrollBarProps extends BoxProps {\n viewport?: HTMLDivElement | null\n}\n\n/**\n * A synthetic scrollbar\n */\nexport const ShelfScrollBar: React.FC<ShelfScrollBarProps> = React.memo(\n ({ viewport, ...rest }) => {\n const [\n { scrollLeft, scrollWidth, clientWidth },\n setScrollState,\n ] = useState<ScrollState>({\n scrollLeft: viewport?.scrollLeft ?? 0,\n scrollWidth: viewport?.scrollWidth ?? 1,\n clientWidth: viewport?.clientWidth ?? 1,\n })\n\n const trackRef = useRef<HTMLDivElement | null>(null)\n const thumbRef = useRef<HTMLButtonElement | null>(null)\n\n const trackWidth = trackRef.current?.clientWidth ?? 1\n\n const {\n progress,\n requiresScrolling,\n thumbOffset,\n thumbWidth,\n } = buildScrollBar({ trackWidth, scrollLeft, scrollWidth, clientWidth })\n\n // Update scrollState on scroll and resize\n useEffect(() => {\n if (!viewport) return\n\n const updateScrollState = () => {\n setScrollState({\n scrollLeft: viewport?.scrollLeft ?? 0,\n scrollWidth: viewport?.scrollWidth ?? 1,\n clientWidth: viewport?.clientWidth ?? 1,\n })\n }\n\n updateScrollState()\n\n viewport.addEventListener(\"scroll\", updateScrollState, { passive: true })\n window.addEventListener(\"resize\", updateScrollState)\n\n return () => {\n viewport.removeEventListener(\"scroll\", updateScrollState)\n window.removeEventListener(\"resize\", updateScrollState)\n }\n }, [viewport])\n\n useMutationObserver({\n element: viewport,\n onMutate: (mutations) => {\n // Check to see if any of the mutations has either added or removed nodes\n const hasMeaningfullyMutated = mutations.some((mutation) => {\n return (\n mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n )\n })\n\n // Only update scroll state if something was added or removed\n if (!hasMeaningfullyMutated) return\n\n setScrollState({\n scrollLeft: viewport?.scrollLeft ?? 0,\n scrollWidth: viewport?.scrollWidth ?? 1,\n clientWidth: viewport?.clientWidth ?? 1,\n })\n },\n })\n\n useDragScroll({\n viewport,\n thumbRef,\n clientWidth,\n scrollWidth,\n scrollLeft,\n trackWidth,\n })\n\n useClickScroll({\n viewport,\n thumbRef,\n trackRef,\n scrollWidth,\n trackWidth,\n })\n\n return (\n <Track\n ref={trackRef as any}\n bg=\"black15\"\n role=\"scrollbar\"\n aria-orientation=\"vertical\"\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={progress}\n {...rest}\n >\n {/* Pads out hit area. Click events will propagate to underlying trackRef */}\n <TrackHitArea />\n\n {requiresScrolling && (\n <Thumb\n position=\"relative\"\n bg=\"black60\"\n height=\"100%\"\n borderRadius={3}\n width={thumbWidth}\n style={{\n transform: `translateX(${thumbOffset}px)`,\n backfaceVisibility: \"hidden\",\n }}\n >\n <HitArea ref={thumbRef as any} tabIndex={-1} aria-label=\"Thumb\" />\n </Thumb>\n )}\n </Track>\n )\n }\n)\n\nShelfScrollBar.displayName = \"ShelfScrollBar\"\n\nconst Track = styled(Box)`\n position: relative;\n height: 3px;\n width: 100%;\n`\n\nconst TrackHitArea = styled(Box)`\n position: absolute;\n top: -10px;\n bottom: -10px;\n right: 0;\n left: 0;\n width: 100%;\n`\n\nconst Thumb = styled(Box)``\n\nconst HitArea = styled(Clickable)`\n position: absolute;\n top: -10px;\n bottom: -10px;\n width: 100%;\n left: 0;\n opacity: 0;\n transition: opacity 250ms;\n\n &:hover {\n opacity: 1;\n }\n\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n left: 0;\n width: 100%;\n background-color: ${themeGet(\"colors.black100\")};\n /*\n * Positioning this using top/bottom and translate each have cross-browser\n * issues in Safari. Using a hard-coded height/negative margin works on all browsers.\n */\n top: 50%;\n margin-top: -1.5px;\n height: 3px;\n }\n`\n\ninterface ScrollState {\n /** Left most scroll edge */\n scrollLeft: number\n /** Width of the underlying rail */\n scrollWidth: number\n /** Width of the viewport */\n clientWidth: number\n}\n\nexport const buildScrollBar = ({\n trackWidth,\n scrollLeft,\n scrollWidth,\n clientWidth,\n}: ScrollState & {\n /** Width of the scrollbar track */\n trackWidth: number\n}) => {\n const progress = (scrollLeft / (scrollWidth - clientWidth || 1)) * 100\n\n // Sets up a scrollbar for viewport\n const percentageVisible = clientWidth / scrollWidth\n const thumbWidth = percentageVisible * clientWidth\n const percentageOffset = scrollLeft / (scrollWidth - clientWidth || 1)\n\n // Transform it down to whatever our actual track width is as\n // it's always smaller than the target viewport.\n const normalizedThumbWidth = (thumbWidth * trackWidth) / clientWidth\n const normalizedThumbOffset =\n percentageOffset * (trackWidth - normalizedThumbWidth)\n\n const requiresScrolling = percentageVisible < 1\n\n return {\n requiresScrolling,\n progress,\n percentageVisible,\n percentageOffset,\n thumbWidth: normalizedThumbWidth,\n thumbOffset: normalizedThumbOffset,\n }\n}\n"],"file":"ShelfScrollBar.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "24.5.
|
|
3
|
+
"version": "24.5.1",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -176,5 +176,5 @@
|
|
|
176
176
|
"<rootDir>/www/"
|
|
177
177
|
]
|
|
178
178
|
},
|
|
179
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "c2efaca318ddecbb23635f49028e10969ac418ff"
|
|
180
180
|
}
|