Create "inline" type for Button component (#13304)

ui/components/ui/button/button.component.js

@@ -10,6 +10,7 @@ const CLASSNAME_RAISED = 'btn-raised';
 const CLASSNAME_LARGE = 'btn--large';
 const CLASSNAME_ROUNDED = 'btn--rounded';
 const CLASSNAME_FIRST_TIME = 'btn--first-time';
+const CLASSNAME_INLINE = 'btn--inline';
 
 const typeHash = {
   default: CLASSNAME_DEFAULT,
@@ -19,6 +20,7 @@ const typeHash = {
   danger: 'btn-danger',
   'danger-primary': 'btn-danger-primary',
   link: 'btn-link',
+  inline: CLASSNAME_INLINE,
   // TODO: Legacy button type to be deprecated
   confirm: CLASSNAME_CONFIRM,
   raised: CLASSNAME_RAISED,
@@ -35,7 +37,7 @@ const Button = ({
   rounded = true,
   ...buttonProps
 }) => {
-  const doRounding = rounded && type !== 'link';
+  const doRounding = rounded && type !== 'link' && type !== 'inline';
   // To support using the Button component to render styled links that are semantic html
   // we swap the html tag we use to render this component and delete any buttonProps that
   // we know to be erroneous attributes for a link. We will likely want to extract Link

ui/components/ui/button/button.stories.js

@@ -28,6 +28,7 @@ export default {
         'danger',
         'danger-primary',
         'link',
+        'inline',
       ],
     },
     large: { control: 'boolean' },
@@ -87,6 +88,9 @@ export const Type = (args) => (
     <Button {...args} type="link">
       {args.children || 'Link'}
     </Button>
+    <Button {...args} type="inline">
+      {args.children || 'Inline'}
+    </Button>
   </>
 );
 
@@ -104,6 +108,18 @@ TypeLink.args = {
   children: 'Click me',
 };
 
+export const TypeInline = (args) => (
+  <div>
+    this is a inline button
+    <Button type={args.type}>{args.children}</Button>
+  </div>
+);
+
+TypeInline.args = {
+  type: 'inline',
+  children: 'Click me',
+};
+
 export const Icon = (args) => <Button {...args}>{args.children}</Button>;
 
 Icon.args = {

ui/components/ui/button/buttons.scss

@@ -318,3 +318,29 @@ input[type="submit"][disabled] {
     }
   }
 }
+
+.btn--inline {
+  display: inline;
+  padding: 0 4px;
+  font-size: inherit;
+  width: auto;
+  color: var(--Blue-500);
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    color: var(--Blue-400);
+  }
+
+  &:active {
+    color: var(--Blue-600);
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: 1;
+    pointer-events: none;
+    color: var(--hover-secondary);
+  }
+}