feat(Button, OrderedList, UnorderedList): add expressive styles (#8477)

* feat: add expressive prop to btn * feat: add expressive styles * docs: add expressive knob to playground * feat: add expressive prop to lists * feat: add expressive list styles * docs: add expressive knob to list stories * chore: update tests * fix: update prop name and sizing * chore: update tests * test(expressive): expressive list btn * remove console.log - failing tests * test(button): update tests * fix: expressive button sizing * fix: expressive story and icon only btn * chore: remove comment * chore: remove comment * fix: v10 sizing for expressive story Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com> Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Jan Child <44503588+janchild@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 12, 2021 · c829406 · c829406
1 parent bf82b04
commit c829406
Show file tree

Hide file tree

Showing 14 changed files with 267 additions and 71 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -440,6 +440,23 @@
     padding: $button-padding-field;
   }
 
+  //expressive styles
+  .#{$prefix}--btn--expressive {
+    @include carbon--type-style('body-short-02');
+
+    min-height: 3rem;
+  }
+
+  .#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive {
+    padding: 12px 13px;
+    //default size 48px
+  }
+
+  .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon {
+    width: rem(20px);
+    height: rem(20px);
+  }
+
   // Skeleton State
   .#{$prefix}--btn.#{$prefix}--skeleton {
     @include skeleton;
@@ -458,8 +475,6 @@
 
   .#{$prefix}--btn-set .#{$prefix}--btn {
     width: 100%;
-    // 196px from design kit
-    max-width: rem(196px);
 
     &:not(:focus) {
       box-shadow: rem(-1px) 0 0 0 $button-separator;
@@ -470,6 +485,11 @@
     }
   }
 
+  .#{$prefix}--btn-set .#{$prefix}--btn:not(.#{$prefix}--btn--expressive) {
+    // 196px from design kit
+    max-width: rem(196px);
+  }
+
   .#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn {
     box-shadow: inherit;
   }

diff --git a/packages/components/src/components/list/_list.scss b/packages/components/src/components/list/_list.scss
@@ -28,6 +28,11 @@
     list-style: none;
   }
 
+  .#{$prefix}--list--expressive,
+  .#{$prefix}--list--expressive .#{$prefix}--list--nested {
+    @include type-style('body-long-02');
+  }
+
   .#{$prefix}--list--ordered--native {
     list-style: decimal;
   }

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -150,6 +150,7 @@ Map {
     "defaultProps": Object {
       "dangerDescription": "danger",
       "disabled": false,
+      "isExpressive": false,
       "kind": "primary",
       "size": "default",
       "tabIndex": 0,
@@ -194,6 +195,9 @@ Map {
         "type": "string",
       },
       "iconDescription": [Function],
+      "isExpressive": Object {
+        "type": "bool",
+      },
       "isSelected": Object {
         "type": "bool",
       },
@@ -4250,6 +4254,7 @@ Map {
   },
   "OrderedList" => Object {
     "defaultProps": Object {
+      "isExpressive": false,
       "native": false,
       "nested": false,
     },
@@ -4260,6 +4265,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "isExpressive": Object {
+        "type": "bool",
+      },
       "native": Object {
         "type": "bool",
       },
@@ -6476,6 +6484,7 @@ Map {
   },
   "UnorderedList" => Object {
     "defaultProps": Object {
+      "isExpressive": false,
       "nested": false,
     },
     "propTypes": Object {
@@ -6485,6 +6494,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "isExpressive": Object {
+        "type": "bool",
+      },
       "nested": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
@@ -74,6 +74,7 @@ const props = {
     const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
     return {
       className: 'some-class',
+      isExpressive: boolean('Expressive', false),
       kind: select('Button kind (kind)', kinds, 'primary'),
       disabled: boolean('Disabled (disabled)', false),
       size: select('Button size (size)', sizes, 'default'),
@@ -96,6 +97,7 @@ const props = {
     }
     return {
       className: 'some-class',
+      isExpressive: boolean('Expressive', false),
       kind: select('Button kind (kind)', kinds, 'primary'),
       disabled: boolean('Disabled (disabled)', false),
       isSelected: boolean('Selected (isSelected)', false),
@@ -123,6 +125,7 @@ const props = {
     const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
     return {
       className: 'some-class',
+      isExpressive: boolean('Expressive', false),
       disabled: boolean('Disabled (disabled)', false),
       size: select('Button size (size)', sizes, 'default'),
       renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
@@ -196,10 +199,14 @@ export const Playground = () => {
           alignItems: 'center',
           flexWrap: 'wrap',
         }}>
-        <Button {...regularProps}>Button</Button>
+        <Button {...regularProps}>Buttons</Button>
         &nbsp;
         {!regularProps.kind.includes('danger') && (
-          <Button hasIconOnly {...iconOnly}></Button>
+          <>
+            <Button hasIconOnly {...iconOnly}></Button>
+            &nbsp;
+            <Button hasIconOnly {...iconOnly} kind="ghost"></Button>
+          </>
         )}
       </div>
       <div
@@ -241,6 +248,69 @@ export const SetOfButtons = () => {
   );
 };
 
+export const ExpressiveButtons = () => {
+  return (
+    <>
+      <div
+        style={{
+          margin: '1rem',
+        }}>
+        <Button isExpressive size="default">
+          Button
+        </Button>
+      </div>
+      <div
+        style={{
+          margin: '1rem',
+        }}>
+        <Button isExpressive size="lg">
+          Button
+        </Button>
+      </div>
+      <div
+        style={{
+          margin: '1rem',
+        }}>
+        <Button isExpressive size="xl">
+          Button
+        </Button>
+      </div>
+      <div
+        style={{
+          margin: '1rem',
+        }}>
+        <Button isExpressive size="default" renderIcon={Add16}>
+          Button
+        </Button>
+      </div>
+      <div
+        style={{
+          margin: '1rem',
+        }}>
+        <Button
+          isExpressive
+          renderIcon={Add16}
+          hasIconOnly
+          iconDescription="Icon description"
+        />
+      </div>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}>
+        <ButtonSet>
+          <Button kind="secondary" isExpressive>
+            Secondary button
+          </Button>
+          <Button kind="primary" isExpressive>
+            Primary button
+          </Button>
+        </ButtonSet>
+      </div>
+    </>
+  );
+};
+
 export const Skeleton = () => (
   <div>
     <ButtonSkeleton />

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -28,6 +28,7 @@ const Button = React.forwardRef(function Button(
     size,
     kind,
     href,
+    isExpressive,
     isSelected,
     tabIndex,
     type,
@@ -122,14 +123,19 @@ const Button = React.forwardRef(function Button(
 
   const buttonClasses = classNames(className, {
     [`${prefix}--btn`]: true,
-    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm' || small,
-    [`${prefix}--btn--md`]: size === 'field' || size === 'md',
+    [`${prefix}--btn--sm`]:
+      (size === 'small' && !isExpressive) ||
+      (size === 'sm' && !isExpressive) ||
+      (small && !isExpressive),
+    [`${prefix}--btn--md`]:
+      (size === 'field' && !isExpressive) || (size === 'md' && !isExpressive),
     // V11: change lg to xl
     [`${prefix}--btn--lg`]: enabled ? size === 'xl' : size === 'lg',
     // V11: change xl to 2xl
     [`${prefix}--btn--xl`]: enabled ? size === '2xl' : size === 'xl',
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
+    [`${prefix}--btn--expressive`]: isExpressive,
     [`${prefix}--tooltip--hidden`]: hasIconOnly && !allowTooltipVisibility,
     [`${prefix}--tooltip--visible`]: isHovered,
     [`${prefix}--btn--icon-only`]: hasIconOnly,
@@ -275,6 +281,11 @@ Button.propTypes = {
     return undefined;
   },
 
+  /**
+   * Specify whether the Button is expressive, or not
+   */
+  isExpressive: PropTypes.bool,
+
   /**
    * Specify whether the Button is currently selected
    */
@@ -383,6 +394,7 @@ Button.defaultProps = {
   dangerDescription: 'danger',
   tooltipAlignment: 'center',
   tooltipPosition: 'top',
+  isExpressive: false,
 };
 
 export default Button;
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1887,6 +1887,7 @@ exports[`DataTable should render 1`] = `
                 <Button
                   dangerDescription="danger"
                   disabled={false}
+                  isExpressive={false}
                   kind="primary"
                   onClick={[MockFunction]}
                   size="small"
@@ -2047,6 +2048,7 @@ exports[`DataTable should render 1`] = `
                     <Button
                       dangerDescription="danger"
                       disabled={false}
+                      isExpressive={false}
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -2126,6 +2128,7 @@ exports[`DataTable should render 1`] = `
                     <Button
                       dangerDescription="danger"
                       disabled={false}
+                      isExpressive={false}
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -2205,6 +2208,7 @@ exports[`DataTable should render 1`] = `
                     <Button
                       dangerDescription="danger"
                       disabled={false}
+                      isExpressive={false}
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -2276,6 +2280,7 @@ exports[`DataTable should render 1`] = `
                     className="bx--batch-summary__cancel"
                     dangerDescription="danger"
                     disabled={false}
+                    isExpressive={false}
                     kind="primary"
                     onClick={[Function]}
                     size="default"
@@ -2536,6 +2541,7 @@ exports[`DataTable should render 1`] = `
               <Button
                 dangerDescription="danger"
                 disabled={false}
+                isExpressive={false}
                 kind="primary"
                 onClick={[MockFunction]}
                 size="small"
@@ -2926,6 +2932,7 @@ exports[`DataTable sticky header should render 1`] = `
                 <Button
                   dangerDescription="danger"
                   disabled={false}
+                  isExpressive={false}
                   kind="primary"
                   onClick={[MockFunction]}
                   size="small"
@@ -3089,6 +3096,7 @@ exports[`DataTable sticky header should render 1`] = `
                     <Button
                       dangerDescription="danger"
                       disabled={false}
+                      isExpressive={false}
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -3168,6 +3176,7 @@ exports[`DataTable sticky header should render 1`] = `
                     <Button
                       dangerDescription="danger"
                       disabled={false}
+                      isExpressive={false}
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -3247,6 +3256,7 @@ exports[`DataTable sticky header should render 1`] = `
                     <Button
                       dangerDescription="danger"
                       disabled={false}
+                      isExpressive={false}
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -3318,6 +3328,7 @@ exports[`DataTable sticky header should render 1`] = `
                     className="bx--batch-summary__cancel"
                     dangerDescription="danger"
                     disabled={false}
+                    isExpressive={false}
                     kind="primary"
                     onClick={[Function]}
                     size="default"
@@ -3578,6 +3589,7 @@ exports[`DataTable sticky header should render 1`] = `
               <Button
                 dangerDescription="danger"
                 disabled={false}
+                isExpressive={false}
                 kind="primary"
                 onClick={[MockFunction]}
                 size="small"

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -16,6 +16,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
     dangerDescription="danger"
     disabled={false}
     iconDescription="test"
+    isExpressive={false}
     kind="primary"
     renderIcon={
       Object {

diff --git a/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -31,6 +31,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
           className="bx--batch-summary__cancel"
           dangerDescription="danger"
           disabled={false}
+          isExpressive={false}
           kind="primary"
           onClick={[MockFunction]}
           size="default"
@@ -92,6 +93,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
           className="bx--batch-summary__cancel"
           dangerDescription="danger"
           disabled={false}
+          isExpressive={false}
           kind="primary"
           onClick={[MockFunction]}
           size="default"