Remove :invalid pseudoclass from InputBox.Option (#94)

RocketChat · Nov 25, 2019 · 20ea696 · 20ea696
1 parent e116296
commit 20ea696
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 5 deletions.
diff --git a/...ges/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png b/...ges/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png
diff --git a/...ages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png b/...ages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png
diff --git a/packages/fuselage/src/components/Divider/index.js b/packages/fuselage/src/components/Divider/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { createStyledComponent } from '../../styles';
+
+const Container = createStyledComponent('rcx-divider', 'hr');
+
+export const Divider = (props) => <Container {...props}/>;
diff --git a/packages/fuselage/src/components/Divider/spec.js b/packages/fuselage/src/components/Divider/spec.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Divider } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Divider />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/packages/fuselage/src/components/Divider/stories.mdx b/packages/fuselage/src/components/Divider/stories.mdx
@@ -0,0 +1,16 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { Divider } from '../..';
+
+<Meta title='Misc|Divider' parameters={{ jest: ['Divider/spec'] }} />
+
+# Divider
+
+<Preview>
+  <Story name='Default'>
+    <Divider/>
+  </Story>
+</Preview>
+
+<Props of={Divider}/>
diff --git a/packages/fuselage/src/components/Divider/styles.scss b/packages/fuselage/src/components/Divider/styles.scss
@@ -0,0 +1,7 @@
+@import '~@rocket.chat/fuselage-tokens/colors.scss';
+
+.rcx-divider {
+  border: #{ $borders-width-x1 } solid #{ map-get($colors, dark300) };
+  margin-block-end: #{ $spaces-x16 };
+  margin-block-start: #{ $spaces-x16 };
+}
diff --git a/packages/fuselage/src/components/InputBox/styles.scss b/packages/fuselage/src/components/InputBox/styles.scss
@@ -342,11 +342,6 @@
 
   @include paragraph;
   color: #{ $input-colors-color };
-
-  .rcx-input-box:invalid > &,
-  .rcx-input-box.invalid > & {
-    color: #{ $input-colors-invalid-color };
-  }
 }
 
 .rcx-skeleton__input {

diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js
@@ -24,3 +24,4 @@ export * from './TextInput';
 export * from './Tile';
 export * from './ToggleSwitch';
 export * from './UrlInput';
+export * from './Divider';
diff --git a/packages/fuselage/src/components/index.scss b/packages/fuselage/src/components/index.scss
@@ -16,3 +16,4 @@
 @import './Text/styles.scss';
 @import './Tile/styles.scss';
 @import './ToggleSwitch/styles.scss';
+@import './Divider/styles.scss';
diff --git a/packages/fuselage/src/styles/variables/borders.scss b/packages/fuselage/src/styles/variables/borders.scss
@@ -1,5 +1,7 @@
 @import '~@rocket.chat/fuselage-tokens/borders.scss';
 
+$borders-width-x1: 1px;
+
 $borders-width-x2: theme('borders-width-x2', to-rem(get-map-value($borders, widths, 1)));
 
 $borders-radius-x2: theme('borders-radius-x2', to-rem(get-map-value($borders, radii, 1)));