fix: more cleanup (#900)

* BREAKING CHANGE: Dark mode support (#893) * wip * font colors * BREAKING CHANGE: background, border, font specific colors BREAKING CHANGE: background, border, font specific colors BREAKING CHANGE: Spinner variant prop changed to color * BREAKING CHANGE: ThemeProvider * feat(RadioGroup): dark mode support * feat(Accordion): dark mode support * feat(Tabs): dark mode support * feat(TabsSlider): dark mode support * dark mode tokens * Update FileUpload.tsx * Update Heading.Playground.stories.tsx * Update MediaModal.tsx * feat(Card): dark mode support * feat(Alert): dark mode support * feat(TabsSlider): dark mode support * feat(CategoryFilter): dark mode support * wip * checkboxinput * OptionTile * update pdt package with new tokens * fix build * fix lint * Update Box.tsx * checkboxinput * Update MediaModal.tsx * Update SelectInputNative.module.scss * Update Checkbox.module.scss * Update pull-request.yml * light mode button background tokens * light mode button font color tokens * light mode button border color tokens * pdt 1.3.0 * SelectInput dark mode fixes * Badge dark mode * spec body font * wip * remove internal form color tokens * remove form theming docs * wip * Toast dark mode * Toggle dark mode * Table dark mode * remove component design token documentation * more cleanup * datepicker dark mode * pdt 1.4 * Update Theming.stories.mdx * feat: Modal dark mode (#894) * feat: Modal dark mode * Update Modal.module.scss * Update Modal.module.scss * fix: bump pdt (#895) * fix: bump pdt * fix build * fix(Popover): arrowColor background color type * fix: transparent border color * fix(Table): dark mode loading state (#896) * fix(Table): dark mode loading state * Update Table.module.scss * build(deps): bump ws from 6.2.2 to 6.2.3 (#897) Bumps [ws](https://github.com/websockets/ws) from 6.2.2 to 6.2.3. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](websockets/ws@6.2.2...6.2.3) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: update color documentation * Merge branch 'main' into beta * clean up * Update Popover.VisualTests.stories.tsx * feat: document brand colors, semantic colors, and dark values * Update GetStarted.stories.mdx * fix: Alert close button color * feat: CategoryFilter dark mode tokens * docs: apply darkmode background to story canvas * fix(TextInputInset): prefix and suffix dark mode colors * fix: cleanup stories * feat(Toggle): use toggle specific background color tokens * refactor(OptionTile): hover border colors * build(deps): bump palmetto-design-tokens from 1.7.1 to 1.7.2 * fix(OptionTile): selected error text color * fix: remove fullstory --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
palmetto · Jul 16, 2024 · f6a6d77 · f6a6d77
1 parent e7e3279
commit f6a6d77
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 146 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -418,12 +418,12 @@ Pass an `error` to an individual option to indicate that something about that sp
   </Story>
 </Canvas>
 
-## Full Width (or lack thereof)
+## Full Width
 
 The OptionsTile component has fullWidth (100%) enabled by default but it can be disabled if need be.
 
 <Canvas isExpanded>
-  <Story name="Full Width">
+  <Story name="Not Full Width">
     {() => {
       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
@@ -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.
 
 <Canvas withSource="open">
   <Story
@@ -126,36 +125,6 @@ the entire gamut of styling options.
     {() => {
       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 (
         <Box height="400px">
           <Box direction="row" gap="md" wrap>
@@ -170,48 +139,16 @@ 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',
               }}
             >
               <Button onClick={togglePopover} variant="primary" tone="neutral">
                 Toggle Popover
               </Button>
             </Popover>
           </Box>
-          <Box direction="row" gap="sm" wrap margin="3xl 0 0 0">
-            <Box width="200px">
-              <SelectInput
-                options={backgroundOptions}
-                onChange={event => {
-                  setPopoverBackground(event.target.value);
-                }}
-                value={popoverBackground}
-                label="Background Color"
-              />
-            </Box>
-            <Box width="200px">
-              <SelectInput
-                options={fontColorOptions}
-                onChange={event => {
-                  setPopoverFontColor(event.target.value);
-                }}
-                value={popoverFontColor}
-                label="Font Color"
-              />
-            </Box>
-            <Box width="200px">
-              <SelectInput
-                options={borderRadiusOptions}
-                onChange={event => {
-                  setPopoverRadius(event.target.value);
-                }}
-                value={popoverRadius}
-                label="Border Radius"
-              />
-            </Box>
-          </Box>
         </Box>
       );
     }}
@@ -284,8 +221,6 @@ prevent the content from getting cut off.
                 placement={position}
                 contentContainerProps={{
                   padding: 'sm',
-                  background: 'secondary',
-                  color: 'white',
                 }}
               >
                 <Button
@@ -345,11 +280,6 @@ in order to render the element anywhere on the page.
             content={popoverContent}
             isOpen={isPopoverOpen}
             placement="right-start"
-            contentContainerProps={{
-              padding: 'md',
-              background: 'secondary',
-              color: 'white',
-            }}
             withPortal
             portalTarget={document.body}
             onClickOutside={closePopover}
@@ -402,10 +332,6 @@ NOTE: this should be use sparingly since context dependent on hover, isn't an op
             content={popoverContent}
             isOpen={isPopoverOpen}
             placement="right-start"
-            contentContainerProps={{
-              padding: 'md',
-              background: 'primary-300',
-            }}
           >
             <Button
               onMouseOver={openPopover}
@@ -465,10 +391,6 @@ in cases where the click target includes the Popover trigger or content nodes.
             withPortal
             portalTarget={document.body}
             onClickOutside={closePopover}
-            contentContainerProps={{
-              padding: 'md',
-              background: 'primary-300',
-            }}
           >
             <Button onClick={togglePopover} variant="primary" tone="neutral">
               Toggle Popover
@@ -522,10 +444,6 @@ Use the `trapFocus` prop to constrain focus to popover content elements.
             content={popoverContent}
             isOpen={isPopoverOpen}
             placement="right-start"
-            contentContainerProps={{
-              padding: 'md',
-              background: 'grey-50',
-            }}
             withPortal
             portalTarget={document.body}
             onClickOutside={closePopover}
@@ -559,23 +477,18 @@ Render the popover with no arrow by passing `hasArrow` false.
         handleClose: closePopover,
       } = useOpenClose();
       const popoverContent = (
-        <>
-          <Box direction="column" gap="sm">
-            <Heading>With no arrow</Heading>
-            <p>I am floating in space</p>
-          </Box>
-        </>
+        <Box direction="column" gap="sm">
+          <p>I am floating in space</p>
+        </Box>
       );
       return (
         <>
           <Popover
             content={popoverContent}
             isOpen={isPopoverOpen}
             placement="right"
-            contentContainerProps={{
-              padding: 'sm',
-            }}
             onClickOutside={closePopover}
+            hasArrow={false}
           >
             <Button onClick={togglePopover} variant="primary" tone="neutral">
               Toggle Popover
@@ -606,12 +519,9 @@ Place the popover closer or farther from its trigger with the `offsetFromTarget`
         setInputValue(event.target.value);
       };
       const popoverContent = (
-        <>
-          <Box direction="column" gap="sm">
-            <Heading>Custom Offset</Heading>
-            <p>Near, far, wherever your are...</p>
-          </Box>
-        </>
+        <Box direction="column" gap="sm">
+          <p>Near, far, wherever your are...</p>
+        </Box>
       );
       return (
         <>

diff --git a/src/components/Popover/Popover.test.tsx b/src/components/Popover/Popover.test.tsx
@@ -24,7 +24,7 @@ describe('Popover', () => {
       expect(popoverContainer).toBeInTheDocument();
       expect(popoverContainer).toHaveAttribute('role', 'dialog');
       expect(popoverContainer).toHaveAttribute('aria-hidden', 'false');
-      expect(popoverContainer).toHaveClass('background-color-white');
+      expect(popoverContainer).toHaveClass('background-color-inverse');
       expect(popoverContainer).toHaveClass('p-sm');
       await waitFor(() => expect(popoverContainer).toHaveAttribute('data-popper-placement', 'right'));
     });

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -95,7 +95,8 @@ export type PopoverProps = {
 })
 
 const contentContainerDefaults: BoxProps = {
-  background: 'white',
+  background: 'inverse',
+  color: 'inverse-primary',
   padding: 'sm',
   radius: 'sm',
   shadow: 'md',

diff --git a/src/components/TextInputInset/TextInputInset.module.scss b/src/components/TextInputInset/TextInputInset.module.scss
@@ -220,7 +220,7 @@
 
 .prefix {
   border: 1px solid var(--color-border-separator);
-  background-color: var(--color-brand-grey-50);
+  background-color: var(--color-background-form-control-disabled);
   border-top-left-radius: var(
     --form-control-size-md-border-radius,
     var(--INTERNAL_form-control-size-md-border-radius)
@@ -229,11 +229,12 @@
     --form-control-size-md-border-radius,
     var(--INTERNAL_form-control-size-md-border-radius)
   );
+  color: var(--color-text-body-secondary);
 }
 
 .suffix {
   border: 1px solid var(--color-border-separator);
-  background-color: var(--color-brand-grey-50);
+  background-color: var(--color-background-form-control-disabled);
   border-top-right-radius: var(
     --form-control-size-md-border-radius,
     var(--INTERNAL_form-control-size-md-border-radius)
@@ -242,6 +243,7 @@
     --form-control-size-md-border-radius,
     var(--INTERNAL_form-control-size-md-border-radius)
   );
+  color: var(--color-text-body-secondary);
 }
 
 .text-input-wrapper {

diff --git a/src/components/Toggle/Toggle.module.scss b/src/components/Toggle/Toggle.module.scss
@@ -181,7 +181,7 @@
   padding: 2px;
 
   &.error {
-    background-color: var(--color-brand-danger-500);
+    background-color: var(--color-background-toggle-error);
   }
 }
 
@@ -198,11 +198,11 @@
   white-space: nowrap;
 
   &:checked + .toggle-track {
-    background-color: var(--color-brand-primary-500);
+    background-color: var(--color-background-toggle-checked);
   }
 
   &:checked + .toggle-track.error {
-    background-color: var(--color-brand-danger-500);
+    background-color: var(--color-background-toggle-error);
   }
 
   &:checked + .toggle-track .toggle-thumb.thumb-size-sm {

diff --git a/src/styles/variables/forms.scss b/src/styles/variables/forms.scss
@@ -40,9 +40,6 @@
   --INTERNAL_form-control-border-color-selected-error: var(
     --color-brand-danger-500
   );
-  --INTERNAL_form-control-border-color-selected-hover: var(
-    --color-brand-primary-500
-  );
 
   // ----RADIO GROUP----
   --INTERNAL_form-control-radio-group-description-spacing: var(

diff --git a/yarn.lock b/yarn.lock
@@ -2792,18 +2792,6 @@
     "@figspec/components" "^1.0.0"
     "@lit-labs/react" "^1.0.2"
 
-"@fullstory/browser@^1.4.9":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@fullstory/browser/-/browser-1.7.1.tgz#eb94fcb5e21b13a1b30de58951480ac344e61cdd"
-  integrity sha512-IBPisG+xRyTHHX8XkZJkQRbP2hVYNMZUYW8R3YiB582dl/VZImkFN+LopIAfPqB97FAZgUTofi7flkrHT4Qmtg==
-  dependencies:
-    "@fullstory/snippet" "1.3.1"
-
-"@fullstory/[email protected]":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@fullstory/snippet/-/snippet-1.3.1.tgz#6817ea94601e071e630b25262e703ca356a5f537"
-  integrity sha512-NgrBWGHH5i8zejlRFSyJNhovkNqHAXsWKrcXIWaABrgESwbkdGETjOU7BD7d1ZeT0X+QXL/2yr/1y4xnWfVkwQ==
-
 "@gar/promisify@^1.0.1", "@gar/promisify@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -3532,10 +3520,10 @@
     react-remove-scroll "^2.4.3"
     tslib "^2.3.0"
 
-"@palmetto/palmetto-design-tokens@1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@palmetto/palmetto-design-tokens/-/palmetto-design-tokens-1.6.0.tgz#c849df844dbe32665b16095b3cbb8af7f3801eda"
-  integrity sha512-76jKSf4I4unVpCmvt0jPG6wllKXO8XVZySiK3JuQcS2FWQ++T3sThGQpwgE1yESi8Y7gYzQccilwr7z1RFeCnw==
+"@palmetto/palmetto-design-tokens@1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@palmetto/palmetto-design-tokens/-/palmetto-design-tokens-1.7.2.tgz#269903b7cbfa77a95889ad5eeaa453332fdd9f99"
+  integrity sha512-4Ldyr+U+oUCnDHXkXOBIdmQSiZjG/E6pst/Tl69qLBJ3ZsvLUXvu3jyiGy//O0wYpVaO7BBsyT3q5a6e5ycdyg==
 
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.10"