diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss index f6e6283ab7d1..68fec49a6b00 100644 --- a/packages/components/src/components/pagination/_pagination.scss +++ b/packages/components/src/components/pagination/_pagination.scss @@ -105,6 +105,20 @@ $css--helpers: true; background: $hover-ui; } + .#{$prefix}--pagination + .#{$prefix}--select--inline + .#{$prefix}--select-input:focus, + .#{$prefix}--pagination + .#{$prefix}--select--inline + .#{$prefix}--select-input:focus + option, + .#{$prefix}--pagination + .#{$prefix}--select--inline + .#{$prefix}--select-input:focus + optgroup { + background-color: $layer; + } + .#{$prefix}--pagination .#{$prefix}--select__arrow { top: 50%; transform: translate(-0.5rem, -50%); diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss index ebc21d7bb7a1..ca42a3852bbd 100644 --- a/packages/components/src/components/select/_select.scss +++ b/packages/components/src/components/select/_select.scss @@ -52,6 +52,7 @@ border-radius: 0; color: $text-01; cursor: pointer; + font-family: inherit; // reset disabled ` */ diff --git a/packages/react/src/components/Search/next/Search.stories.js b/packages/react/src/components/Search/next/Search.stories.js index 981d6b725133..c384e00c652a 100644 --- a/packages/react/src/components/Search/next/Search.stories.js +++ b/packages/react/src/components/Search/next/Search.stories.js @@ -5,19 +5,26 @@ * LICENSE file in the root directory of this source tree. */ -import { Search, ExpandableSearch } from 'carbon-components-react'; +import { ExpandableSearch } from 'carbon-components-react'; +import Search from '../'; import React from 'react'; import { Layer } from '../../Layer'; export default { title: 'Components/Search', component: Search, + argTypes: { + size: { + options: ['sm', 'md', 'lg'], + control: { type: 'select' }, + }, + }, subcomponents: { ExpandableSearch, }, }; -export const Default = () => ( +export const Default = (args) => ( ( id="search-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> ); -export const Disabled = () => ( +export const Disabled = (args) => ( ( id="search-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> ); -export const Expandable = () => ( +export const Expandable = (args) => ( ( id="search-expandable-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> ); -export const WithLayer = () => { +export const WithLayer = (args) => { return ( <> { id="search-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> { id="search-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> { id="search-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> @@ -91,7 +104,7 @@ export const WithLayer = () => { ); }; -export const ExpandableWithLayer = () => { +export const ExpandableWithLayer = (args) => { return ( <> { id="search-expandable-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> { id="search-expandable-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> { id="search-expandable-1" onChange={() => {}} onKeyDown={() => {}} + {...args} /> diff --git a/packages/react/src/components/Select/next/Select.stories.js b/packages/react/src/components/Select/next/Select.stories.js index 3050aeaeca66..6846eeceacd6 100644 --- a/packages/react/src/components/Select/next/Select.stories.js +++ b/packages/react/src/components/Select/next/Select.stories.js @@ -56,7 +56,7 @@ export const Inline = () => { inline id="select-1" defaultValue="placeholder-item" - labelText="" + labelText="Select" helperText="Optional helper text">