Skip to content

Commit ee7accd

Browse files
based-ghostbased-ghost
committed
(v2.0.0) - Updates to themeConfig object and adding new property 'css' to various nested objects as a means of passing raw CSS styles as a string or using styled-components exported 'css' function.
1 parent 7bee031 commit ee7accd

36 files changed

+210
-151
lines changed

‎__stories__/2-Styling.story.tsx‎

Lines changed: 75 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useMemo, useState } from 'react';
1+
import React, { useEffect, useMemo, useState, ReactNode } from 'react';
22
import { Select, Theme } from '../src';
33
import { mergeDeep } from '../src/utils';
44
import DefaultThemeObj from '../src/theme';
@@ -65,6 +65,40 @@ const CLASS_NAME_HTML =
6565
</div>
6666
</div>`;
6767

68+
const CLASS_LIST_NODE: ReactNode = (
69+
<ListWrapper className='is-class-list'>
70+
<List>
71+
<ListItem>
72+
<Code>{SELECT_CONTAINER_CLS}</Code>
73+
</ListItem>
74+
<ListItem>
75+
<Code>{CONTROL_CONTAINER_CLS}</Code>
76+
</ListItem>
77+
<ListItem>
78+
<Code>{MENU_CONTAINER_CLS}</Code>
79+
</ListItem>
80+
<ListItem>
81+
<Code>{AUTOSIZE_INPUT_CLS}</Code>
82+
</ListItem>
83+
<ListItem>
84+
<Code>{CARET_ICON_CLS}</Code>
85+
</ListItem>
86+
<ListItem>
87+
<Code>{CLEAR_ICON_CLS}</Code>
88+
</ListItem>
89+
<ListItem>
90+
<Code>{LOADING_DOTS_CLS}</Code>
91+
</ListItem>
92+
<ListItem>
93+
<Code>{OPTION_CLS}</Code>{', '}
94+
<Code>{OPTION_FOCUSED_CLS}</Code>{', '}
95+
<Code>{OPTION_SELECTED_CLS}</Code>{', '}
96+
<Code>{OPTION_DISABLED_CLS}</Code>
97+
</ListItem>
98+
</List>
99+
</ListWrapper>
100+
);
101+
68102
// Normalize animation props as be default they are type of styled-component's "FlattenSimpleInterpolation"
69103
const BOUNCE_KEYFRAMES = 'BOUNCE_KEYFRAMES 1.19s ease-in-out infinite';
70104
const FADE_IN_KEYFRAMES = 'FADE_IN_KEYFRAMES 0.225s ease-in-out forwards';
@@ -105,9 +139,11 @@ const ThemeConfigMap = Object.freeze<{[key: string]: any}>({
105139
[ThemeEnum.DARK_COLORS]: {
106140
color: {
107141
border: '#A8AEB4',
108-
textColor: '#000',
109142
primary: '#555555'
110143
},
144+
select: {
145+
css: 'color: #000;'
146+
},
111147
control: {
112148
boxShadowColor: 'rgba(85, 85, 85, 0.25)',
113149
focusedBorderColor: 'rgba(85, 85, 85, 0.75)'
@@ -125,7 +161,7 @@ const ThemeConfigMap = Object.freeze<{[key: string]: any}>({
125161
},
126162
[ThemeEnum.LARGE_TEXT]: {
127163
select: {
128-
fontSize: '1.25rem'
164+
css: 'font-size: 1.25rem;'
129165
}
130166
},
131167
[ThemeEnum.ZERO_BORDER_RADIUS]: {
@@ -174,64 +210,48 @@ storiesOf('React Functional Select', module).add('Styling', () => {
174210
<Hr />
175211
<SubTitle>Theming</SubTitle>
176212
<Columns>
177-
<Column widthPercent={40}>
178-
<Content>
179-
react-functional-select uses <PackageLink {...StyledComponentsLink} /> to handle its
180-
styling. The root node is wrapped in styled-component's <Code>ThemeProvider</Code> wrapper
181-
component which gives all child styled-components access to the provided theme via React's
182-
context API. To override react-functional-select's default theme, pass an object to
183-
the <Code>themeConfig</Code> property - any matching properties will replace those in the
184-
default theme.
185-
</Content>
186-
</Column>
187-
<Column widthPercent={60}>
188-
<CodeMarkup
189-
language='javascript'
190-
data={THEME_DEFAULTS}
191-
header='Theme Defaults'
192-
formatFn={stringifyJavascriptObj}
193-
/>
194-
</Column>
213+
<Column widthPercent={40}>
214+
<Content>
215+
react-functional-select uses{' '}
216+
<PackageLink {...StyledComponentsLink} /> to handle its styling. The
217+
root node is wrapped in styled-component's{' '}
218+
<Code>ThemeProvider</Code> wrapper component which gives all child
219+
styled-components access to the provided theme via React's context
220+
API. To override react-functional-select's default theme, pass an
221+
object to the <Code>themeConfig</Code> property - any matching
222+
properties will replace those in the default theme.
223+
</Content>
224+
<Content>
225+
Starting in version <Code>@2.0.0</Code>, some of the nested objects
226+
in the <Code>themeConfig</Code> object contain a <Code>css</Code>{' '}
227+
property of type <Code>string</Code> |{' '}
228+
<Code>FlattenSimpleInterpolation</Code> | <Code>undefined</Code>{' '}
229+
(default value is undefined). This property can be used to pass raw
230+
CSS styles as a string or wrapped in{' '}
231+
<PackageLink {...StyledComponentsLink} /> exported <Code>css</Code>{' '}
232+
function. Those objects are: select, control, icon, menu, noOptions,
233+
multiValue, and input.
234+
</Content>
235+
</Column>
236+
<Column widthPercent={60}>
237+
<CodeMarkup
238+
language='javascript'
239+
data={THEME_DEFAULTS}
240+
header='Theme Defaults'
241+
formatFn={stringifyJavascriptObj}
242+
/>
243+
</Column>
195244
</Columns>
196245
<SubTitle>Using classNames</SubTitle>
197246
<Columns>
198247
<Column widthPercent={40}>
199248
<Content>
200-
If you want to style the component using CSS classes, set the <Code>addClassNames</Code> prop
201-
to true and it will then generate <Code>className</Code> attributes for that specific instance
202-
of the component. These are the classes that are available:
249+
If you want to style the component using CSS classes, set the{' '}
250+
<Code>addClassNames</Code> prop to true and it will then generate{' '}
251+
<Code>className</Code> attributes for that specific instance of the
252+
component. These are the classes that are available:
203253
</Content>
204-
<ListWrapper className='is-class-list'>
205-
<List>
206-
<ListItem>
207-
<Code>{SELECT_CONTAINER_CLS}</Code>
208-
</ListItem>
209-
<ListItem>
210-
<Code>{CONTROL_CONTAINER_CLS}</Code>
211-
</ListItem>
212-
<ListItem>
213-
<Code>{MENU_CONTAINER_CLS}</Code>
214-
</ListItem>
215-
<ListItem>
216-
<Code>{AUTOSIZE_INPUT_CLS}</Code>
217-
</ListItem>
218-
<ListItem>
219-
<Code>{CARET_ICON_CLS}</Code>
220-
</ListItem>
221-
<ListItem>
222-
<Code>{CLEAR_ICON_CLS}</Code>
223-
</ListItem>
224-
<ListItem>
225-
<Code>{LOADING_DOTS_CLS}</Code>
226-
</ListItem>
227-
<ListItem>
228-
<Code>{OPTION_CLS}</Code>{', '}
229-
<Code>{OPTION_FOCUSED_CLS}</Code>{', '}
230-
<Code>{OPTION_SELECTED_CLS}</Code>{', '}
231-
<Code>{OPTION_DISABLED_CLS}</Code>
232-
</ListItem>
233-
</List>
234-
</ListWrapper>
254+
{CLASS_LIST_NODE}
235255
</Column>
236256
<Column widthPercent={60}>
237257
<CodeMarkup

‎__stories__/helpers/components/CodeMarkup.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const PreContainer = styled.div`
4444
width: 100%;
4545
height: 100%;
4646
overflow: auto;
47+
border-radius: 6px;
4748
min-height: 385px !important;
4849
max-height: 385px !important;
4950

‎__stories__/helpers/components/OptionsCountButton.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,10 @@ const OptionsCountButton: React.FC<OptionsCountButtonProps> = ({
4141
const onClick = !isActive ? (() => setOptionsCount(count)) : undefined;
4242

4343
return (
44-
<StyledButton isActive={isActive} onClick={onClick}>
44+
<StyledButton
45+
onClick={onClick}
46+
isActive={isActive}
47+
>
4548
{`${numberWithCommas(count)} Options`}
4649
</StyledButton>
4750
);

‎__stories__/helpers/hooks/useCallbackState.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@ import { useCallback, useState } from 'react';
33
export const useCallbackState = <T>(initialState: T): [T, (newState: T) => void] => {
44
const [state, setState] = useState<T>(initialState);
55
const setStateCallback = useCallback((newState: T): void => setState(newState), []);
6+
67
return [state, setStateCallback];
78
};

‎docs/iframe.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,4 @@
7070
}</script><style>#root[hidden],
7171
#docs-root[hidden] {
7272
display: none !important;
73-
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.7bae20ebf3e35cfd4060.bundle.js"></script><script src="vendors~main~253ae210.7bae20ebf3e35cfd4060.bundle.js"></script><script src="vendors~main~d939e436.7bae20ebf3e35cfd4060.bundle.js"></script><script src="vendors~main~db300d2f.7bae20ebf3e35cfd4060.bundle.js"></script><script src="vendors~main~1f20a385.7bae20ebf3e35cfd4060.bundle.js"></script><script src="vendors~main~678f84af.7bae20ebf3e35cfd4060.bundle.js"></script><script src="main~24120820.7bae20ebf3e35cfd4060.bundle.js"></script></body></html>
73+
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.e487bb52850fb4a36ff1.bundle.js"></script><script src="vendors~main~253ae210.e487bb52850fb4a36ff1.bundle.js"></script><script src="vendors~main~d939e436.e487bb52850fb4a36ff1.bundle.js"></script><script src="vendors~main~db300d2f.e487bb52850fb4a36ff1.bundle.js"></script><script src="vendors~main~1f20a385.e487bb52850fb4a36ff1.bundle.js"></script><script src="vendors~main~678f84af.e487bb52850fb4a36ff1.bundle.js"></script><script src="main~24120820.e487bb52850fb4a36ff1.bundle.js"></script></body></html>

‎docs/main~24120820.7bae20ebf3e35cfd4060.bundle.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)