fix(addon-docs): ColorPalette style (#9643)

fix(addon-docs): ColorPalette style
storybookjs · Jan 27, 2020 · d401a25 · d401a25
2 parents 3f4bf9e + e5229cd
commit d401a25
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
@@ -35,8 +35,15 @@ const SwatchLabel = styled.div(({ theme }) => ({
       ? transparentize(0.4, theme.color.defaultText)
       : transparentize(0.6, theme.color.defaultText),
 
-  small: {
+  '> div': {
+    display: 'inline-block',
+    overflow: 'hidden',
+    maxWidth: '100%',
+  },
+
+  span: {
     display: 'block',
+    marginTop: 2,
   },
 }));
 
@@ -128,8 +135,10 @@ function renderSwatch(color: string) {
 function renderSwatchLabel(color: string, colorDescription?: string) {
   return (
     <SwatchLabel key={color} title={color}>
-      {color}
-      {colorDescription && <small>{colorDescription}</small>}
+      <div>
+        {color}
+        {colorDescription && <span>{colorDescription}</span>}
+      </div>
     </SwatchLabel>
   );
 }