feat(TextArea): refactor TextArea to sass modules (#9037)

packages/carbon-react/src/components/TextArea/TextArea.stories.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { TextArea, TextAreaSkeleton } from 'carbon-components-react';
+
+export default {
+  title: 'Components/TextArea',
+  parameters: {
+    component: TextArea,
+    subcomponents: {
+      TextAreaSkeleton,
+    },
+  },
+};
+
+export const Default = () => (
+  <TextArea
+    labelText="Text Area label"
+    helperText="Optional helper text"
+    placeholder="Placeholder text"
+    cols={50}
+    rows={4}
+    id="text-area-1"
+  />
+);
+
+export const Skeleton = () => <TextAreaSkeleton />;

packages/carbon-react/src/components/TextArea/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { TextArea, TextAreaSkeleton } from 'carbon-components-react';

packages/styles/scss/components/__tests__/text-area-test.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/text-area', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+       @use 'sass:meta';
+       @use '../text-area';
+
+       $_: get('mixin', meta.mixin-exists('text-area', 'text-area'));
+     `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

packages/styles/scss/components/_index.scss

@@ -26,7 +26,8 @@
 @use 'data-table/expandable';
 @use 'data-table/skeleton';
 @use 'data-table/sort';
-@use "text-input";
+@use 'text-area';
+@use 'text-input';
 @use 'structured-list';
 @use 'overflow-menu';
 @use 'number-input';

packages/styles/scss/components/text-area/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'text-area';
+@use 'text-area';
+
+@include text-area.text-area;

packages/styles/scss/components/text-area/_text-area.scss

@@ -0,0 +1,105 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../form';
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../../utilities/placeholder-colors' as *;
+@use '../../utilities/skeleton' as *;
+
+/// Text area styles
+/// @access public
+/// @group text-area
+@mixin text-area {
+  .#{$prefix}--text-area {
+    @include reset;
+    @include type-style('body-long-01');
+    @include focus-outline('reset');
+
+    width: 100%;
+    min-width: 10rem;
+    height: 100%;
+    min-height: rem(40px);
+    padding: rem(11px) $spacing-05;
+    border: none;
+    border-bottom: 1px solid $border-strong;
+    background-color: $field;
+    color: $text-primary;
+    font-family: inherit;
+    resize: vertical;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--text-area:focus,
+  .#{$prefix}--text-area:active {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--text-area::placeholder {
+    @include placeholder-colors;
+    @include type-style('body-long-01');
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--text-area--light {
+    background-color: $field-02;
+  }
+
+  .#{$prefix}--text-area--invalid {
+    padding-right: $spacing-08;
+  }
+
+  .#{$prefix}--text-area__wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+  }
+
+  .#{$prefix}--text-area__invalid-icon {
+    position: absolute;
+    top: $spacing-04;
+    right: $spacing-05;
+    fill: $support-error;
+  }
+
+  //-----------------------------
+  // Disabled
+  //-----------------------------
+  .#{$prefix}--text-area:disabled {
+    border-bottom: 1px solid transparent;
+    background-color: $field-disabled;
+    color: $text-disabled;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .#{$prefix}--text-area:disabled::placeholder {
+    color: $text-disabled;
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
+    background-color: $field-02;
+  }
+
+  // Skeleton State
+  .#{$prefix}--text-area.#{$prefix}--skeleton {
+    @include skeleton;
+
+    height: rem(100px);
+
+    &::placeholder {
+      color: transparent;
+    }
+  }
+}