Ab/document tokens #1332
Ab/document tokens #1332
Conversation
| import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"; | ||
| import { theme } from "@okta/odyssey-react/dist/components/TextArea/TextArea.theme"; | ||
| import { ThemeTable } from "../_internal/ThemeTable"; | ||
|
|
||
| # TextArea | ||
|
|
||
| TextArea allows users to edit and input data. | ||
|
|
||
| <Canvas> | ||
| <Story id="components-textarea--default" /> | ||
| </Canvas> | ||
|
|
||
| ## Props | ||
|
|
||
| <ArgsTable /> | ||
|
|
||
| <ThemeTable componentThemeReducer={theme} /> | ||
|
|
||
| ## Stories | ||
|
|
||
| <Canvas> | ||
| <Story id="components-textarea--disabled" /> | ||
| </Canvas> | ||
|
|
||
| <Canvas> | ||
| <Story id="components-textarea--optional" /> | ||
| </Canvas> |
There was a problem hiding this comment.
Thanks for adding these missing pages!
| /*! | ||
| * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. | ||
| * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") | ||
| * | ||
| * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||
| * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * | ||
| * See the License for the specific language governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| /* eslint-disable import/no-extraneous-dependencies */ |
There was a problem hiding this comment.
In the past I have put these kinds of internal components in packages/odyssey-storybook/.storybook/components
I would like for us to stay consistent, but have no preference as to where these things should live. Will defer to you.
There was a problem hiding this comment.
Moved in 3edfdbe
Feels better to have them out of src
| <Table.DataCell> | ||
| <Text as="code">{componentVariables[variable]}</Text> | ||
| </Table.DataCell> | ||
| <Table.DataCell format={"num"}> |
There was a problem hiding this comment.
nitpick
| <Table.DataCell format={"num"}> | |
| <Table.DataCell format="num"> |
There was a problem hiding this comment.
addressed in 3edfdbe
| <Table.Row> | ||
| <Table.HeaderCell scope="col">Variable Name</Table.HeaderCell> | ||
| <Table.HeaderCell scope="col">Token Value</Table.HeaderCell> | ||
| <Table.HeaderCell scope="col" format={"num"}></Table.HeaderCell> |
There was a problem hiding this comment.
nitpick
| <Table.HeaderCell scope="col" format={"num"}></Table.HeaderCell> | |
| <Table.HeaderCell scope="col" format="num"></Table.HeaderCell> |
There was a problem hiding this comment.
addressed in 3edfdbe
| <span | ||
| style={{ | ||
| width: "1.5em", | ||
| height: "1.5em", | ||
| display: "inline-block", | ||
| boxShadow: `${val}`, | ||
| }} | ||
| ></span> |
There was a problem hiding this comment.
Out of curiosity, why not use a Box here?
There was a problem hiding this comment.
That was my initial stab, but the values that we get from the theme are absolute and the props that box wants aren't. So there's not much utility that box offers in this case. eg: here val = "0 2px 0 rgba(175, 175, 175, 0.12)" but box wants boxShadow = "default"
| </tbody> | ||
| </table> | ||
| </figure> | ||
| <TokenTables /> |
This PR adds documentation for theming, generated from theme source files, to storybook.
The Guidelines/Design tokens page contains tables with all of the available theme tokens grouped by type
Each component documentation page now contains a table with its theme variables and their default token values
