diff --git a/package.json b/package.json index 1d863f0..08b86a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "storybook-addon-recoil-flow", - "version": "1.1.0", + "version": "1.2.0", "description": "Shows a graph of the current recoil state", "main": "dist/preset.js", "scripts": { diff --git a/src/flow/info.tsx b/src/flow/info.tsx index 6bea16f..c44781c 100644 --- a/src/flow/info.tsx +++ b/src/flow/info.tsx @@ -17,6 +17,7 @@ const RecoilNodeList = ({ gap: 10px; overflow: auto; margin: 0; + padding: 15px; padding-top: 10px; padding-bottom: 10px; `} @@ -26,8 +27,20 @@ const RecoilNodeList = ({ key={node.id} css={css` cursor: pointer; - fontsize: 1rem; + font-size: 1rem; word-break: break-all; + display: flex; + align-items: center; + + &::before { + --size: 10px; + content: ""; + width: var(--size); + height: var(--size); + border-radius: var(--size); + background-color: ${node.fill}; + margin-right: 15px; + } &:hover { text-decoration: underline; diff --git a/stories/Button.tsx b/stories/Button.tsx index 2a6ddf6..14aa83f 100644 --- a/stories/Button.tsx +++ b/stories/Button.tsx @@ -1,7 +1,7 @@ import React from "react" -import { useRecoilValue } from "recoil" +import { useRecoilValue, useSetRecoilState } from "recoil" import "./button.css" -import { SelectorOne, SelectorTwo } from "./testRecoilThings" +import { AtomOne, SelectorOne, SelectorTwo } from "./testRecoilThings" interface ButtonProps { /** @@ -43,6 +43,8 @@ export const Button = ({ useRecoilValue(SelectorOne) useRecoilValue(SelectorTwo) + const increaseHelloCount = useSetRecoilState(AtomOne) + return (