你的功能请求是否与问题相关？请描述
在使用基于数字的类型刻度(如 tailwind)时，我们希望我们的颜色对象键是数字：
...
neutral: {
00: "#FFFFFF",
10: "#F5F6FF",
20: "#D4D6EC",
30: "#B1B3CE",
40: "#878AAE",
50: "#606384",
60: "#464862",
70: "#323346",
80: "#1F202C",
90: "#14151C",
},
...然而，在 TypeScript 中，这会引发与八进制用作对象键相关的编译器错误。因此，一个简单的解决方案是将 00 改为字符串： '00' - 然而，这会导致颜色调色板中的排序顺序出现问题：
另一个选择可能是使用建议的八进制语法：
然而，这会将颜色呈现为单个 0(这有点小问题):
这个问题对于 000 或其他任意数量的零也存在。
描述你希望实现的解决方案
我希望能够控制排序顺序，同时为颜色提供一个显示名称。
描述你考虑过的替代方案
接受单个 0 对于这种颜色的呈现是可以的。
你是否能协助将这个功能实现？
是的，我可以。
其他上下文
我在这里有一个分支： https://github.com/storybookjs/storybook/compare/next...pm0u:storybook:sorted-color-palette?expand=1,它允许这个功能。它不是最健壮的实现，但如果值得打开一个 PR,我可以。我在遵循这里的贡献指南时遇到了几个问题： https://storybook.js.org/docs/react/contribute/code
- 在
yarn test上运行多个测试失败 yarn start无法启动沙箱，所以我真的不知道如何查看我的更改。
6条答案
按热度按时间yeotifhr1#
+1 this
q5iwbnjs2#
我们能否想出一个解决方案，在不对
ColorPalette块做任何重大修改的情况下实现@pm0u期望的结果？我真的不想做任何更改(特别是API更改),除非这是更好地支持设计令牌的更大倡议的一部分。ttp71kqs3#
你可能也已经得出结论，唯一的真正解决方案是使用字符串作为键，因为JavaScript会忽略数字中的前导零。
错误的顺序是由于
Object.keys和Object.values对类似数字的键进行排序。目前的一个临时解决方法是在每个键后面添加一个空格 " ",根据我的实验，这可以阻止属性被排序：
我认为@pm0u在他们的分支中将颜色从对象改为数组的方法是正确的，因为这是确保属性顺序稳定的唯一方法。
我可以提出其他API的替代方案，但它们不会破坏现有功能，而且效果更差。
uelo1irk4#
我无法想到一个更好的方法来处理这个问题，而不使用像@pm0u建议的数组。回顾我的设计令牌实验，我没有一个“000”的情况来揭示这个问题。
mcdcgff05#
对于我们的使用场景，我们有类似于您截图的一系列刻度。这些是10-90。中性刻度包括00和100,分别表示全白和全黑(实际上，在我们的系统中，所有刻度在00和100处都有这些值，但这是多余的)。
这可能是一个有限的使用场景。我最初认为这对包含变音符号的语言也很有用，因为它们可能会影响排序顺序。似乎至少在Chrome中，顺序是“保留”的除非这是一个可解析的数字(无论键是字符串还是数字)。在这些情况下，
0的行为不同(至少在Chrome中)svmlkihl6#
我同意你的看法。为了更好地控制颜色列表，使用对象数组可能是一个更好的解决方案。我会在下周看看是否能为这个问题提出一个解决方案。