Unofficial static Figma frame/file viewer available as HTML CustomElement
Commits at c69dcc7ba98e4d08f8bbac3d096278fb31350b96
c69dcc7balways hide the checkmark icon from AT (#56)
vbabel
authored at
GitHub
comitted at
14d9b06bAdd keyboard support for pan and zoom actions (#58)
* add keyboard support for pan and zoom actions
* call #handleKeyDownPanOrZoom from keydown handler rather than registering new listener
comments, code style consistency
* zoom => scale, MIN/MAX_ZOOM => MIN/MAX_SCALE
* don't need to be in drag state to zoom
* define MIN/MAX_SCALE in FrameCanvas, pass as options to power of two methodsvbabel
authored at
GitHub
comitted at
0fedbbbeAdd `theme` attribute to allow the color scheme to be set by consumer (#57)
* set color-scheme to dark on :host when user prefers dark
* allow color-scheme attribute to set determine color scheme, otherwise respect user preference
set color-scheme css property for either color scheme
* spacing/tab fixes
* refactor color-scheme attribute to theme to avoid overloading color-schemevbabel
authored at
GitHub
comitted at
e8880639Use label elements with for/id attributes for preference input labelling (#53)
vbabel
authored at
GitHub
comitted at
27042357Merge pull request #52 from vbabel/victor/add-alt-text-to-frame-image
add alt text to the rendered imageShota FUJI
authored at
GitHub
comitted at
0eebc8c4Merge pull request #51 from vbabel/victor/fix-menu-overlap
Bump menubar to left width of Inspector Panel when openShota FUJI
authored at
GitHub
comitted at
b9391697fix: Cannot import the modules with Node.js ESM resolution
<https://github.com/pocka/figspec-react/issues/1>
When the bundler uses Node.js' ESM module resolution, errors occur
during an import phase. Considering today's module ecosystem and this
library targeting ES2019 environment, I believe this change is safe and
reasonable to introduce. If not, I need to re-enable CJS build...
Shota FUJI
authored at
Shota FUJI
comitted at
54bf94f4feat: Make spacing configurable
Using spacing size tokens brings consistency and prevents future patches
from breaking aesthetics (also less review cost).
Shota FUJI
authored at
Shota FUJI
comitted at
62622f99chore: Support only ESM-ES2019
The reason `target` set to `ES2015` was I thought "if it's 5yrs old,
it's safe". For the same reason, I tried to set to ES2018 but decided to
increase because:
* Even the Safari 12 mostly supports ES2019.
* Library code uses ES2019 API (`Object.fromEntries` and
`Array.prototype.flat`).
* There was no differences in built files, between `target=es2018` and
`target=es2019`.
The reason for dropping CJS is it's obsolescence. It was still used
for front-end code in 3 years ago (when I initially wrote this lib).
However, given the support status of bundlers and Node.js, I believe
dropping CJS output provides better user experience thanks to halved
package size and more maintainability.
Shota FUJI
authored at
Shota FUJI
comitted at
9ce0f16echore: Forbid unused locals
...to make code quality better.
Shota FUJI
authored at
Shota FUJI
comitted at
aae86f70feat: Feedback UI for copy operation
Previously there was no feedback for copy (CSS code, text contents)
therefore a user was not able to know whether the copy operation is
succeeded or not. This commit adds common UI (snackbar) as a feedback UI
for the copy operation.
Shota FUJI
authored at
Shota FUJI
comitted at
43f53b8fMerge pull request #46 from pocka/feature/v2-wip
v2Shota FUJI
authored at
GitHub
comitted at
f240007bdocs: Add many nodes example
In order to tackle https://github.com/pocka/figspec/issues/30
Twemoji is ideal for this purpose: a lot of nodes, complex shapes,
uniqueness among nodes.
Shota FUJI
authored at
Shota FUJI
comitted at
7956a99ffix: Do not use overflowing small <svg>
During rewriting FigspecViewer from Lit to DOM (without libraries),
I noticed not using overflowing small <svg> fixes long-standing and
thought-to-be-hard-to-fix issues at once. Since the fix is easily
appliable to the current code base, here it is.
The <svg> element works as a layer for guidelines, has had viewBox
size of `0 0 5 5` and most of the paint is rendered as overflowing
content. The problem is, this is the cause of Safari does not trigger
pointer-related actions and Blink renders guidelines at incorrect
positions (slightly shifted).
* https://github.com/pocka/figspec/issues/37
* https://github.com/pocka/figspec/issues/31
The code is there from the start[^0] and I don't remember why it being
this... my guess is limitation of being a nested custom-element and
forgot to change on the refactor[^1]. After searching for noticeable
differences using `git stash`, the only changes are those bugs fixed.
I expected overflow/scroll related issues but no noticeable regression
found.
[^0]: https://github.com/pocka/figspec/blob/2a57a99908d62f050675d365da74ad9249c281e5/packages/components/src/FigmaViewerGuide/index.ts#L152-L153
[^1]: https://github.com/pocka/figspec/commit/d8991c590cb831a443f2bf97489e4f1142eab81b#diff-a21bd58f460ace3ded3e7274f284ecb4a2e988db51fab687cc64c2dcdccc5093R345-R346
Fix confirmed on macOS Safari 16.5.2, Firefox 115.0.2 (Linux) and
Chromium 115.0.5790.110 (Linux).
Shota FUJI
authored at
Shota FUJI
comitted at
aa51b230chore: Fix ignore rule for packaged tarball
Forgot to change when ditched monorepo.
4b677892bcfe36b967e292cf8431521eb47104ae
Shota FUJI
authored at
Shota FUJI
comitted at
aeb1a82cchore: Remove Storybook
00a896342ae384ec4a450467a500da462bb77959 introduced a docs site,
which includes Storybook equivalent working examples.
Shota FUJI
authored at
Shota FUJI
comitted at