diff --git a/.storybook/main.js b/.storybook/main.js index 8baff240d..e4af93cbc 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -37,7 +37,6 @@ module.exports = { 'storybook-addon-designs', 'storybook-addon-mdx-embed', '@storybook/addon-postcss', - './register', ], webpackFinal: config => { const mdxRule = config.module.rules.find((rule) => diff --git a/.storybook/register.js b/.storybook/register.js deleted file mode 100644 index 44f8941d9..000000000 --- a/.storybook/register.js +++ /dev/null @@ -1,11 +0,0 @@ -// register.js -import { addons } from '@storybook/addons'; - -import * as FullStory from '@fullstory/browser'; - -addons.register('storybook/fullstory', () => { - FullStory.init({ - orgId: 'P6XKD', - devMode: window.location.hostname !== 'ux.palmetto.com', - }); -}); \ No newline at end of file diff --git a/package.json b/package.json index 6cfbe5df7..d7177a1d8 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@palmetto/dialog": "^0.16.4", - "@palmetto/palmetto-design-tokens": "1.6.0", + "@palmetto/palmetto-design-tokens": "1.7.2", "@popperjs/core": "^2.5.3", "classnames": "^2.2.6", "cleave.js": "^1.6.0", @@ -85,7 +85,6 @@ "@babel/plugin-transform-spread": "^7.13.0", "@babel/polyfill": "^7.10.4", "@babel/preset-react": "^7.10.4", - "@fullstory/browser": "^1.4.9", "@mdx-js/loader": "^1.6.22", "@semantic-release/changelog": "5", "@semantic-release/commit-analyzer": "^8.0.1", diff --git a/src/components/OptionTile/OptionTile.module.scss b/src/components/OptionTile/OptionTile.module.scss index 4e55db6a2..ceee76fa4 100644 --- a/src/components/OptionTile/OptionTile.module.scss +++ b/src/components/OptionTile/OptionTile.module.scss @@ -11,7 +11,7 @@ } &:hover { - border: 1px solid var(--INTERNAL_form-control-border-color-hover); + border: 1px solid var(--color-border-default); } // https://stackoverflow.com/questions/262158/disabled-input-text-color-on-ios @@ -31,7 +31,7 @@ color: var(--color-text-danger); &:hover { - border: 1px solid var(--INTERNAL_form-control-border-color-hover); + border: 1px solid var(--color-border-default); } &.disabled { @@ -75,7 +75,7 @@ } &:hover { - border: 1px solid var(--INTERNAL_form-control-border-color-selected-hover); + border: 1px solid var(--INTERNAL_form-control-border-color-selected); } } } diff --git a/src/components/OptionTileGroup/OptionTileGroup.Overview.stories.mdx b/src/components/OptionTileGroup/OptionTileGroup.Overview.stories.mdx index 4b50f8f7c..e8f0228b4 100644 --- a/src/components/OptionTileGroup/OptionTileGroup.Overview.stories.mdx +++ b/src/components/OptionTileGroup/OptionTileGroup.Overview.stories.mdx @@ -418,12 +418,12 @@ Pass an `error` to an individual option to indicate that something about that sp -## Full Width (or lack thereof) +## Full Width The OptionsTile component has fullWidth (100%) enabled by default but it can be disabled if need be. - + {() => { const [valueHorizontal, setValueHorizontal] = useState([]); const [valueVertical, setValueVertical] = useState([]); diff --git a/src/components/Popover/Popover.Overview.stories.mdx b/src/components/Popover/Popover.Overview.stories.mdx index 117e3e90c..2d6a0f9c7 100644 --- a/src/components/Popover/Popover.Overview.stories.mdx +++ b/src/components/Popover/Popover.Overview.stories.mdx @@ -113,8 +113,7 @@ You can apply a custom class to your popover with the `className` prop. Here we ## Popover Styling Because the rendered Popover is powered by our `Box` component ([Read More](/?path=/docs/components-box-overview--background)) you -can use all known box props to style it. The below example includes some of the basics, but is not representative of -the entire gamut of styling options. +can use all known box props to style it using the `contentContainerProps` prop. { const { isOpen: isPopoverOpen, handleToggle: togglePopover } = useOpenClose(); - const [popoverBackground, setPopoverBackground] = useState({ - value: 'white', - label: 'White', - }); - const [popoverFontColor, setPopoverFontColor] = useState({ - value: 'dark', - label: 'Dark', - }); - const [popoverRadius, setPopoverRadius] = useState({ - value: 'sm', - label: 'Small', - }); - const backgroundOptions = [ - { value: 'white', label: 'White' }, - { value: 'primary', label: 'Primary' }, - { value: 'secondary', label: 'Secondary' }, - { value: 'tertiary', label: 'Tertiary' }, - { value: 'warning', label: 'Warning' }, - { value: 'grey-300', label: 'Grey Light' }, - { value: 'grey-600', label: 'Grey Dark' }, - ]; - const fontColorOptions = [ - { value: 'white', label: 'White' }, - { value: 'dark', label: 'Dark' }, - ]; - const borderRadiusOptions = [ - { value: 'sm', label: 'Small' }, - { value: 'md', label: 'Medium' }, - { value: 'lg', label: 'Large' }, - ]; return ( @@ -170,9 +139,9 @@ the entire gamut of styling options. placement={'right'} contentContainerProps={{ padding: 'sm', - background: popoverBackground.value, - color: popoverFontColor.value, - radius: popoverRadius.value, + background: 'info', + color: 'white', + radius: 'md', }} > - - - { - setPopoverBackground(event.target.value); - }} - value={popoverBackground} - label="Background Color" - /> - - - { - setPopoverFontColor(event.target.value); - }} - value={popoverFontColor} - label="Font Color" - /> - - - { - setPopoverRadius(event.target.value); - }} - value={popoverRadius} - label="Border Radius" - /> - - ); }} @@ -284,8 +221,6 @@ prevent the content from getting cut off. placement={position} contentContainerProps={{ padding: 'sm', - background: 'secondary', - color: 'white', }} >